support themes; ref #118

README.md

@@ -47,6 +47,12 @@ If you specify `LABELS` above, this is the place to set a regex used to parse a
 "size_label": /^size (\d+)$/
 ```
 
+You can also create your own app theme. Create a LESS file following the example of the default app theme, "monza", in `src/less/themes/monza.less`, include the file in `src/less/burnchart.less` and finally specify the theme in the config:
+
+```js
+"theme": "monza"
+```
+
 ##Development
 
 To run your local version of the app, install all the NPM dependencies, watch the source files in one window, and start the static file server in the other in `--dev` mode.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "burnchart",
-  "version": "3.1.1",
+  "version": "3.2.0",
   "description": "GitHub Burndown Chart as a Service",
   "author": "Radek Stepan <dev@radekstepan.com> (http://radekstepan.com)",
   "license": "AGPL-3.0",

public/css/bundle.css

@@ -609,8 +609,7 @@ ul li {
   color: #ea9712;
 }
 #notify.alert,
-#notify.bad,
-#notify.fucked {
+#notify.bad {
   border-top-color: #C1041C;
   color: #C1041C;
 }
@@ -629,7 +628,6 @@ ul li {
   text-align: justify;
 }
 #head {
-  background: #C1041C;
   height: 64px;
 }
 #head #icon {
@@ -638,9 +636,7 @@ ul li {
   line-height: 44px;
   height: 44px;
   width: 74px;
-  background: #77000e;
   display: inline-block;
-  color: #C1041C;
   margin: 0;
   text-align: center;
 }
@@ -652,7 +648,6 @@ ul li {
 }
 #head .q .icon {
   position: absolute;
-  color: #C1041C;
 }
 #head .q .icon.search {
   top: 8px;
@@ -663,7 +658,6 @@ ul li {
   right: 12px;
 }
 #head .q input {
-  background: #77000e;
   border: 0;
   padding: 10px 12px 10px 36px;
   font-size: 14px;
@@ -683,18 +677,12 @@ ul li {
   margin-left: 30px;
 }
 #head a {
-  color: #e0808d;
   font-weight: bold;
 }
-#head a.active,
-#head a:hover {
-  color: #fff;
-}
 #head .right {
   float: right;
   margin-right: 20px;
   line-height: 64px;
-  color: #e0808d;
 }
 #head .right .button {
   -webkit-border-radius: 2px;
@@ -703,8 +691,6 @@ ul li {
   -moz-background-clip: padding;
   border-radius: 2px;
   background-clip: padding-box;
-  background: #FFBB2A;
-  color: #C1041C;
   padding: 11px 20px;
 }
 #title {
@@ -806,12 +792,10 @@ ul li {
 }
 #page #content #hero .content .cta a.primary {
   font-weight: bold;
-  background: #C1041C;
   color: #fff;
 }
 #page #content #hero .content .cta a.secondary {
   background: #fff;
-  color: #C1041C;
 }
 #page #content #add h2 {
   color: #3e4457;
@@ -864,7 +848,6 @@ ul li {
   background-clip: padding-box;
   display: inline-block;
   font-weight: bold;
-  background: #C1041C;
   color: #fff;
 }
 #page #content #add .form .suggest {
@@ -917,7 +900,6 @@ ul li {
 }
 #page #content #projects table tr td .project .error {
   cursor: help;
-  color: #C1041C;
 }
 #page #content #projects table tr td a.project {
   font-weight: bold;
@@ -969,7 +951,6 @@ ul li {
 #page #content #projects table tr td.action {
   text-align: right;
   cursor: pointer;
-  color: #77000e;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -1039,3 +1020,45 @@ ul li {
   padding: 30px;
   font-family: 'MuseoSlab500Regular', serif;
 }
+#app.theme--monza #head {
+  background: #C1041C;
+}
+#app.theme--monza #head #icon {
+  background: #760211;
+  color: #C1041C;
+}
+#app.theme--monza #head .q .icon {
+  color: #C1041C;
+}
+#app.theme--monza #head .q input {
+  background: #760211;
+}
+#app.theme--monza #head a {
+  color: #e0828e;
+}
+#app.theme--monza #head a.active,
+#app.theme--monza #head a:hover {
+  color: #fff;
+}
+#app.theme--monza #head .right {
+  color: #e0828e;
+}
+#app.theme--monza #head .right .button {
+  background: #FFBB2A;
+  color: #C1041C;
+}
+#app.theme--monza #page #content #hero .content .cta a.primary {
+  background: #C1041C;
+}
+#app.theme--monza #page #content #hero .content .cta a.secondary {
+  color: #C1041C;
+}
+#app.theme--monza #page #content #add .form a {
+  background: #C1041C;
+}
+#app.theme--monza #page #content #projects table tr td .project .error {
+  color: #C1041C;
+}
+#app.theme--monza #page #content #projects table tr td.action {
+  background: #760211;
+}

src/config.js

@@ -29,5 +29,7 @@ export default {
   "request": {
     // Default timeout of 5s.
     "timeout": 5e3
-  }
+  },
+  // The app theme; 'monza' is the default red theme.
+  "theme": "monza"
 };

src/js/index.jsx

@@ -3,4 +3,11 @@ import ReactDOM from 'react-dom';
 
 import App from './App.jsx';
 
-ReactDOM.render(<App />, document.getElementById('app'));
+import config from '../config.js';
+
+let el = document.getElementById('app');
+// Set the theme.
+el.className = `theme--${config.theme}`;
+
+// Start the router.
+ReactDOM.render(<App />, el);

src/less/app.less

@@ -1,8 +1,11 @@
+// Fonts.
 @serif_font: 'MuseoSlab500Regular', serif;
 @sans_serif_font: 'MuseoSans500Regular', sans-serif;
 
-@strong_color: #C1041C;
-@highlight_color: #FFBB2A;
+// Alerts.
+@red: #C1041C;
+@green: #00b361;
+@yellow: #ea9712;
 
 html, body {
   margin: 0;
@@ -83,18 +86,18 @@ ul {
   }
 
   &.success, &.ok, &.good {
-    border-top-color: #00b361;
-    color: #00b361;
+    border-top-color: @green;
+    color: @green;
   }
 
   &.warn, &.trouble {
-    border-top-color: #ea9712;
-    color: #ea9712;
+    border-top-color: @yellow;
+    color: @yellow;
   }
 
-  &.alert, &.bad, &.fucked {
-    border-top-color: @strong_color;
-    color: @strong_color;
+  &.alert, &.bad {
+    border-top-color: @red;
+    color: @red;
   }
 
   .icon, p {
@@ -115,7 +118,6 @@ ul {
 }
 
 #head {
-  background: @strong_color;
   height: 64px;
 
   #icon {
@@ -125,9 +127,7 @@ ul {
     line-height: 44px;
     height: 44px;
     width: 74px;
-    background: #77000e;
     display: inline-block;
-    color: @strong_color;
     margin: 0;
     text-align: center;
   }
@@ -140,7 +140,6 @@ ul {
 
     .icon {
       position: absolute;
-      color: @strong_color;
 
       &.search {
         top: 8px;
@@ -154,7 +153,6 @@ ul {
     }
 
     input {
-      background: #77000e;
       border: 0;
       padding: 10px 12px 10px 36px;
       font-size: 14px;
@@ -174,24 +172,16 @@ ul {
   }
 
   a {
-    color: #e0808d;
     font-weight: bold;
-
-    &.active, &:hover {
-      color: #fff;
-    }
   }
 
   .right {
     float: right;
     margin-right: 20px;
     line-height: 64px;
-    color: #e0808d;
 
     .button {
       .border-radius(2px);
-      background: @highlight_color;
-      color: @strong_color;
       padding: 11px 20px;
     }
   }
@@ -288,13 +278,11 @@ ul {
 
             &.primary {
               font-weight: bold;
-              background: @strong_color;
               color: #fff;
             }
 
             &.secondary {
               background: #fff;
-              color: @strong_color;
             }
           }
         }
@@ -347,7 +335,6 @@ ul {
           .border-radius(0 2px 2px 0);
           display: inline-block;
           font-weight: bold;
-          background: @strong_color;
           color: #fff;
         }
 
@@ -406,7 +393,6 @@ ul {
 
           .project .error {
             cursor: help;
-            color: @strong_color;
           }
 
           a.project {
@@ -443,15 +429,15 @@ ul {
           }
 
           .progress .bar.red {
-            background: @strong_color;
+            background: @red;
           }
 
           .progress .bar.green {
-            background: #00b361;
+            background: @green;
           }
 
           .progress .due.red {
-            color: @strong_color;
+            color: @red;
             font-weight: bold;
           }
 
@@ -462,7 +448,6 @@ ul {
           &.action {
             text-align: right;
             cursor: pointer;
-            color: #77000e;
             .user-select(none);
           }
         }
@@ -480,7 +465,7 @@ ul {
             background: #ebf6f1;
 
             .milestone, .percent, .due {
-              color: #00b361;
+              color: @green;
             }
           }
         }

src/less/burnchart.less

@@ -9,4 +9,7 @@
 @import "icons.less";
 @import "chart.less";
 @import "animations.less";
-@import "app.less";
+@import "app.less";
+
+// And the themes.
+@import "themes/monza.less";

src/less/themes/monza.less

@@ -0,0 +1,83 @@
+#app.theme--monza {
+  // Theme colors.
+  @strong_color: #C1041C;
+  @highlight_color: #FFBB2A;
+
+  #head {
+    background: @strong_color;
+
+    #icon {
+      background: darken(@strong_color, 15%);
+      color: @strong_color;
+    }
+
+    .q {
+      .icon {
+        color: @strong_color;
+      }
+
+      input {
+        background: darken(@strong_color, 15%);
+      }
+    }
+
+    a {
+      color: mix(@strong_color, #FFF, 50%);
+
+      &.active, &:hover {
+        color: #fff;
+      }
+    }
+
+    .right {
+      color: mix(@strong_color, #FFF, 50%);
+
+      .button {
+        background: @highlight_color;
+        color: @strong_color;
+      }
+    }
+  }
+
+  #page {
+    #content {
+      #hero {
+        .content {
+          .cta {
+            a {
+              &.primary {
+                background: @strong_color;
+              }
+
+              &.secondary {
+                color: @strong_color;
+              }
+            }
+          }
+        }
+      }
+
+      #add {
+        .form {
+          a {
+            background: @strong_color;
+          }
+        }
+      }
+
+      #projects {
+        table {
+          tr td {
+            .project .error {
+              color: @strong_color;
+            }
+
+            &.action {
+              background: darken(@strong_color, 15%);
+            }
+          }
+        }
+      }
+    }
+  }
+}