adjust default theme

src/client/styles/agile-admin/inverse/colors/antarctic.scss

@@ -1,26 +1,26 @@
 @import '../variables';
 
-$themecolor: #000080;
+$bgcolor-theme: #000080;
 $themelight: #f0f8ff;
 $subthemecolor: black;
 $accentcolor: #ffd700;
 $sidebar-text: $themelight;
-$topbar: $themecolor;
-$sidebar: $themelight;
-$bodycolor: $themelight;
-$headingtext: $subthemecolor;
-$bodytext: $subthemecolor;
+$bgcolor-navbar: $bgcolor-theme;
+$bgcolor-global: $themelight;
+$bgcolor-global: $themelight;
+$color-header: $subthemecolor;
+$color-global: $subthemecolor;
 $linktext: lighten(blue, 5%);
-$primary: $themecolor;
-$active-nav-tabs-bgcolor: $themecolor;
-$logo-mark-fill: $themelight;
-$wikilinktext: lighten($themecolor, 5%);
-$wikilinktext-hover: lighten($wikilinktext, 15%);
+$primary: $bgcolor-theme;
+$active-nav-tabs-bgcolor: $bgcolor-theme;
+$fillcolor-logo-mark: $themelight;
+$color-link-wiki: lighten($bgcolor-theme, 5%);
+$color-link-wiki-hover: lighten($color-link-wiki, 15%);
 $inline-code-color: #c7254e;
 $inline-code-bg: #f9f2f4;
 $border: $subthemecolor;
 $border-original: $subthemecolor;
