apply colors appropriately according to the schema

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

@@ -26,7 +26,8 @@ input.form-control,
 textarea.form-control {
   color: lighten($color-global, 30%);
   background-color: darken($bgcolor-global, 5%);
-  border: 1px solid darken($border, 30%);
+  // FIXME: accent color
+  // border: 1px solid darken($border, 30%);
 }
 
 .form-control[disabled],
@@ -38,7 +39,8 @@ textarea.form-control {
 .input-group .input-group-addon {
   color: theme-color('dark');
   background-color: rgba($bgcolor-navbar, 0.4);
-  border: 1px solid darken($border, 30%);
+  // FIXME: accent color
+  // border: 1px solid darken($border, 30%);
   border-right: none;
 }
 
@@ -52,7 +54,8 @@ textarea.form-control {
   }
 
   .divider {
-    background-color: $border;
+    // FIXME:
+    // background-color: $border-color;
   }
 }
 
@@ -89,7 +92,8 @@ textarea.form-control {
 .table > tfoot > tr > td,
 .table > thead > tr > th,
 .table-bordered {
-  border-top: 1px solid $border;
+  // FIXME: use $table-dark-*
+  // border-top: 1px solid $border;
 }
 
 .table-bordered > thead > tr > th,
@@ -98,15 +102,18 @@ textarea.form-control {
 .table-bordered > thead > tr > td,
 .table-bordered > tbody > tr > td,
 .table-bordered > tfoot > tr > td {
-  border: 1px solid $border;
+  // FIXME: use $table-dark-*
+  // border: 1px solid $border;
 }
 
 .table > thead > tr > th {
-  border-bottom: 1px solid $border;
+  // FIXME: use $table-dark-*
+  // border-bottom: 1px solid $border;
 }
 
 .table-bordered {
-  border: 1px solid $border;
+  // FIXME: use $table-dark-*
+  // border: 1px solid $border;
 }
 
 /*
@@ -140,7 +147,8 @@ header.affix {
 .search-page {
   .input-group-btn {
     .btn-light {
-      border: 1px solid darken($border, 30%); // fit to input.form-control
+      // FIXME:
+      // border: 1px solid darken($border, 30%); // fit to input.form-control
     }
   }
 }
@@ -155,15 +163,18 @@ header.affix {
 }
 
 legend {
-  border-color: lighten($border, 10%);
+  // FIXME:
+  // border-color: lighten($border, 10%);
 }
 
 .wiki {
   h1 {
-    border-color: lighten($border, 10%);
+    // FIXME:
+    // border-color: lighten($border, 10%);
   }
   h2 {
-    border-color: $border;
+    // FIXME:
+    // border-color: $border;
   }
 }
 

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

@@ -59,10 +59,12 @@ header.affix {
 
 .wiki {
   h1 {
-    border-color: darken($border, 10%);
+    // FIXME: accent color
+    // border-color: darken($border, 10%);
   }
   h2 {
-    border-color: $border;
+    // FIXME: accent color
+    // border-color: $border;
   }
 }
 

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

@@ -1,8 +1,6 @@
 //
 //== Apply to Bootstrap
 //
-@import '~bootstrap/scss/bootstrap-reboot';
-
 @each $color, $value in $theme-colors {
   @include bg-variant('.bg-#{$color}', $value);
 }
@@ -22,7 +20,7 @@
 @each $theme-color, $color in $theme-colors {
   .custom-checkbox-#{$theme-color} {
     .custom-control-label::before {
-      border-color: #d7d7d7;
+      border-color: $input-border-color;
       transition: 0.3s ease-in-out;
     }
     .custom-control-input:checked + .custom-control-label::before {
@@ -30,29 +28,29 @@
       border-color: $color;
     }
     .custom-control-input:checked + .custom-control-label::after {
-      color: white;
+      color: $bgcolor-global;
     }
     .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
-      color: white;
+      color: $bgcolor-global;
       background-color: $color;
       border-color: $color;
     }
     .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
-      color: white;
-      background-color: white;
-      border-color: #d7d7d7;
+      color: $bgcolor-global;
+      background-color: $bgcolor-global;
+      border-color: $input-focus-border-color;
     }
   }
 }
 
 @each $theme-color, $color in $theme-colors {
   .alert.alert-#{$theme-color} {
-    color: white;
+    color: $bgcolor-global;
     background: $color;
     border: none;
 
     a:not(.btn) {
-      color: white;
+      color: $bgcolor-global;
 
       &:hover,
       &:focus {
@@ -165,7 +163,8 @@ legend {
  */
 .modal {
   .modal-header {
-    border-bottom-color: $border;
+    // FIXME: accent color
+    // border-bottom-color: $border;
 
     &.bg-primary,
     &.bg-info,
@@ -193,7 +192,8 @@ legend {
   }
 
   .modal-footer {
-    border-top-color: $border;
+    // FIXME: accent color
+    // border-top-color: $border;
   }
 }
 
@@ -236,7 +236,7 @@ legend {
  */
 .crowi-sidebar {
   background-color: darken($bgcolor-global, 4%);
-  border-left: solid 1px $border;
+  border-left: solid 1px $border-color;
 
   .system-version {
     background-color: darken($bgcolor-global, 4%);
@@ -286,7 +286,8 @@ body.on-edit {
 
       .navbar-editor {
         background-color: $bgcolor-global; // same color with active tab
-        border-bottom-color: $border;
+        // FIXME: accent color
+        // border-bottom-color: $border;
       }
     }
 
@@ -295,7 +296,8 @@ body.on-edit {
     }
 
     .page-editor-footer {
-      border-top-color: $border;
+      // FIXME: accent color
+      // border-top-color: $border;
     }
   }
 }
@@ -305,7 +307,8 @@ body.on-edit {
  */
 .growi .main {
   .page-comments-row {
-    border-top-color: $border;
+    // FIXME: accent color
+    // border-top-color: $border;
   }
 
   .page-comment .page-comment-main,
@@ -355,7 +358,8 @@ body.on-edit {
  */
 .page-attachments-row {
   background-color: darken($bgcolor-global, 2%);
-  border-top-color: $border;
+  // FIXME: accent color
+  // border-top-color: $border;
 }
 
 /*

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

@@ -14,7 +14,6 @@ $light: #f0f0f0;
 // $dark: #;
 
 // Background colors
-$bgcolor-global: white;
 $bgcolor-navbar: #334455;
 $bgcolor-inline-code: #f9f2f4;
 $bgcolor-card: #f5f5f5;
@@ -32,7 +31,6 @@ $color-inline-code: #c7254e;
 $fillcolor-logo-mark: lighten(desaturate($bgcolor-navbar, 10%), 15%);
 
 // Border colors
-$border: #f0f0f0;
 $navbar-border: #ccc;
 $active-navbar-border: lighten($navbar-border, 10%);
 
@@ -40,24 +38,19 @@ $active-navbar-border: lighten($navbar-border, 10%);
 $link-color: $color-link;
 $link-hover-color: $color-link-hover;
 
-// light mode colors
-@media (prefers-color-scheme: no-preference),
-  (prefers-color-scheme: light) {}
-
-// dark mode colors
-@media (prefers-color-scheme: dark) {}
-
 //== Apply
 //
-@import 'apply-colors';
 
-// apply for no-preference or light mode
-@media (prefers-color-scheme: no-preference),
-  (prefers-color-scheme: light) {
+@import '~bootstrap/scss/bootstrap-reboot';
+
+html:not([dark]) {
+  $bgcolor-global: white;
+  @import 'apply-colors';
   @import 'apply-colors-light';
 }
 
-// apply for dark mode
-@media (prefers-color-scheme: dark) {
+html[dark] {
+  $bgcolor-global: black;
+  @import 'apply-colors';
   @import 'apply-colors-dark';
 }