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 version that corresponds to the bootstrap version that's being used.
- 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;
-@font-size-h2: 45px;
-@font-size-h3: 34px;
-@font-size-h4: 24px;
-@font-size-h5: 20px;
-@font-size-h6: 14px;
+@font-size-h1: floor((@font-size-base * 2.6));
+@font-size-h2: floor((@font-size-base * 2.15));
+@font-size-h3: ceil((@font-size-base * 1.7));
+@font-size-h4: ceil((@font-size-base * 1.25));
+@font-size-h5: @font-size-base;
+@font-size-h6: ceil((@font-size-base * 0.85));
Also, update the tooltip background color-@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;
- Build the bootswatch project to create a new bootstrap.min.css
- Rename the file so that it is called 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!