-$navbar-border: $themecolor;
+$navbar-border: $bgcolor-theme;
 $background-color: rgba(
   $color: $themelight,
   $alpha: 0.8,
@@ -43,7 +43,7 @@ ul > .text-muted {
 
   .code-line.revision-head.highlighted {
     color: $themelight;
-    background-color: lighten($themecolor, 50%);
+    background-color: lighten($bgcolor-theme, 50%);
 
     .icon-note,
     .icon-link {
@@ -62,7 +62,7 @@ ul > .text-muted {
 }
 
 .sidebar {
-  background: $themecolor;
+  background: $bgcolor-theme;
 }
 
 table,
@@ -135,9 +135,9 @@ header.affix {
 
     .nav.nav-tabs {
       > li.active > a {
-        background: $themecolor;
-        border-bottom: solid 1px $themecolor;
-        border-bottom-color: $themecolor;
+        background: $bgcolor-theme;
+        border-bottom: solid 1px $bgcolor-theme;
+        border-bottom-color: $bgcolor-theme;
       }
     }
   }
@@ -164,7 +164,7 @@ body:not(.on-edit) .nav.nav-tabs {
       rgba($active-nav-tabs-bgcolor, 0) 90%,
       $active-nav-tabs-bgcolor 100%
     ); // overwrite only the bottom pixel
-    background-color: $themecolor;
+    background-color: $bgcolor-theme;
   }
 }
 

src/client/styles/agile-admin/inverse/colors/blue-night.scss

@@ -1,27 +1,27 @@
 @import '../variables';
 
-$basecolor:#061f2f;
-$themecolor:#0090c8;
+$basecolor: #061f2f;
+$bgcolor-theme: #0090c8;
 
 $linkcolor: #97d1f0;
 
-$topbar:#27343b;
-$sidebar:#061f2f;
-$bodycolor:#061f2f;
-$headingtext: #fff;
-$bodytext: #d3d4d4;
+$bgcolor-navbar: #27343b;
+$bgcolor-global: #061f2f;
+$bgcolor-global: #061f2f;
+$color-header: #fff;
+$color-global: #d3d4d4;
 $linktext: $linkcolor;
 $linktext-hover: rgba($linktext, 0.8);
-$sidebar-text:#d3d4d4;
-$dark-themecolor:#4f5467;
+$sidebar-text: #d3d4d4;
+$dark-themecolor: #4f5467;
 
-$primary: $themecolor;
+$primary: $bgcolor-theme;
 
-$logo-mark-fill: lighten(desaturate($topbar, 10%), 15%);
-$wikilinktext: $linkcolor;
-$wikilinktext-hover: rgba($linktext, 0.8);
+$fillcolor-logo-mark: lighten(desaturate($bgcolor-navbar, 10%), 15%);
+$color-link-wiki: $linkcolor;
+$color-link-wiki-hover: rgba($linktext, 0.8);
 
-$dark: darken($bodytext, 5%);
+$dark: darken($color-global, 5%);
 $border: #fff;
 $navbar-border: lighten($basecolor, 25%);
 $active-navbar-border: darken($navbar-border, 3%);
@@ -34,16 +34,18 @@ $inline-code-bg: #0a121b;
 
 .wiki {
   .highlighted {
-   background-color: lighten($themecolor, 20%);
+    background-color: lighten($bgcolor-theme, 20%);
   }
 }
 
 .panel {
-  &, &.panel-white, &.panel-default {
-    border-color: $bodytext;
+  &,
+  &.panel-white,
+  &.panel-default {
+    border-color: $color-global;
     .panel-heading {
       color: $basecolor;
-      background-color: 1px solid $bodytext;
+      background-color: 1px solid $color-global;
     }
   }
 }

src/client/styles/agile-admin/inverse/colors/christmas.scss

@@ -1,25 +1,25 @@
 @import '../variables';
 
-$themecolor: #b3000c;
+$bgcolor-theme: #b3000c;
 $themelight: white;
 $subthemecolor: #017e20;
-$topbar: $themecolor;
-$sidebar: $themelight;
-$bodycolor: $themelight;
-$headingtext: $subthemecolor;
-$bodytext: black;
+$bgcolor-navbar: $bgcolor-theme;
+$bgcolor-global: $themelight;
+$bgcolor-global: $themelight;
+$color-header: $subthemecolor;
+$color-global: black;
 $linktext: lighten(#0d5901, 5%);
 $linktext-hover: lighten($linktext, 12%);
 $sidebar-text: #ffffff;
-$primary: $themecolor;
-$logo-mark-fill: lighten(desaturate($topbar, 50%), 50%);
-$wikilinktext: lighten($themecolor, 5%);
-$wikilinktext-hover: lighten($wikilinktext, 15%);
+$primary: $bgcolor-theme;
+$fillcolor-logo-mark: lighten(desaturate($bgcolor-navbar, 50%), 50%);
+$color-link-wiki: lighten($bgcolor-theme, 5%);
+$color-link-wiki-hover: lighten($color-link-wiki, 15%);
 $inline-code-color: darken($subthemecolor, 5%);
 $inline-code-bg: lighten($subthemecolor, 70%);
 $border-original: $border;
 $border: $subthemecolor;
-$navbar-border: $themecolor;
+$navbar-border: $bgcolor-theme;
 $active-nav-tabs-bgcolor: white;
 
 @import 'apply-colors';
@@ -29,7 +29,7 @@ $active-nav-tabs-bgcolor: white;
 .wiki {
   .code-line.revision-head.highlighted {
     color: $themelight;
-    background-color: lighten($themecolor, 20%);
+    background-color: lighten($bgcolor-theme, 20%);
 
     .icon-note,
     .icon-link {
@@ -39,7 +39,7 @@ $active-nav-tabs-bgcolor: white;
 }
 
 .sidebar {
-  background: $themecolor;
+  background: $bgcolor-theme;
 }
 
 .rbt-menu {
@@ -124,7 +124,7 @@ body:not(.on-edit) .nav.nav-tabs {
   border-color: #bd3425;
   .panel-heading {
     color: white;
-    background-color: $themecolor;
+    background-color: $bgcolor-theme;
     background-image: url('/images/themes/christmas/christmas-navbar.jpg');
   }
 }

src/client/styles/agile-admin/inverse/colors/default-dark.scss

@@ -1,29 +1,29 @@
 @import '../variables';
 
-$basecolor:#212731;
-$themecolor:#f75b36;
+$basecolor: #212731;
+$bgcolor-theme: #f75b36;
 
-$topbar: #151515;
-$sidebar: #101010;
-$bodycolor:$basecolor;
-$headingtext: lighten($basecolor, 45%);
-$bodytext: lighten($basecolor, 35%);
+$bgcolor-navbar: #151515;
+$bgcolor-global: #101010;
+$bgcolor-global: $basecolor;
+$color-header: lighten($basecolor, 45%);
+$color-global: lighten($basecolor, 35%);
 $linktext: lighten($basecolor, 45%);
 $linktext-hover: lighten($linktext, 10%);
-$sidebar-text:#a6acbc;
-$dark-themecolor:#4F5467;
+$sidebar-text: #a6acbc;
+$dark-themecolor: #4f5467;
 
-$primary: $themecolor;
-$logo-mark-fill: #444;
-$wikilinktext: saturate($bodytext, 20%);
-$wikilinktext-hover: darken($wikilinktext, 5%);
+$primary: $bgcolor-theme;
+$fillcolor-logo-mark: #444;
+$color-link-wiki: saturate($color-global, 20%);
+$color-link-wiki-hover: darken($color-link-wiki, 5%);
 
-$dark: darken($bodytext, 5%);
+$dark: darken($color-global, 5%);
 $border: lighten($basecolor, 15%);
 $navbar-border: lighten($border, 10%);
 $active-navbar-border: darken($border, 3%);
 $btn-default-bgcolor: darken($basecolor, 10%);
-$inline-code-bg: darken($bodycolor, 5%);
+$inline-code-bg: darken($bgcolor-global, 5%);
 
 @import 'apply-colors';
 @import 'apply-colors-dark';

src/client/styles/agile-admin/inverse/colors/default.scss

@@ -1,21 +1,21 @@
 @import '../variables';
 
-$themecolor:#112744;
+$bgcolor-theme: #112744;
 
-$topbar:#334455;
-$sidebar:#fff;
-$bodycolor:#fff;
-$headingtext: #2b2b2b;
-$bodytext: #333333;
-$linktext: lighten($themecolor, 20%);
+$bgcolor-navbar: #334455;
+$bgcolor-global: #fff;
+$bgcolor-global: #fff;
+$color-header: #2b2b2b;
+$color-global: #333333;
+$linktext: lighten($bgcolor-theme, 20%);
 $linktext-hover: lighten($linktext, 20%);
-$sidebar-text:#38495a;
+$sidebar-text: #38495a;
 
-$primary: $themecolor;
+$primary: $bgcolor-theme;
 
-$logo-mark-fill: lighten(desaturate($topbar, 10%), 15%);
-$wikilinktext: lighten($themecolor, 20%);
-$wikilinktext-hover: lighten($wikilinktext, 20%);
+$fillcolor-logo-mark: lighten(desaturate($bgcolor-navbar, 10%), 15%);
+$color-link-wiki: lighten($bgcolor-theme, 20%);
+$color-link-wiki-hover: lighten($color-link-wiki, 20%);
 
 @import 'apply-colors';
 @import 'apply-colors-light';

src/client/styles/agile-admin/inverse/colors/future.scss

@@ -1,31 +1,31 @@
 @import '../variables';
 
 $basecolor: #16282d;
-$themecolor: rgba(11, 79, 104, 0.616);
+$bgcolor-theme: rgba(11, 79, 104, 0.616);
 
-$topbar: #011414;
-$sidebar: #fff;
-$bodycolor: $basecolor;
-$headingtext: #d9a364;
-$bodytext: lighten($basecolor, 35%);
+$bgcolor-navbar: #011414;
+$bgcolor-global: #fff;
+$bgcolor-global: $basecolor;
+$color-header: #d9a364;
+$color-global: lighten($basecolor, 35%);
 $linktext: lighten($basecolor, 45%);
 $linktext-hover: lighten($linktext, 80%);
 $sidebar-text: rgb(65, 133, 124);
 $dark-themecolor: #4f5467;
 
-$primary: $themecolor;
-$info: lighten($themecolor, 20%);
+$primary: $bgcolor-theme;
+$info: lighten($bgcolor-theme, 20%);
 
-$logo-mark-fill: rgb(170, 245, 237);
-$wikilinktext: saturate($bodytext, 20%);
-$wikilinktext-hover: darken($wikilinktext, 5%);
+$fillcolor-logo-mark: rgb(170, 245, 237);
+$color-link-wiki: saturate($color-global, 20%);
+$color-link-wiki-hover: darken($color-link-wiki, 5%);
 
-$dark: darken($bodytext, 5%);
+$dark: darken($color-global, 5%);
 $border: lighten($basecolor, 15%);
 $navbar-border: lighten($border, 10%);
 $active-navbar-border: darken($border, 3%);
 $btn-default-bgcolor: darken($basecolor, 10%);
-$inline-code-bg: darken($bodycolor, 5%);
+$inline-code-bg: darken($bgcolor-global, 5%);
 
 @import 'apply-colors';
 @import 'apply-colors-dark';

src/client/styles/agile-admin/inverse/colors/halloween.scss

@@ -1,25 +1,25 @@
 @import '../variables';
 
 $basecolor: #0a010a;
-$themecolor: #aa4a04;
+$bgcolor-theme: #aa4a04;
 $subthemecolor: #e9af2b;
 $linkcolor: #aa4a04;
-$topbar: $themecolor;
-$sidebar: #061f2f;
+$bgcolor-navbar: $bgcolor-theme;
+$bgcolor-global: #061f2f;
 $subthemecolor: #e9af2b;
-$bodycolor: #0f0101;
-$headingtext: #e9af2b;
-$bodytext: #e9af2b;
+$bgcolor-global: #0f0101;
+$color-header: #e9af2b;
+$color-global: #e9af2b;
 $linktext: $linkcolor;
 $linktext-hover: rgba($linktext, 0.8);
-$sidebar-text: $themecolor;
+$sidebar-text: $bgcolor-theme;
 $dark-themecolor: #4f5467;
-$primary: $themecolor;
-$logo-mark-fill: lighten($subthemecolor, 20%);
-$wikilinktext: $linkcolor;
-$wikilinktext-hover: rgba($linktext, 0.8);
-$dark: darken($bodytext, 5%);
-$border: $themecolor;
+$primary: $bgcolor-theme;
+$fillcolor-logo-mark: lighten($subthemecolor, 20%);
+$color-link-wiki: $linkcolor;
+$color-link-wiki-hover: rgba($linktext, 0.8);
+$dark: darken($color-global, 5%);
+$border: $bgcolor-theme;
 $navbar-border: lighten($basecolor, 25%);
 $active-navbar-border: darken($navbar-border, 3%);
 $active-nav-tabs-bgcolor: #231313;
@@ -32,7 +32,7 @@ $inline-code-bg: #0a121b;
 
 .wiki {
   .highlighted {
-    background-color: lighten($themecolor, 20%);
+    background-color: lighten($bgcolor-theme, 20%);
   }
 }
 
@@ -41,11 +41,11 @@ $inline-code-bg: #0a121b;
   &.panel-white,
   &.panel-default {
     background-color: lighten($basecolor, 5%);
-    border-color: $bodytext;
+    border-color: $color-global;
 
     .panel-heading {
       color: $basecolor;
-      background-color: 1px solid $bodytext;
+      background-color: 1px solid $color-global;
     }
   }
 }

src/client/styles/agile-admin/inverse/colors/island.scss

@@ -1,29 +1,29 @@
 @import '../variables';
 
-$themecolor: #0c2a44;
+$bgcolor-theme: #0c2a44;
 $themelight: rgba(183, 226, 219, 1);
 
 $subthemecolor: rgba($linktext, 0.8);
 $linkcolor: #3c6d72;
-$themecolor: #97cbc3;
-$topbar: #0c2a44;
-$sidebar: $themelight;
-$bodycolor: lighten($themelight, 10%);
-$headingtext: #3c6d72;
-$bodytext: #3c6d72;
+$bgcolor-theme: #97cbc3;
+$bgcolor-navbar: #0c2a44;
+$bgcolor-global: $themelight;
+$bgcolor-global: lighten($themelight, 10%);
+$color-header: #3c6d72;
+$color-global: #3c6d72;
 $linktext: $linkcolor;
 $linktext-hover: rgba($linktext, 0.8);
-$sidebar-text: $themecolor;
-$primary: $themecolor;
-$logo-mark-fill: lighten($themelight, 10%);
-$wikilinktext: $linkcolor;
-$wikilinktext-hover: rgba($linktext, 0.8);
-$dark: darken($bodytext, 5%);
+$sidebar-text: $bgcolor-theme;
+$primary: $bgcolor-theme;
+$fillcolor-logo-mark: lighten($themelight, 10%);
+$color-link-wiki: $linkcolor;
+$color-link-wiki-hover: rgba($linktext, 0.8);
+$dark: darken($color-global, 5%);
 $border: #76b1a8;
 $navbar-border: #76b1a8;
 $active-navbar-border: darken($navbar-border, 13%);
 $active-nav-tabs-bgcolor: #dbf0ed;
-$btn-default-bgcolor: darken($themecolor, 10%);
+$btn-default-bgcolor: darken($bgcolor-theme, 10%);
 $inline-code-color: #8f5313;
 $inline-code-bg: darken($themelight, 3%);
 
@@ -32,7 +32,7 @@ $inline-code-bg: darken($themelight, 3%);
 
 .wiki {
   .highlighted {
-    background-color: lighten($themecolor, 20%);
+    background-color: lighten($bgcolor-theme, 20%);
   }
 }
 
@@ -40,19 +40,19 @@ $inline-code-bg: darken($themelight, 3%);
   &,
   &.panel-white,
   &.panel-default {
-    color: $themecolor;
-    background-color: lighten($themecolor, 30%);
+    color: $bgcolor-theme;
+    background-color: lighten($bgcolor-theme, 30%);
     border-color: white;
 
     .panel-heading {
-      color: $themecolor;
+      color: $bgcolor-theme;
       background-color: white;
     }
 
     ul {
       li {
         a {
-          color: darken($themecolor, 15%);
+          color: darken($bgcolor-theme, 15%);
         }
       }
     }

src/client/styles/agile-admin/inverse/colors/kibela.scss

@@ -2,42 +2,41 @@
 
 $radius: 3px;
 
-$themecolor: rgb(18, 86, 163);
-$themelight: #F4F5F6;
+$bgcolor-theme: rgb(18, 86, 163);
+$themelight: #f4f5f6;
 $subthemecolor: rgb(90, 149, 216);
 
+$bgcolor-navbar: $bgcolor-theme;
+$bgcolor-global: $themelight;
+$bgcolor-global: $themelight;
 
-$topbar: $themecolor;
-$sidebar: $themelight;
-$bodycolor: $themelight;
-
-$headingtext: $themecolor;
-$bodytext: #3c4a60;
-$linktext: rgb(74,109,204);
+$color-header: $bgcolor-theme;
+$color-global: #3c4a60;
+$linktext: rgb(74, 109, 204);
 $linktext-hover: lighten($linktext, 12%);
-$sidebar-text: $themecolor;
+$sidebar-text: $bgcolor-theme;
 
-$primary: $themecolor;
-$info: lighten($themecolor,20%);
+$primary: $bgcolor-theme;
+$info: lighten($bgcolor-theme, 20%);
 
-$logo-mark-fill: lighten($themecolor, 20%);
-$wikilinktext: lighten($themecolor, 20%);
-$wikilinktext-hover: lighten($wikilinktext, 20%);
+$fillcolor-logo-mark: lighten($bgcolor-theme, 20%);
+$color-link-wiki: lighten($bgcolor-theme, 20%);
+$color-link-wiki-hover: lighten($color-link-wiki, 20%);
 $inline-code-color: $subthemecolor;
-$inline-code-bg: lighten($subthemecolor,70%);
+$inline-code-bg: lighten($subthemecolor, 70%);
 $border: rgba(181, 203, 247, 0.61);
 
 @import 'apply-colors';
 @import 'apply-colors-light';
 
-
 // change color of highlighted header in wiki (default: orange)
 .wiki {
   .code-line.revision-head.highlighted {
-    background-color: lighten($themecolor,20%);
     color: $themelight;
+    background-color: lighten($bgcolor-theme, 20%);
 
-    .icon-note, .icon-link {
+    .icon-note,
+    .icon-link {
       color: $themelight;
     }
   }

src/client/styles/agile-admin/inverse/colors/mono-blue.scss

@@ -1,40 +1,39 @@
 @import '../variables';
 
-$themecolor: #00587A;
-$themelight: #F7FBFD;
+$bgcolor-theme: #00587a;
+$themelight: #f7fbfd;
 $subthemecolor: #186718;
 
+$bgcolor-navbar: $bgcolor-theme;
+$bgcolor-global: $themelight;
+$bgcolor-global: $themelight;
 
-$topbar: $themecolor;
-$sidebar: $themelight;
-$bodycolor: $themelight;
-
-$headingtext: $themecolor;
-$bodytext: $themecolor;
-$linktext: lighten($themecolor,5%);
+$color-header: $bgcolor-theme;
+$color-global: $bgcolor-theme;
+$linktext: lighten($bgcolor-theme, 5%);
 $linktext-hover: lighten($linktext, 12%);
-$sidebar-text: $themecolor;
+$sidebar-text: $bgcolor-theme;
 
-$primary: $themecolor;
-$info: lighten($themecolor,20%);
+$primary: $bgcolor-theme;
+$info: lighten($bgcolor-theme, 20%);
 
-$logo-mark-fill: lighten(desaturate($topbar, 30%), 20%);
-$wikilinktext: lighten($themecolor, 20%);
-$wikilinktext-hover: lighten($wikilinktext, 20%);
+$fillcolor-logo-mark: lighten(desaturate($bgcolor-navbar, 30%), 20%);
+$color-link-wiki: lighten($bgcolor-theme, 20%);
+$color-link-wiki-hover: lighten($color-link-wiki, 20%);
 $inline-code-color: $subthemecolor;
-$inline-code-bg: lighten($subthemecolor,70%);
+$inline-code-bg: lighten($subthemecolor, 70%);
 
 @import 'apply-colors';
 @import 'apply-colors-light';
 
-
 // change color of highlighted header in wiki (default: orange)
 .wiki {
   .code-line.revision-head.highlighted {
-    background-color: lighten($themecolor,20%);
     color: $themelight;
+    background-color: lighten($bgcolor-theme, 20%);
 
-    .icon-note, .icon-link {
+    .icon-note,
+    .icon-link {
       color: $themelight;
     }
   }

src/client/styles/agile-admin/inverse/colors/nature.scss

@@ -1,22 +1,22 @@
 @import '../variables';
 
-$themecolor:#460039;
+$bgcolor-theme: #460039;
 
-$topbar:#118050;;
-$sidebar:#fff;
-$bodycolor:#fefffd;
+$bgcolor-navbar: #118050;
+$bgcolor-global: #fff;
+$bgcolor-global: #fefffd;
 
-$headingtext: #46694e;
-$bodytext: #333333;
-$linktext: lighten($themecolor,5%);
+$color-header: #46694e;
+$color-global: #333333;
+$linktext: lighten($bgcolor-theme, 5%);
 $linktext-hover: lighten($linktext, 12%);
-$sidebar-text:#5c7253;
+$sidebar-text: #5c7253;
 
-$primary: $themecolor;
+$primary: $bgcolor-theme;
 
-$logo-mark-fill: lighten(desaturate($topbar, 30%), 20%);
-$wikilinktext: lighten($themecolor, 20%);
-$wikilinktext-hover: lighten($wikilinktext, 20%);
+$fillcolor-logo-mark: lighten(desaturate($bgcolor-navbar, 30%), 20%);
+$color-link-wiki: lighten($bgcolor-theme, 20%);
+$color-link-wiki-hover: lighten($color-link-wiki, 20%);
 
 @import 'apply-colors';
 @import 'apply-colors-light';

src/client/styles/agile-admin/inverse/colors/wood.scss

@@ -1,22 +1,22 @@
 @import '../variables';
 
-$themecolor: #aaa45f;
+$bgcolor-theme: #aaa45f;
 $themelight: #f5f3ee;
 $subthemecolor: #dddebf;
-$topbar: $themecolor;
-$sidebar: $themelight;
-$bodycolor: $themelight;
-$headingtext: #577254;
-$bodytext: #7c7a70;
+$bgcolor-navbar: $bgcolor-theme;
+$bgcolor-global: $themelight;
+$bgcolor-global: $themelight;
+$color-header: #577254;
+$color-global: #7c7a70;
 $linktext: lighten(#6d8969, 5%);
 $linktext-hover: lighten($linktext, 12%);
 $sidebar-text: #859083;
-$primary: $themecolor;
-$info: lighten($themecolor, 10%);
-$logo-mark-fill: lighten(desaturate($topbar, 50%), 50%);
-$wikilinktext: lighten($themecolor, 5%);
-$wikilinktext-hover: lighten($wikilinktext, 15%);
-$inline-code-color: darken($themecolor, 20%);
+$primary: $bgcolor-theme;
+$info: lighten($bgcolor-theme, 10%);
+$fillcolor-logo-mark: lighten(desaturate($bgcolor-navbar, 50%), 50%);
+$color-link-wiki: lighten($bgcolor-theme, 5%);
+$color-link-wiki-hover: lighten($color-link-wiki, 15%);
+$inline-code-color: darken($bgcolor-theme, 20%);
 $inline-code-bg: lighten($subthemecolor, 70%);
 $active-nav-tabs-bgcolor: #fffffc;
 
@@ -27,7 +27,7 @@ $active-nav-tabs-bgcolor: #fffffc;
 .wiki {
   .code-line.revision-head.highlighted {
     color: $themelight;
-    background-color: lighten($themecolor, 20%);
+    background-color: lighten($bgcolor-theme, 20%);
 
     .icon-note,
     .icon-link {
@@ -84,7 +84,7 @@ body:not(.on-edit) .nav.nav-tabs {
       background-color: rgba(#ccc, 0.5);
     }
     .link-switch {
-      color: $bodytext;
+      color: $color-global;
     }
   }
 }

src/client/styles/scss/theme/_apply-colors-dark.scss

@@ -15,7 +15,7 @@
   &.active:hover,
   &.active:focus {
     color: white;
-    background-color: lighten($bodycolor, 5%);
+    background-color: lighten($bgcolor-global, 5%);
   }
 }
 
@@ -24,20 +24,20 @@
   */
 input.form-control,
 textarea.form-control {
-  color: lighten($bodytext, 30%);
-  background-color: darken($bodycolor, 5%);
+  color: lighten($color-global, 30%);
+  background-color: darken($bgcolor-global, 5%);
   border: 1px solid darken($border, 30%);
 }
 
 .form-control[disabled],
 .form-control[readonly] {
-  color: lighten($bodytext, 10%);
-  background-color: lighten($bodycolor, 5%);
+  color: lighten($color-global, 10%);
+  background-color: lighten($bgcolor-global, 5%);
 }
 
 .input-group .input-group-addon {
   color: $dark;
-  background-color: rgba($topbar, 0.4);
+  background-color: rgba($bgcolor-navbar, 0.4);
   border: 1px solid darken($border, 30%);
   border-right: none;
 }
@@ -46,9 +46,9 @@ textarea.form-control {
  * Dropdown
  */
 .dropdown-menu {
-  background-color: $bodycolor;
+  background-color: $bgcolor-global;
   > li > a {
-    color: $bodytext;
+    color: $color-global;
   }
 
   .divider {
@@ -125,10 +125,10 @@ header.affix {
   .page-list-ul {
     > li {
       > a strong {
-        color: lighten($bodytext, 25%);
+        color: lighten($color-global, 25%);
       }
       > span.page-list-meta {
-        color: $bodytext;
+        color: $color-global;
       }
     }
   }
@@ -173,8 +173,8 @@ legend {
 .admin-page {
   #themeOptions {
     .theme-option-container.active a {
-      background-color: darken($themecolor, 15%);
-      border-color: darken($themecolor, 15%);
+      background-color: darken($bgcolor-theme, 15%);
+      border-color: darken($bgcolor-theme, 15%);
     }
   }
 }

src/client/styles/scss/theme/_apply-colors-light.scss

@@ -1,7 +1,7 @@
 .logo {
   .logo-mark,
   .logo-text {
-    fill: $themecolor;
+    fill: $bgcolor-theme;
   }
 }
 
@@ -9,13 +9,13 @@
  * Form
  */
 .form-control {
-  background-color: $bodycolor;
+  background-color: $bgcolor-global;
 }
 
 .form-control[disabled],
 .form-control[readonly] {
-  color: lighten($bodytext, 10%);
-  background-color: darken($bodycolor, 5%);
+  color: lighten($color-global, 10%);
+  background-color: darken($bgcolor-global, 5%);
 }
 
 /*
@@ -23,7 +23,7 @@
  */
 header.affix {
   .logo-mark {
-    fill: $themecolor;
+    fill: $bgcolor-theme;
   }
 }
 
@@ -32,10 +32,10 @@ header.affix {
  */
 .search-top {
   .btn-group-dropdown-scope .dropdown-toggle {
-    background-color: rgba($bodycolor, 0.8);
+    background-color: rgba($bgcolor-global, 0.8);
   }
   .rbt-input.form-control {
-    background-color: rgba($bodycolor, 0.9);
+    background-color: rgba($bgcolor-global, 0.9);
   }
 }
 
@@ -46,10 +46,10 @@ header.affix {
   .page-list-ul {
     > li {
       > a strong {
-        color: darken($bodytext, 20%);
+        color: darken($color-global, 20%);
       }
       > span.page-list-meta {
-        color: lighten($bodytext, 10%);
+        color: lighten($color-global, 10%);
       }
     }
   }
@@ -79,8 +79,8 @@ header.affix {
 .admin-page {
   #themeOptions {
     .theme-option-container.active a {
-      background-color: lighten($themecolor, 20%);
-      border-color: lighten($themecolor, 20%);
+      background-color: lighten($bgcolor-theme, 20%);
+      border-color: lighten($bgcolor-theme, 20%);
     }
   }
 }

src/client/styles/scss/theme/_apply-colors.scss

@@ -1,69 +1,41 @@
 body {
-  background: $sidebar;
-}
-
-/*Top Header Part*/
-
-.logo i {
-  color: white;
+  background: $bgcolor-global;
 }
 
 .logo {
-  background-color: $sidebar;
-}
-// when sidebar is hidden
-.content-wrapper {
-  .logo {
-    // set transition for fill
-    svg * {
-      transition: fill 0.8s ease-out;
-    }
+  // set transition for fill
+  svg * {
+    transition: fill 0.8s ease-out;
+  }
 
-    background-color: darken($topbar, 10%);
+  background-color: darken($bgcolor-navbar, 10%);
 
-    .logo {
-      .logo-mark {
-        svg {
-          fill: $logo-mark-fill;
+  .logo-mark {
+    svg {
+      fill: $fillcolor-logo-mark;
 
-          &:hover {
-            .group1 {
-              fill: $growi-green;
-            }
-            .group2 {
-              fill: $growi-blue;
-            }
-          }
+      &:hover {
+        .group1 {
+          fill: $growi-green;
+        }
+        .group2 {
+          fill: $growi-blue;
         }
       }
     }
   }
 }
 
-.navbar-header {
-  background: $topbar;
+.navbar.bg-dark {
+  background: $bgcolor-navbar;
 }
 
-.navbar-top-links > li > a {
+.navbar.navbar-dark .nav-link {
   color: white;
 }
 
-.navbar-top-links .confidential {
-  background-color: darken($topbar, 10%);
-}
-
-/*Right panel*/
-.right-sidebar .rpanel-title {
-  background: $themecolor;
-}
-
-/*Bread Crumb*/
-.bg-title .breadcrumb .active {
-  color: $themecolor;
-}
-
-.bg-title {
-  background: darken($bodycolor, 2%);
+.grw-title-bar {
+  background: darken($bgcolor-global, 2%);
 }
 
 /*
@@ -78,7 +50,7 @@ body {
  * Legend
  */
 legend {
-  color: $headingtext;
+  color: $color-header;
 }
 
 /*
@@ -105,7 +77,7 @@ legend {
     }
   }
   .modal-content {
-    background-color: $bodycolor;
+    background-color: $bgcolor-global;
   }
   .modal-footer {
     border-top-color: $border;
@@ -117,7 +89,7 @@ legend {
  */
 .panel {
   .panel-body {
-    background-color: $bodycolor;
+    background-color: $bgcolor-global;
   }
 }
 
@@ -125,14 +97,14 @@ legend {
  * Wells
  */
 .well {
-  background-color: darken($bodycolor, 5%);
+  background-color: darken($bgcolor-global, 5%);
   border-color: $border;
 }
 
 /*
  * Tabs
  */
-$active-nav-tabs-bgcolor: $bodycolor !default;
+$active-nav-tabs-bgcolor: $bgcolor-global !default;
 
 /*
 .nav.nav-tabs {
@@ -186,10 +158,10 @@ $active-nav-tabs-bgcolor: $bodycolor !default;
  * Crowi sidebar
  */
 .crowi-sidebar {
-  background-color: darken($bodycolor, 4%);
+  background-color: darken($bgcolor-global, 4%);
   border-left: solid 1px $border;
   .system-version {
-    background-color: darken($bodycolor, 4%);
+    background-color: darken($bgcolor-global, 4%);
   }
 }
 
@@ -198,19 +170,19 @@ $active-nav-tabs-bgcolor: $bodycolor !default;
  */
 .wiki {
   a {
-    color: $wikilinktext;
+    color: $color-link-wiki;
     &:hover {
-      color: $wikilinktext-hover;
+      color: $color-link-wiki-hover;
     }
   }
 
   // table with handsontable modal button
   .editable-with-handsontable {
     button {
-      color: $wikilinktext;
+      color: $color-link-wiki;
     }
     button:hover {
-      color: $wikilinktext-hover;
+      color: $color-link-wiki-hover;
     }
   }
 }
@@ -219,7 +191,7 @@ $active-nav-tabs-bgcolor: $bodycolor !default;
  * GROWI header
  */
 header.affix {
-  background: rgba(darken($bodycolor, 2%), 0.9);
+  background: rgba(darken($bgcolor-global, 2%), 0.9);
 }
 
 /*
@@ -227,7 +199,7 @@ header.affix {
  */
 body.on-edit {
   .main {
-    background-color: darken($bodycolor, 2%);
+    background-color: darken($bgcolor-global, 2%);
 
     .page-editor-editor-container {
       border-right-color: $navbar-border;
@@ -237,7 +209,7 @@ body.on-edit {
       }
     }
     .page-editor-preview-container {
-      background-color: $bodycolor;
+      background-color: $bgcolor-global;
     }
 
     .page-editor-footer {
@@ -255,15 +227,15 @@ body.on-edit {
   }
   .page-comment .page-comment-main,
   .page-comment-form .comment-form-main {
-    background-color: darken($bodycolor, 4%);
+    background-color: darken($bgcolor-global, 4%);
     &:before {
-      border-right-color: darken($bodycolor, 4%);
+      border-right-color: darken($bgcolor-global, 4%);
     }
     .nav.nav-tabs {
       > li.active > a {
         background: transparent;
-        border-bottom: solid 1px darken($bodycolor, 4%);
-        border-bottom-color: darken($bodycolor, 4%);
+        border-bottom: solid 1px darken($bgcolor-global, 4%);
+        border-bottom-color: darken($bgcolor-global, 4%);
       }
     }
   }
@@ -280,11 +252,11 @@ body.on-edit {
           background-color: transparent;
         }
         li:hover {
-          background-color: darken($bodycolor, 4%);
+          background-color: darken($bgcolor-global, 4%);
         }
         li.active {
-          background-color: darken($bodycolor, 8%);
-          border-color: $themecolor;
+          background-color: darken($bgcolor-global, 8%);
+          border-color: $bgcolor-theme;
         }
       }
     }
@@ -295,7 +267,7 @@ body.on-edit {
  * GROWI page attachments
  */
 .page-attachments-row {
-  background-color: darken($bodycolor, 2%);
+  background-color: darken($bgcolor-global, 2%);
   border-top-color: $border;
 }
 
@@ -306,7 +278,7 @@ body.on-edit {
   #themeOptions {
     .theme-option-container.active {
       .theme-option-name {
-        color: $bodytext;
+        color: $color-global;
       }
     }
   }

src/client/styles/scss/theme/_variables-default.scss

@@ -0,0 +1,6 @@
+// default colors
+$border: #f0f0f0 !default;
+$navbar-border: #ccc !default;
+$active-navbar-border: lighten($navbar-border, 10%) !default;
+$inline-code-color: #c7254e !default;
+$inline-code-bg: #f9f2f4 !default;

src/client/styles/scss/theme/_variables.scss

@@ -1,10 +1,3 @@
 // GROWI Official Color
 $growi-green: #74bc46;
 $growi-blue: #175fa5;
-
-// default colors
-$border: #f0f0f0 !default;
-$navbar-border: #ccc !default;
-$active-navbar-border: lighten($navbar-border, 10%) !default;
-$inline-code-color: #c7254e !default;
-$inline-code-bg: #f9f2f4 !default;

src/client/styles/scss/theme/default.scss

@@ -1,22 +1,21 @@
+@import 'variables';
 @import '../override-bootstrap';
 
-$themecolor: #112744;
+$bgcolor-global: white;
+$bgcolor-theme: #112744;
+$bgcolor-navbar: #334455;
 
-$topbar: #334455;
-$sidebar: #fff;
-$bodycolor: #fff;
-$headingtext: #2b2b2b;
-$bodytext: #333333;
-$linktext: lighten($themecolor, 20%);
-$linktext-hover: lighten($linktext, 20%);
-$sidebar-text: #38495a;
+$color-global: #333333;
+$color-header: #2b2b2b;
+$color-link: lighten($bgcolor-theme, 20%);
+$color-link-hover: lighten($color-link, 20%);
 
-$primary: $themecolor;
+$primary: $bgcolor-theme;
 
-$logo-mark-fill: lighten(desaturate($topbar, 10%), 15%);
-$wikilinktext: lighten($themecolor, 20%);
-$wikilinktext-hover: lighten($wikilinktext, 20%);
+$fillcolor-logo-mark: lighten(desaturate($bgcolor-navbar, 10%), 15%);
+$color-link-wiki: lighten($bgcolor-theme, 20%);
+$color-link-wiki-hover: lighten($color-link-wiki, 20%);
 
-@import 'variables';
+@import 'variables-default';
 @import 'apply-colors';
 @import 'apply-colors-light';