We use a customized Bootstrap theme in the SWC, which we then further customize to have the a different color palette. Do this when updating Bootstrap.
Step-by-step guide
- Follow the customization steps from Bootswatch.
- In the bootswatch git project, check out the most recent stable Download the forked repo:
git clonehttps://github.com/Sage-Bionetworks/bootswatch.git - Synapse customizations to theme made in branch of version that corresponds to the bootstrap version that's being used in the product.
Customize the colors defined in variables.less. Diff shown below...
-@brand-primary: #2196F3;
-@brand-success: #4CAF50;
-@brand-info: #9C27B0;
-@brand-warning: #ff9800;
-@brand-danger: #e51c23;
+@brand-primary: #1e7098;
+@brand-success: #0ea862;
+@brand-info: #7772b4;
+@brand-warning: #f19223;
+@brand-danger: #d9534f;-@font-size-h1: 56px;
Also, update the tooltip background color
-@font-size-h2: 45px;
-@font-size-h3: 34px;
-@font-size-h4: 24px;
-@font-size-h5: 20px;
+@font-size-h1: 40px;
+@font-size-h2: 33px;
+@font-size-h3: 26px;
+@font-size-h4: 20px;
+@font-size-h5: 16px;
+@font-size-h6: 14px;-@tooltip-bg: #727272;
+@tooltip-bg: #171717;And update bootswatch.less btn so that all text is not uppercase (impacts Synapse Table Headers, for example):
.btn {
- text-transform: uppercase;
At the time of writing, this is v3.3.2-customized - Following the steps from Bootswatch to configure npm and grunt.
- Build the bootswatch project to create a new bootstrap.min.css
- Rename the file so that it is called bootstrapRename bootstrap.min.css to bootstrap-paper-theme.min.css
- Replace the file in our gwtbootstrap3 project (gwtbootstrap3/src/main/resources/org/gwtbootstrap3/client/resource/css/bootstrap-paper-theme.min.css).
- Increase the gwtbootstrap3 project version, and rebuild.
- In SWC, update the pom to use the updated gwtbootstrap3 project version and rebuild.
- Verify that everything looks and functions correctly after the update!
...