organize scss

src/client/styles/scss/_variables-bootstrap.scss

@@ -3,13 +3,9 @@
 // --------------------------------------------------
 
 //== Colors
-$theme-colors: (
-  'primary': $grw-primary,
-  'success': $grw-success,
-  'info': $grw-info,
-  'warning': $grw-warning,
-  'danger': $grw-danger
-);
+//
+//## DO NOT override `$theme-colors` here.
+//## see _variables.scss, theme/_override-bootstrap-themes.scss and each theme files
 
 //== Typography
 //
@@ -37,31 +33,31 @@ $btn-border-radius: 0;
 $btn-border-radius-lg: 0;
 $btn-border-radius-sm: 0;
 
-// Forms
+//== Forms
 
 $input-border-radius: 0;
 $input-border-radius-lg: 0;
 $input-border-radius-sm: 0;
 
-// Navs
+//== Navs
 
 $nav-link-padding-y: 0.75rem;
 $nav-link-padding-x: 1rem;
 $nav-tabs-border-radius: 0;
 
-// Navbar
+//== Navbar
 $navbar-padding-y: 0;
 $navbar-brand-padding-y: 0;
 $navbar-nav-link-padding-x: 1rem;
 
-// Dropdowns
+//== Dropdowns
 $dropdown-border-radius: 0;
 
-// Modals
+//== Modals
 $modal-content-border-width: 0;
 $modal-content-border-radius: 0;
 $modal-header-padding-y: 0.75rem;
 $modal-header-padding-x: 1rem;
 
-// Alerts
+//== Alerts
 $alert-border-radius: 0;

src/client/styles/scss/_variables.scss

@@ -1,16 +1,19 @@
-// GROWI Official Color
+//== GROWI Official Color
 $growi-green: #74bc46;
 $growi-blue: #175fa5;
 
+//== Colors
 $grw-primary: #112744;
 $grw-info: #0d8ea5;
 $grw-success: #00bb83;
 $grw-warning: #ee773b;
 $grw-danger: #ff0a54;
+$grw-light: #dee2e6;
+$grw-dark: #343a40;
 
 $font-family-monospace-not-strictly: Monaco, Menlo, Consolas, 'Courier New', MeiryoKe_Gothic, monospace;
 
-// Layout
+//== Layout
 $grw-navbar-height: 50px;
 $grw-logo-width: 60px;
 $grw-logomark-width: 32px;

src/client/styles/scss/style-app.scss

@@ -9,6 +9,7 @@
 @import 'vendor';
 
 // override bootstrap
+@import 'theme/override-bootstrap-themes';
 @import 'override-bootstrap';
 
 // override react-bootstrap-typeahead styles

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

@@ -1,7 +1,17 @@
-/*===
- * Apply to Bootstrap
- */
-@import '~bootstrap/scss/bootstrap-reboot';
+//== Apply to Bootstrap
+//
+@import '~bootstrap/scss/functions';
+@import '~bootstrap/scss/variables';
+@import '~bootstrap/scss/mixins';
+
+// override bootstrap variables
+$link-color: $color-link;
+$link-hover-color: $color-link-hover;
+
+@import 'override-bootstrap-themes';
+
+@import '~bootstrap/scss/reboot';
+
 @each $color, $value in $theme-colors {
   @include bg-variant('.bg-#{$color}', $value);
 }
@@ -47,9 +57,9 @@
 //   @include list-group-item-variant($color, color-level($value, -9), color-level($value, 6));
 // }
 
-/*===
- * Apply to GROWI Elements
- */
+//== Apply to GROWI Elements
+//
+
 body {
   background: $bgcolor-global;
 }
@@ -304,7 +314,7 @@ body.on-edit {
         }
         li.active {
           background-color: darken($bgcolor-global, 8%);
-          border-color: $bgcolor-theme;
+          border-color: theme-color('primary');
         }
       }
     }

src/client/styles/scss/theme/_override-bootstrap-themes.scss

@@ -0,0 +1,10 @@
+// use $grw-* colors
+$theme-colors: (
+  'primary': $grw-primary,
+  'success': $grw-success,
+  'info': $grw-info,
+  'warning': $grw-warning,
+  'danger': $grw-danger,
+  'light': $grw-light,
+  'dark': $grw-dark
+);

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

@@ -1,21 +1,28 @@
 @import '../variables';
 
-/*===
- * Define colors
- */
+// == Define colors
+//
+
+// colors for overriding bootstrap $theme-colors
+$grw-primary: #112744;
+// $grw-info: #;
+// $grw-success: #;
+// $grw-warning: #;
+// $grw-danger: #;
+// $grw-light: #;
+// $grw-dark: #;
 
 // Background colors
 $bgcolor-global: white;
-$bgcolor-theme: #112744;
 $bgcolor-navbar: #334455;
 $bgcolor-inline-code: #f9f2f4;
 
 // Font colors
 $color-global: #333333;
 $color-header: #2b2b2b;
-$color-link: lighten($bgcolor-theme, 20%);
+$color-link: lighten($grw-primary, 20%);
 $color-link-hover: lighten($color-link, 20%);
-$color-link-wiki: lighten($bgcolor-theme, 20%);
+$color-link-wiki: lighten($grw-primary, 20%);
 $color-link-wiki-hover: lighten($color-link-wiki, 20%);
 $color-inline-code: #c7254e;
 
@@ -27,18 +34,22 @@ $border: #f0f0f0;
 $navbar-border: #ccc;
 $active-navbar-border: lighten($navbar-border, 10%);
 
-// override Bootstrap 4 theme colors
-$theme-colors: (
-  'primary': $bgcolor-theme,
-);
+// light mode colors
+@media (prefers-color-scheme: no-preference), (prefers-color-scheme: light) {
+  $grw-secondary: #ccc;
+}
+
+// dark mode colors
+@media (prefers-color-scheme: dark) {
+}
+
+//== Apply
+//
 
-// apply
 @import 'apply-colors';
+
 // apply for no-preference or light mode
 @media (prefers-color-scheme: no-preference), (prefers-color-scheme: light) {
-  $theme-colors: (
-    'secondary': #ddd,
-  );
   @import 'apply-colors-light';
 }
 // apply for dark mode