diff --git a/framework/core/ember/app/styles/bootstrap/variables.less b/framework/core/ember/app/styles/bootstrap/variables.less
index 2813aa0b6..2f14296f5 100644
--- a/framework/core/ember/app/styles/bootstrap/variables.less
+++ b/framework/core/ember/app/styles/bootstrap/variables.less
@@ -1,4 +1,69 @@
-@brand-primary:         @fl-primary-color;
+// ---------------------------------
+// HELPERS
+
+@fl-primary-hue: hue(@fl-primary-color);
+@fl-primary-sat: saturation(@fl-primary-color);
+
+@fl-secondary-hue: hue(@fl-secondary-color);
+@fl-secondary-sat: saturation(@fl-secondary-color);
+
+// ---------------------------------
+// BODY
+
+.define-body-variables(@fl-dark-mode);
+.define-body-variables(false) {
+  @fl-body-primary-color:             @fl-primary-color;
+  @fl-body-secondary-color:           hsl(@fl-secondary-hue, min(50%, @fl-secondary-sat), 95%);
+
+  @fl-body-bg:                        #fff;
+  @fl-body-color:                     #444;
+  @fl-body-muted-color:               hsl(@fl-secondary-hue, min(25%, @fl-secondary-sat), 65%);
+  @fl-body-muted-more-color:          #bbb;
+  @fl-shadow-color:                   rgba(0, 0, 0, 0.25);
+}
+.define-body-variables(true) {
+  @fl-body-primary-color:             mix(@fl-primary-color, #000);
+  @fl-body-secondary-color:           hsl(@fl-secondary-hue, min(30%, @fl-secondary-sat), 13%);
+
+  @fl-body-bg:                        hsl(@fl-secondary-hue, min(30%, @fl-secondary-sat), 10%);
+  @fl-body-color:                     #ccc;
+  @fl-body-muted-color:               hsl(@fl-secondary-hue, min(30%, @fl-secondary-sat), 35%);
+  @fl-body-muted-more-color:          hsl(@fl-secondary-hue, min(20%, @fl-secondary-sat), 25%);
+  @fl-shadow-color:                   rgba(0, 0, 0, 0.5);
+}
+@fl-body-heading-color:             @fl-body-color;
+@fl-body-control-bg:                @fl-body-secondary-color;
+@fl-body-control-color:             @fl-body-muted-color;
+
+// ---------------------------------
+// HEADER
+
+.define-hdr-variables(@fl-colored-hdr);
+.define-hdr-variables(false) {
+  @fl-hdr-bg:                   @fl-body-bg;
+  @fl-hdr-color:                contrast(@fl-hdr-bg, #fff, @fl-body-primary-color);
+  @fl-hdr-muted-color:          @fl-body-muted-color;
+  @fl-hdr-control-bg:           @fl-body-control-bg;
+  @fl-hdr-control-color:        @fl-body-control-color;
+
+  @fl-body-hero-bg:             @fl-body-primary-color;
+  @fl-body-hero-color:          #fff;
+}
+.define-hdr-variables(true) {
+  @fl-hdr-bg:                   @fl-body-primary-color;
+  @fl-hdr-color:                #fff;
+  @fl-hdr-muted-color:          fade(#fff, 50%);
+  @fl-hdr-control-bg:           fade(#000, 10%);
+  @fl-hdr-control-color:        #fff;
+
+  @fl-body-hero-bg:             @fl-body-control-bg;
+  @fl-body-hero-color:          @fl-body-control-color;
+}
+
+// ---------------------------------
+// BOOTSTRAP
+
+@brand-primary:         @fl-body-primary-color;
 
 @body-bg:               @fl-body-bg;
 @text-color:            @fl-body-color;
@@ -21,3 +86,5 @@
 @zindex-composer: @zindex-navbar-fixed + 4;
 @zindex-pane: @zindex-navbar-fixed + 5;
 @zindex-alerts: @zindex-modal + 10;
+
+@link-hover-color: @link-color;
diff --git a/framework/core/ember/app/styles/config.less b/framework/core/ember/app/styles/config.less
index c0b0d0b4b..7eb9efa37 100644
--- a/framework/core/ember/app/styles/config.less
+++ b/framework/core/ember/app/styles/config.less
@@ -1,60 +1,11 @@
-@fl-primary-color:                  #4d698e;
-@fl-secondary-color:                #edf2f7;
-@fl-dark-body:                      false;
-@fl-dark-hdr:                       false;
-
 // ---------------------------------
-// BODY
+// CONFIG
 
-.define-body-variables(@fl-dark-body);
-.define-body-variables(false) {
-  @fl-body-bg:                        #fff;
-  @fl-body-color:                     #444;
-  @fl-body-muted-color:               hsv(hue(@fl-secondary-color), max(0, saturation(@fl-secondary-color) - 20%), 65%); // todo
-  @fl-body-muted-more-color:          #bbb;
-  @fl-body-heading-color:             @fl-body-color;
+// Color palette:
+// #AB2C2C #E7562E #E99700 #E7D81D #92D32F #55A835 #3388A7 #355B8E #7F45A9 #A0346E #797979
 
-  @fl-body-control-bg:                @fl-secondary-color;
-  @fl-body-control-color:             @fl-body-muted-color;
+@fl-primary-color:                  #355B8E;
+@fl-secondary-color:                #355B8E;
 
-  @fl-body-control-primary-bg:        @fl-primary-color;
-  @fl-body-control-primary-color:     #fff;
-}
-.define-body-variables(true) {
-  @fl-body-bg:                        #333;
-  @fl-body-color:                     #ccc;
-  @fl-body-muted-color:               hsv(hue(@fl-secondary-color), max(0, saturation(@fl-secondary-color) - 20%), 65%); // todo
-  @fl-body-muted-more-color:          #bbb;
-  @fl-body-heading-color:             @fl-body-color;
-
-  @fl-body-control-bg:                @fl-secondary-color;
-  @fl-body-control-color:             @fl-body-muted-color;
-
-  @fl-body-control-primary-bg:        @fl-primary-color;
-  @fl-body-control-primary-color:     #fff;
-}
-
-// ---------------------------------
-// HEADER
-
-.define-hdr-variables(@fl-dark-hdr);
-.define-hdr-variables(false) {
-  @fl-hdr-bg:                   @fl-body-bg;
-  @fl-hdr-color:                @fl-primary-color;
-  @fl-hdr-muted-color:          @fl-body-muted-color;
-  @fl-hdr-control-bg:           @fl-body-control-bg;
-  @fl-hdr-control-color:        @fl-body-control-color;
-
-  @fl-body-hero-bg:             @fl-primary-color;
-  @fl-body-hero-color:          #fff;
-}
-.define-hdr-variables(true) {
-  @fl-hdr-bg:                   @fl-primary-color;
-  @fl-hdr-color:                #fff;
-  @fl-hdr-muted-color:          fade(#fff, 50%);
-  @fl-hdr-control-bg:           fade(#000, 10%);
-  @fl-hdr-control-color:        #fff;
-
-  @fl-body-hero-bg:             @fl-secondary-color;
-  @fl-body-hero-color:          @fl-body-muted-color;
-}
+@fl-dark-mode:                      false;
+@fl-colored-hdr:                    false;
diff --git a/framework/core/ember/app/styles/flarum/alerts.less b/framework/core/ember/app/styles/flarum/alerts.less
index ef5b6b56e..78da2b2b2 100644
--- a/framework/core/ember/app/styles/flarum/alerts.less
+++ b/framework/core/ember/app/styles/flarum/alerts.less
@@ -6,7 +6,7 @@
 
   & .alert {
     display: inline-block;
-    .box-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
+    .box-shadow(0 2px 6px @fl-shadow-color);
     margin-top: 20px;
   }
 }
diff --git a/framework/core/ember/app/styles/flarum/components.less b/framework/core/ember/app/styles/flarum/components.less
index 83d5725fc..8aa70c8df 100644
--- a/framework/core/ember/app/styles/flarum/components.less
+++ b/framework/core/ember/app/styles/flarum/components.less
@@ -169,14 +169,15 @@
   border: 0;
   padding: 8px 0;
   margin-top: 7px;
-  .box-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
+  .box-shadow(0 2px 6px @fl-shadow-color);
+  background: @fl-body-bg;
 
   & > li > a {
     padding: 8px 15px;
     color: @fl-body-color;
     &:hover, &:focus {
       color: @fl-body-color;
-      background-color: @fl-secondary-color;
+      background-color: @fl-body-control-bg;
     }
     & .fa {
       margin-right: 5px;
@@ -185,7 +186,7 @@
   }
   & .divider {
     margin: 10px 0;
-    background-color: darken(@fl-secondary-color, 2%);
+    background-color: @fl-body-control-bg;
   }
 }
 .dropdown-split.item-count-1 {
@@ -209,7 +210,7 @@
 
 .loading-indicator {
   position: relative;
-  color: @fl-primary-color;
+  color: @fl-body-primary-color;
 }
 .loading-indicator-block {
   height: 100px;
@@ -227,7 +228,7 @@
 }
 .avatar {
   display: inline-block;
-  color: #fff;
+  color: @fl-body-bg;
   font-weight: 300;
   text-align: center;
   vertical-align: top;
diff --git a/framework/core/ember/app/styles/flarum/composer.less b/framework/core/ember/app/styles/flarum/composer.less
index 53fdcddb4..1be6a19a9 100644
--- a/framework/core/ember/app/styles/flarum/composer.less
+++ b/framework/core/ember/app/styles/flarum/composer.less
@@ -18,9 +18,9 @@
   pointer-events: auto;
   margin-left: -20px;
   margin-right: 180px;
-  .box-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
+  .box-shadow(0 2px 6px @fl-shadow-color);
   border-radius: @border-radius-base @border-radius-base 0 0;
-  background: rgba(255, 255, 255, 0.9);
+  background: fade(@fl-body-bg, 95%);
   transform: translateZ(0); // Fix for Chrome bug where a transparent white background is actually gray
   position: relative;
   height: 300px;
@@ -31,7 +31,7 @@
     margin-right: -20px;
   }
   &.active, &.fullscreen {
-    background: #fff;
+    background: @fl-body-bg;
   }
   &.minimized {
     height: 50px;
diff --git a/framework/core/ember/app/styles/flarum/discussion.less b/framework/core/ember/app/styles/flarum/discussion.less
index c2538a320..81f39368a 100644
--- a/framework/core/ember/app/styles/flarum/discussion.less
+++ b/framework/core/ember/app/styles/flarum/discussion.less
@@ -277,7 +277,7 @@
     position: relative;
   }
   .scrubber-before, .scrubber-after {
-    border-left: 1px solid darken(@fl-secondary-color, 2%);
+    border-left: 1px solid @fl-body-secondary-color;
   }
   .scrubber-slider {
     position: relative;
@@ -287,13 +287,13 @@
   .scrubber-handle {
     height: 100%;
     width: 5px;
-    background: @fl-primary-color;
+    background: @fl-body-primary-color;
     border-radius: 4px;
     float: left;
     margin-left: -2px;
     transition: background 0.2s;
     .disabled & {
-      background: @fl-secondary-color;
+      background: @fl-body-secondary-color;
     }
   }
   .scrubber-info {
diff --git a/framework/core/ember/app/styles/flarum/index.less b/framework/core/ember/app/styles/flarum/index.less
index e341c064d..1ec9cc49e 100644
--- a/framework/core/ember/app/styles/flarum/index.less
+++ b/framework/core/ember/app/styles/flarum/index.less
@@ -57,7 +57,7 @@
       }
       & > li.active > a {
         background: none;
-        color: @fl-primary-color;
+        color: @fl-body-primary-color;
         font-weight: bold;
       }
     }
@@ -103,9 +103,9 @@
     top: 56px;
     bottom: 0;
     width: @index-pane-width;
-    background: #fff;
+    background: @fl-body-bg;
     padding-bottom: 200px;
-    .box-shadow(2px 2px 6px -2px rgba(0, 0, 0, 0.25));
+    .box-shadow(2px 2px 6px -2px @fl-shadow-color);
     .transition(left 0.2s);
 
     &.showing, .with-pane & {
@@ -131,7 +131,7 @@
       padding-left: 65px + 15px;
       padding-right: 65px + 15px;
       &.active {
-        background: @fl-secondary-color;
+        background: @fl-body-control-bg;
       }
     }
     & .discussion-summary {
@@ -191,6 +191,7 @@
 
   &, & a {
     color: @fl-body-muted-color;
+    text-decoration: none;
   }
   & .author {
     float: left;
@@ -206,12 +207,19 @@
     &.active {
       text-decoration: none;
     }
+    &:hover .title {
+      text-decoration: underline;
+    }
   }
   & .title {
     margin: 0 0 5px;
     font-size: 15px;
     line-height: 1.3;
   }
+  &.unread .title {
+    color: @fl-body-heading-color;
+    font-weight: bold;
+  }
   & .info {
     list-style-type: none;
     padding: 0;
diff --git a/framework/core/ember/app/styles/flarum/layout.less b/framework/core/ember/app/styles/flarum/layout.less
index 8295ac0b0..793809912 100644
--- a/framework/core/ember/app/styles/flarum/layout.less
+++ b/framework/core/ember/app/styles/flarum/layout.less
@@ -25,10 +25,10 @@ body {
   .transition(box-shadow 0.2s);
 
   .scrolled & {
-    .box-shadow(0 2px 6px rgba(0, 0, 0, 0.15));
+    .box-shadow(0 2px 6px @fl-shadow-color);
   }
 
-  & when (@fl-dark-hdr = true) {
+  & when (@fl-colored-hdr = true) {
     &, & .btn-link {
       color: @fl-hdr-control-color;
     }
@@ -121,7 +121,7 @@ body {
 // Main
 
 .global-main, .paned {
-  border-top: 1px solid @fl-secondary-color;
+  border-top: 1px solid @fl-body-control-bg;
 }
 
 // Hero
@@ -143,10 +143,11 @@ body {
   margin: 0;
   font-size: 22px;
   font-weight: normal;
+  // color: @fl-body-heading-color;
 
-  & when (@fl-dark-hdr = true) {
-    color: @fl-body-color;
-  }
+  // & when (@fl-colored-hdr = true) {
+  //   color: @fl-body-color;
+  // }
 }
 .hero p {
   margin: 10px 0 0;
diff --git a/framework/core/ember/app/styles/flarum/modals.less b/framework/core/ember/app/styles/flarum/modals.less
index ed3ead2de..f3695ff4c 100644
--- a/framework/core/ember/app/styles/flarum/modals.less
+++ b/framework/core/ember/app/styles/flarum/modals.less
@@ -19,7 +19,7 @@
 .modal-content {
   border: 0;
   border-radius: @border-radius-base;
-  .box-shadow(0 7px 15px rgba(0, 0, 0, 0.3));
+  .box-shadow(0 7px 15px @fl-shadow-color);
 }
 .modal-sm {
   width: 375px;