Revert "Merge pull request #7074 from weseek/fix/_reboot-bootstrap-colors.scss"

This reverts commit d223c4b40ba385dda60234b67817e5be031bd217, reversing
changes made to 2f92f0b0d234ad1dfacc4c42e6b65cc2f04ab60b.

packages/app/src/styles/theme/_apply-colors-dark.scss

@@ -4,45 +4,46 @@
 @use './mixins/count-badge';
 
 // determine optional variables
-$color-list: var(--color-list,var(--color-global));
-$bgcolor-list: var(--bgcolor-list,var(--bgcolor-global));
-$color-list-hover: var(--color-list-hover,var(--color-global));
+$color-list: $color-global !default;
+$bgcolor-list: $bgcolor-global !default;
+$color-list-hover: $color-global !default;
+$bgcolor-list-hover: lighten($bgcolor-global, 8%) !default;
 $color-list-active: $color-reversal !default;
-$bgcolor-list-active: var(--bgcolor-list-active,var(--primary));
-$bgcolor-subnav: var(--bgcolor-subnav,hsl(from var(--bgcolor-global) h s calc(l 3%)));
-$color-table: var(--color-table,white);
+$bgcolor-list-active: $primary !default;
+$bgcolor-subnav: lighten($bgcolor-global, 3%) !default;
+$color-table: white !default;
 $bgcolor-table: #343a40 !default;
 $border-color-table: lighten($bgcolor-table, 7.5%) !default;
 $color-table-hover: rgba(white, 0.075) !default;
 $bgcolor-table-hover: lighten($bgcolor-table, 7.5%) !default;
-$bgcolor-sidebar-list-group: var(--bgcolor-sidebar-list-group,var(--bgcolor-list));
+$bgcolor-sidebar-list-group: $bgcolor-list !default;
 $color-tags: #949494 !default;
 $bgcolor-tags: $dark !default;
 $border-color-global: $gray-500 !default;
 $border-color-toc: $border-color-global !default;
-$color-dropdown: var(--color-dropdown,var(--color-global));
-$bgcolor-dropdown: var(--bgcolor-dropdown,var(--bgcolor-global));
-$color-dropdown-link: var(--color-dropdown-link,var(--color-global));
+$color-dropdown: $color-global !default;
+$bgcolor-dropdown: $bgcolor-global !default;
+$color-dropdown-link: $color-global !default;
 $color-dropdown-link-hover: $light !default;
-$bgcolor-dropdown-link-hover: var(--bgcolor-dropdown-link-hover,hsl(from var(--bgcolor-global) h s calc(l 15%)));
+$bgcolor-dropdown-link-hover: lighten($bgcolor-global, 15%) !default;
 $color-dropdown-link-active: $light !default;
-$bgcolor-dropdown-link-active: var(--bgcolor-dropdown-link-active,var(--primary));
+$bgcolor-dropdown-link-active: $primary !default;
 
 // override bootstrap variables
 $text-muted: $gray-550;
-$table-dark-color: var(--color-table);
+$table-dark-color: $color-table;
 $table-dark-bg: $bgcolor-table;
 $table-dark-border-color: $border-color-table;
-$table-dark-hover-color: var(--color-table-hover);
+$table-dark-hover-color: $color-table-hover;
 $table-dark-hover-bg: $bgcolor-table-hover;
 $border-color: $border-color-global;
-$dropdown-color: var(--color-dropdown);
-$dropdown-bg: var(--bgcolor-dropdown);
-$dropdown-link-color: var(--color-dropdown-link);
-$dropdown-link-hover-color: var(--color-dropdown-link-hover);
-$dropdown-link-hover-bg: var(--bgcolor-dropdown-link-hover);
-$dropdown-link-active-color: var(--color-dropdown-link-active);
-$dropdown-link-active-bg: bar(--bgcolor-dropdown-link-active);
+$dropdown-color: $color-dropdown;
+$dropdown-bg: $bgcolor-dropdown;
+$dropdown-link-color: $color-dropdown-link;
+$dropdown-link-hover-color: $color-dropdown-link-hover;
+$dropdown-link-hover-bg: $bgcolor-dropdown-link-hover;
+$dropdown-link-active-color: $color-dropdown-link-active;
+$dropdown-link-active-bg: $bgcolor-dropdown-link-active;
 
 @import './mixins/list-group';
 @import './reboot-bootstrap-text';
@@ -51,14 +52,8 @@ $dropdown-link-active-bg: bar(--bgcolor-dropdown-link-active);
 @import './reboot-bootstrap-dropdown';
 
 // List Group
-@include override-list-group-item(
-  var(--color-list),
-  var(--bgcolor-sidebar-list-group),
-  var(--color-list-hover),
-  var(--bgcolor-list-hover),
-  var(--color-list-active),
-  var(--bgcolor-list-active)
-);
+@include override-list-group-item($color-list, $bgcolor-list, $color-list-hover, $bgcolor-list-hover, $color-list-active, $bgcolor-list-active);
+
 /*
   * Form
   */
@@ -66,11 +61,11 @@ input.form-control,
 select.form-control,
 select.custom-select,
 textarea.form-control {
-  color: var(--color-global);
-  background-color: hsl(from var(--bgcolor-global) h s calc(l - 5%));
+  color: $color-global;
+  background-color: darken($bgcolor-global, 5%);
   border-color: $border-color-global;
   &:focus {
-    background-color: var(--bgcolor-global);
+    background-color: $bgcolor-global;
   }
   // FIXME: accent color
   // border: 1px solid darken($border, 30%);
@@ -78,8 +73,8 @@ textarea.form-control {
 
 .form-control[disabled],
 .form-control[readonly] {
-  color: hsl(from var(--color-global) h s calc(l 10%));
-  background-color: hsl(from var(--bgcolor-global) h s calc(l 5%));
+  color: lighten($color-global, 10%);
+  background-color: lighten($bgcolor-global, 5%);
 }
 
 .input-group > .input-group-prepend > .input-group-text {
@@ -97,7 +92,7 @@ textarea.form-control {
 }
 
 label.custom-control-label::before {
-  background-color: hsl(from var(--bgcolor-global) h s calc(l - 5%));
+  background-color: darken($bgcolor-global, 5%);
 }
 
 /*
@@ -231,7 +226,7 @@ ul.pagination {
   .page-list-ul {
     > li {
       > span.page-list-meta {
-        color: hsl(from var(--color-global) h s calc(l - 10%));
+        color: darken($color-global, 10%);
       }
     }
   }
@@ -239,13 +234,13 @@ ul.pagination {
   // List group
   .list-group-item {
     &.active {
-      background-color: hsl(from var(--bgcolor-global) h s calc(l 9%));
+      background-color: lighten($bgcolor-global, 9%) !important;
     }
     .list-group-item-action:hover {
-      background-color: var(--bgcolor-list-hover);
+      background-color: $bgcolor-list-hover;
     }
     .page-list-snippet {
-      color: hsl(from var(--color-global) h s calc(l - 10%));
+      color: darken($body-color, 10%);
     }
   }
 }
@@ -255,7 +250,7 @@ ul.pagination {
  */
 .revision-toc-content {
   ::marker {
-    color: hsl(from var(--bgcolor-global) h s calc(l 30%));;
+    color: lighten($bgcolor-global, 30%);
   }
 }
 
@@ -263,17 +258,17 @@ ul.pagination {
  * GROWI subnavigation
  */
 .grw-subnav {
-  background-color: var(--bgcolor-subnav);
+  background-color: $bgcolor-subnav;
 }
 
 .grw-subnav-fixed-container .grw-subnav {
-  background-color: var(--bgcolor-subnav); opacity:0.85;
+  background-color: rgba($bgcolor-subnav, 0.85);
 }
 
 .grw-page-editor-mode-manager {
   .btn-outline-primary {
     &:hover {
-      color: var(--primary);
+      color: $primary;
       background-color: $gray-700;
     }
   }
@@ -281,7 +276,7 @@ ul.pagination {
 
 // Search drop down
 #search-typeahead-asynctypeahead {
-  background-color: var(--bgcolor-global);
+  background-color: $bgcolor-global;
   .table {
     background-color: transparent;
   }
@@ -292,30 +287,18 @@ ul.pagination {
  */
 .grw-sidebar {
   // List
-  @include override-list-group-item(
-    var(--color-list),
-    var(--bgcolor-sidebar-list-group),
-    var(--color-list-hover),
-    var(--bgcolor-list-hover),
-    var(--color-list-active),
-    var(--bgcolor-list-active)
-  );
+  @include override-list-group-item($color-list, $bgcolor-sidebar-list-group, $color-list-hover, $bgcolor-list-hover, $color-list-active, $bgcolor-list-active);
+
   // Pagetree
   .grw-pagetree {
-    --bgcolor-sidebar-context-lighten8: hsl(from var(--bgcolor-sidebar-context) h s calc(l 8%));
-    --bgcolor-sidebar-context-lighten15: hsl(from var(--bgcolor-sidebar-context) h s calc(l 15%));
-    --color-sidebar-context-darken15: hsl(from var(--bgcolor-sidebar-context) h s calc(l - 15%));
-    --color-sidebar-context-darken10: hsl(from var(--bgcolor-sidebar-context) h s calc(l - 10%));
-    --bgcolor-sidebar-context-lighten18: hsl(from var(--bgcolor-sidebar-context) h s calc(l 18%));
-    --bgcolor-sidebar-context-lighten24: hsl(from var(--bgcolor-sidebar-context) h s calc(l 24%));
     @include override-list-group-item-for-pagetree(
-      var(--color-sidebar-context),
-      var(--bgcolor-sidebar-context-lighten8),
-      var(--bgcolor-sidebar-context-lighten15),
-      var(--color-sidebar-context-darken15),
-      var(--color-sidebar-context-darken10),
-      var(--bgcolor-sidebar-context-lighten18),
-      var(--bgcolor-sidebar-context-lighten24)
+      $color-sidebar-context,
+      lighten($bgcolor-sidebar-context, 8%),
+      lighten($bgcolor-sidebar-context, 15%),
+      darken($color-sidebar-context, 15%),
+      darken($color-sidebar-context, 10%),
+      lighten($bgcolor-sidebar-context, 18%),
+      lighten($bgcolor-sidebar-context, 24%)
     );
     .grw-pagetree-triangle-btn {
       @include mixins-buttons.button-outline-svg-icon-variant($secondary, $gray-200);
@@ -323,18 +306,18 @@ ul.pagination {
     .btn-page-item-control {
       @include button-outline-variant($gray-500, $gray-500, $secondary, transparent);
       @include hover() {
-        background-color: var(--bgcolor-sidebar-context-lighten20);
+        background-color: lighten($bgcolor-sidebar-context, 20%);
       }
       &:not(:disabled):not(.disabled):active,
       &:not(:disabled):not(.disabled).active {
-        background-color: var(--bgcolor-sidebar-context-lighten34);
+        background-color: lighten($bgcolor-sidebar-context, 34%);
       }
       box-shadow: none !important;
     }
   }
   .private-legacy-pages-link {
     &:hover {
-      background: var(--bgcolor-list-hover);
+      background: $bgcolor-list-hover;
     }
   }
 }
@@ -356,7 +339,7 @@ ul.pagination {
  * Popover
  */
 .popover {
-  background-color: var(--bgcolor-global);
+  background-color: $bgcolor-global;
   border-color: $secondary;
   .popover-header {
     color: $white;
@@ -373,7 +356,7 @@ ul.pagination {
     }
 
     &::after {
-      border-top-color: var(--bgcolor-global);
+      border-top-color: $bgcolor-global;
     }
   }
   &.bs-popover-bottom .arrow {
@@ -382,7 +365,7 @@ ul.pagination {
     }
 
     &::after {
-      border-bottom-color: var(--bgcolor-global);
+      border-bottom-color: $bgcolor-global;
     }
   }
   &.bs-popover-right .arrow {
@@ -391,7 +374,7 @@ ul.pagination {
     }
 
     &::after {
-      border-right-color: var(--bgcolor-global);
+      border-right-color: $bgcolor-global;
     }
   }
   &.bs-popover-left .arrow {
@@ -400,7 +383,7 @@ ul.pagination {
     }
 
     &::after {
-      border-left-color: var(--bgcolor-global);
+      border-left-color: $bgcolor-global;
     }
   }
 }
@@ -420,7 +403,7 @@ ul.pagination {
   $color-slack: #4b144c;
 
   .form-control {
-    background: var(--bgcolor-global);
+    background: $bgcolor-global;
   }
 
   .custom-control-label {
@@ -430,7 +413,7 @@ ul.pagination {
     }
     &::after {
       background-color: darken($color-slack, 5%);
-      // background-image: url(/images/icons/slack/slack-logo-dark-off.svg); -- should be specified in app -- 2022.12.09 Yuki Takei
+      background-image: url(/images/icons/slack/slack-logo-dark-off.svg);
     }
   }
 
@@ -440,7 +423,7 @@ ul.pagination {
     }
     &::after {
       background-color: darken($color-slack, 5%);
-      // background-image: url(/images/icons/slack/slack-logo-dark-on.svg); -- should be specified in app -- 2022.12.09 Yuki Takei
+      background-image: url(/images/icons/slack/slack-logo-dark-on.svg);
     }
   }
   .grw-slack-logo svg {
@@ -486,7 +469,7 @@ ul.pagination {
 }
 
 .page-comments-row {
-  background: var(--bgcolor-subnav);
+  background: $bgcolor-subnav;
 }
 
 /*
@@ -551,4 +534,5 @@ ul.pagination {
  * skeleton
  */
 .grw-skeleton {
+  background-color: lighten($bgcolor-subnav, 15%);
 }

packages/app/src/styles/theme/_apply-colors-light.scss

@@ -4,41 +4,41 @@
 @use './mixins/count-badge';
 
 // determine optional variables
-$color-list: var(--color-list,var(--color-global));
-$bgcolor-list: var(--bgcolor-list,var(--bgcolor-global));
-$color-list-hover: var(--color-list-hover,var(--color-global));
+$color-list: $color-global !default;
+$bgcolor-list: $bgcolor-global !default;
+$color-list-hover: $color-global !default;
+$bgcolor-list-hover: lighten($primary, 72%) !default;
 $bgcolor-list-active: lighten($primary, 65%) !default;
 $color-list-active: color-yiq($bgcolor-list-active) !default;
-$color-table: var(--color-table,var(--color-global));
+$color-table: $color-global !default;
 $bgcolor-table: null !default;
 $border-color-table: $gray-200 !default;
-$color-table-hover: var(--color-table-hover,var(--color-table));
+$color-table-hover: $color-table !default;
 $bgcolor-table-hover: rgba(black, 0.075) !default;
-$bgcolor-sidebar-list-group: var(--bgcolor-sidebar-list-group,var(--bgcolor-list));
+$bgcolor-sidebar-list-group: $bgcolor-list !default;
 $color-tags: $secondary !default;
 $bgcolor-tags: $gray-200 !default;
 $border-color-global: $gray-300 !default;
 $border-color-toc: $border-color-global !default;
-$color-dropdown: var(--color-dropdown,var(--color-global));
-$color-dropdown-link: var(--color-dropdown-link,var(--color-global));
-$color-dropdown-link-hover: var(--color-dropdown-link-hover,var(--color-global));
-$color-dropdown-link-active: var(--color-reversal);
+$color-dropdown: $color-global !default;
+$color-dropdown-link: $color-global !default;
+$color-dropdown-link-hover: $color-global !default;
+$color-dropdown-link-active: $color-reversal !default;
 $bgcolor-dropdown-link-active: $primary !default;
 
-
 // override bootstrap variables
 $text-muted: $gray-500;
-$table-color: var(--color-table);
+$table-color: $color-table;
 $table-bg: $bgcolor-table;
 $table-border-color: $border-color-table;
-$table-hover-color: var(--color-table-hover);
+$table-hover-color: $color-table-hover;
 $table-hover-bg: $bgcolor-table-hover;
 $border-color: $border-color-global;
-$dropdown-color: var(--color-dropdown);
-$dropdown-link-color: var(--color-dropdown-link);
-$dropdown-link-hover-color: var(--color-dropdown-link-hover);
-$dropdown-link-active-color: var(--color-dropdown-link-active);
-$dropdown-link-active-bg: var(--bgcolor-dropdown-link-active);
+$dropdown-color: $color-dropdown;
+$dropdown-link-color: $color-dropdown-link;
+$dropdown-link-hover-color: $color-dropdown-link-hover;
+$dropdown-link-active-color: $color-dropdown-link-active;
+$dropdown-link-active-bg: $bgcolor-dropdown-link-active;
 
 @import './mixins/list-group';
 @import './reboot-bootstrap-text';
@@ -47,36 +47,30 @@ $dropdown-link-active-bg: var(--bgcolor-dropdown-link-active);
 @import './reboot-bootstrap-dropdown';
 
 // List Group
-@include override-list-group-item(
-  var(--color-list),
-  var(--bgcolor-sidebar-list-group),
-  var(--color-list-hover),
-  var(--bgcolor-list-hover),
-  var(--color-list-active),
-  var(--bgcolor-list-active)
-);
+@include override-list-group-item($color-list, $bgcolor-list, $color-list-hover, $bgcolor-list-hover, $color-list-active, $bgcolor-list-active);
+
 /*
  * Form
  */
 .form-control {
-  background-color: var(--bgcolor-global);
+  background-color: $bgcolor-global;
 }
 
 .form-control::placeholder {
-  color: hsl(from var(--bgcolor-global) h s calc(l - 20%));
+  color: darken($bgcolor-global, 20%);
 }
 
 .form-control[disabled],
 .form-control[readonly] {
-  color: hsl(from var(--color-global) h s calc(l 10%));
-  background-color: hsl(from var(--bgcolor-global) h s calc(l - 5%));
+  color: lighten($color-global, 10%);
+  background-color: darken($bgcolor-global, 5%);
 }
 
 /*
  * card
  */
 .card.card-disabled {
-  background-color: var(--background-color);
+  background-color: darken($bgcolor-card, 5%);
   border-color: $gray-200;
 }
 
@@ -163,11 +157,11 @@ $dropdown-link-active-bg: var(--bgcolor-dropdown-link-active);
  * GROWI subnavigation
  */
 .grw-subnav {
-  background-color: var(--bgcolor-subnav);
+  background-color: $bgcolor-subnav;
 }
 
 .grw-subnav-fixed-container .grw-subnav {
-  background-color: var(--bgcolor-subnav); opacity:0.85;
+  background-color: rgba($bgcolor-subnav, 0.85);
 }
 
 .grw-page-editor-mode-manager {
@@ -188,16 +182,8 @@ $dropdown-link-active-bg: var(--bgcolor-dropdown-link-active);
  * GROWI Sidebar
  */
 .grw-sidebar {
-  --bgcolor-sidebar-context: hsl(from var(--primary) h s calc(l 77%));
   // List
-  @include override-list-group-item(
-    var(--color-list),
-    var(--bgcolor-sidebar-list-group),
-    var(--color-list-hover),
-    var(--bgcolor-list-hover),
-    var(--color-list-active),
-    var(--bgcolor-list-active)
-  );
+  @include override-list-group-item($color-list, $bgcolor-sidebar-list-group, $color-list-hover, $bgcolor-list-hover, $color-list-active, $bgcolor-list-active);
   // sidebar-centent-bg
   .grw-navigation-wrap {
     // Drop a shadow on the light theme. The dark theme makes '$ bgcolor-sidebar-context' brighter than the body.
@@ -205,20 +191,14 @@ $dropdown-link-active-bg: var(--bgcolor-dropdown-link-active);
   }
   // Pagetree
   .grw-pagetree {
-    --bgcolor-sidebar-context-darken5: hsl(from var(--bgcolor-sidebar-context) h s calc(l - 5%));
-    --bgcolor-sidebar-context-darken12: hsl(from var(--bgcolor-sidebar-context) h s calc(l - 12%));
-    --color-sidebar-context-lighten10: hsl(from var(--color-sidebar-context) h s calc(l 10%));
-    --color-sidebar-context-lighten8: hsl(from var(--color-sidebar-context) h s calc(l 8%));
-    --bgcolor-sidebar-context-darken12: hsl(from var(--bgcolor-sidebar-context) h s calc(l - 15%));
-    --bgcolor-sidebar-context-darken12: hsl(from var(--bgcolor-sidebar-context) h s calc(l - 24%));
     @include override-list-group-item-for-pagetree(
-      var(--color-sidebar-context),
-      var(--bgcolor-sidebar-context-darken5),
-      var(--bgcolor-sidebar-context-darken12),
-      var(--color-sidebar-context-lighten10),
-      var(--color-sidebar-context-lighten8),
-      var(--bgcolor-sidebar-context-darken15),
-      var(--bgcolor-sidebar-context-darken24)
+      $color-sidebar-context,
+      darken($bgcolor-sidebar-context, 5%),
+      darken($bgcolor-sidebar-context, 12%),
+      lighten($color-sidebar-context, 10%),
+      lighten($color-sidebar-context, 8%),
+      darken($bgcolor-sidebar-context, 15%),
+      darken($bgcolor-sidebar-context, 24%)
     );
     .grw-pagetree-triangle-btn {
       @include mixins-buttons.button-outline-svg-icon-variant($gray-400, $primary);
@@ -226,7 +206,7 @@ $dropdown-link-active-bg: var(--bgcolor-dropdown-link-active);
   }
   .private-legacy-pages-link {
     &:hover {
-      background: var(--bgcolor-list-hover);
+      background: $bgcolor-list-hover;
     }
   }
 }
@@ -250,14 +230,14 @@ $dropdown-link-active-bg: var(--bgcolor-dropdown-link-active);
   .page-list-ul {
     > li {
       > span.page-list-meta {
-        color: hsl(from var(--color-global) h s calc(l 10%));
+        color: lighten($color-global, 10%);
       }
     }
   }
   // List group
   .list-group-item {
     .page-list-snippet {
-      color: hsl(from var(--color-global) h s calc(l 10%));
+      color: lighten($body-color, 10%);
     }
   }
 }
@@ -267,7 +247,7 @@ $dropdown-link-active-bg: var(--bgcolor-dropdown-link-active);
  */
 .revision-toc-content {
   ::marker {
-    color: hsl(from var(--bgcolor-global) h s calc(l - 20%));
+    color: darken($bgcolor-global, 20%);
   }
 }
 
@@ -327,7 +307,7 @@ $dropdown-link-active-bg: var(--bgcolor-dropdown-link-active);
     }
     &::after {
       background-color: white;
-      // background-image: url(/images/icons/slack/slack-logo-off.svg); -- should be specified in app -- 2022.12.09 Yuki Takei
+      background-image: url(/images/icons/slack/slack-logo-off.svg);
     }
   }
   .custom-control-input:checked ~ .custom-control-label {
@@ -335,7 +315,7 @@ $dropdown-link-active-bg: var(--bgcolor-dropdown-link-active);
       background-color: lighten($color-slack, 60%);
     }
     &::after {
-      // background-image: url(/images/icons/slack/slack-logo-on.svg); -- should be specified in app -- 2022.12.09 Yuki Takei
+      background-image: url(/images/icons/slack/slack-logo-on.svg);
     }
   }
   .grw-slack-logo svg {
@@ -382,7 +362,7 @@ $dropdown-link-active-bg: var(--bgcolor-dropdown-link-active);
 }
 
 .page-comments-row {
-  background: var(--bgcolor-subnav);
+  background: $bgcolor-subnav;
 }
 
 /*
@@ -446,5 +426,5 @@ $dropdown-link-active-bg: var(--bgcolor-dropdown-link-active);
  * skeleton
  */
 .grw-skeleton {
-  background-color: hsl(from var(--bgcolor-subnav) h s calc(l 10%));
+  background-color: darken($bgcolor-subnav, 10%);
 }

packages/app/src/styles/theme/_apply-colors.scss

@@ -12,31 +12,32 @@
 $border-image-navbar: linear-gradient(to right, $gray-300 0%, $gray-300 100%) !default;
 $bgcolor-search-top-dropdown: $secondary !default;
 $bgcolor-sidebar-nav-item-active: darken($bgcolor-sidebar, 10%) !default;
-$text-shadow-sidebar-nav-item-active: var(--text-shadow-sidebar-nav-item-active,1px 1px 2px var(--primary));
+$text-shadow-sidebar-nav-item-active: 1px 1px 2px $primary !default;
 $bgcolor-inline-code: $gray-100 !default;
 $color-inline-code: darken($red, 15%) !default;
 $bordercolor-inline-code: $gray-400 !default;
 $bordercolor-nav-tabs: $gray-300 !default;
 $bordercolor-nav-tabs-hover: $gray-200 $gray-200 $bordercolor-nav-tabs !default;
 $color-nav-tabs-link-active: $gray-600 !default;
-$bordercolor-nav-tabs-active: var(--ordercolor-nav-tabs-active,var(--bordercolor-nav-tabs) var(--bordercolor-nav-tabs) var(--bgcolor-global));
+$bordercolor-nav-tabs-active: $bordercolor-nav-tabs $bordercolor-nav-tabs $bgcolor-global !default;
 $color-btn-reload-in-sidebar: $gray-500;
 $bgcolor-keyword-highlighted: var.$grw-marker-yellow !default;
-$bgcolor-page-list-group-item-active: var(--bgcolor-page-list-group-item-active,hsl(from var(--bgcolor-global) h s calc(l 76%)));
-$color-page-list-group-item-meta: var(--color-page-list-group-item-meta,$gray-500);
-$color-search-page-list-title: var(--color-search-page-list-title,var(--color-global));
+$bgcolor-page-list-group-item-active: lighten($primary, 76%) !default;
+$color-page-list-group-item-meta: $gray-500 !default;
+$color-search-page-list-title: $color-global !default;
+$bgcolor-subnav: darken($bgcolor-global, 3%) !default;
 
 // override bootstrap variables
-$body-bg: var(--bgcolor-global);
-$body-color: var(--color-global);
-$link-color: var(--color-link);
-$link-hover-color: var(--color-link-hover);
-$input-focus-color: var(--color-global);
+$body-bg: $bgcolor-global;
+$body-color: $color-global;
+$link-color: $color-link;
+$link-hover-color: $color-link-hover;
+$input-focus-color: $color-global;
 $nav-tabs-border-color: $bordercolor-nav-tabs;
 $nav-tabs-link-hover-border-color: $bordercolor-nav-tabs-hover;
 $nav-tabs-link-active-color: $color-nav-tabs-link-active;
-$nav-tabs-link-active-bg: var(--bgcolor-global);
-$nav-tabs-link-active-border-color: var(--bordercolor-nav-tabs-active);
+$nav-tabs-link-active-bg: $bgcolor-global;
+$nav-tabs-link-active-border-color: $bordercolor-nav-tabs-active;
 $theme-colors: map-merge($theme-colors, ( primary: $primary ));
 
 @import 'reboot-bootstrap-buttons';
@@ -44,6 +45,7 @@ $theme-colors: map-merge($theme-colors, ( primary: $primary ));
 @import 'reboot-bootstrap-theme-colors';
 @import 'reboot-bootstrap-nav';
 @import 'reboot-toastr-colors';
+@import '~emoji-mart/css/emoji-mart'; // Emoji-mart style
 
 // determine variables with　bootstrap function (These variables can be used after importing bootstrap above)
 $color-modal-header: color-yiq($primary) !default;
@@ -76,7 +78,7 @@ code:not([class^='language-']) {
     fill: $secondary;
   }
   .grw-color-mode-icon svg {
-    fill: var(--color-global);
+    fill: $color-global;
   }
   .grw-color-mode-icon-muted svg {
     fill: $secondary;
@@ -90,12 +92,12 @@ code:not([class^='language-']) {
 
 // Tabs
 .nav.nav-tabs .nav-link.active {
-  color: var(--color-link);
+  color: $color-link !important;
   background: transparent;
 
   &:hover,
   &:focus {
-    color: var(--color-link-hover);
+    color: $color-link-hover !important;
   }
 }
 
@@ -148,7 +150,7 @@ ul.pagination {
   }
 
   svg {
-    fill: var(--fillcolor-logo-mark);
+    fill: $fillcolor-logo-mark;
   }
 
   &:hover {
@@ -165,16 +167,16 @@ ul.pagination {
 }
 
 .grw-navbar {
-  background: var(--bgcolor-navbar);
+  background: $bgcolor-navbar;
   .nav-item .nav-link {
-    color: var(--color-link-nabvar);
+    color: $color-link-nabvar;
   }
 
   border-image: $border-image-navbar;
   border-image-slice: 1;
 
   .grw-app-title {
-    color: var(--fillcolor-logo-mark);
+    color: $fillcolor-logo-mark;
   }
 }
 
@@ -185,13 +187,13 @@ ul.pagination {
 
   // for https://youtrack.weseek.co.jp/issue/GW-2603
   .search-typeahead {
-    background-color: var(--bgcolor-global); opacity:0.9;
+    background-color: rgba($bgcolor-global, 0.9);
   }
 }
 
 .grw-sidebar {
   .grw-navigation-resize-button {
-    $color-resize-button: var(--color-resize-button--,var(--color-global));
+    $color-resize-button: $color-global !default;
     $bgcolor-resize-button: white !default;
     $color-resize-button-hover: $color-reversal !default;
     $bgcolor-resize-button-hover: lighten($bgcolor-resize-button, 5%) !default;
@@ -215,13 +217,13 @@ ul.pagination {
   }
   div.grw-global-navigation {
     > div {
-      background-color: var(--bgcolor-sidebar);
+      background-color: $bgcolor-sidebar;
     }
   }
   div.grw-contextual-navigation {
     > div {
-      color: var(--color-sidebar-context);
-      background-color: var(--bgcolor-sidebar-context);
+      color: $color-sidebar-context;
+      background-color: $bgcolor-sidebar-context;
     }
   }
 
@@ -240,12 +242,11 @@ ul.pagination {
   .grw-sidebar-nav-primary-container {
     .btn.active {
       i {
-        text-shadow: var(--text-shadow-sidebar-nav-item-active);
+        text-shadow: $text-shadow-sidebar-nav-item-active;
       }
       // fukidashi
       &:after {
-        border-right-color: var(--bgcolor-sidebar-context)
-        ;
+        border-right-color: $bgcolor-sidebar-context;
       }
     }
   }
@@ -261,20 +262,20 @@ ul.pagination {
       }
 
       .custom-control-label::after {
-        background-color: var(--bgcolor-global);
+        background-color: $bgcolor-global;
       }
 
       .custom-control-input:not(:checked) + .custom-control-label::before {
-        color: var(--bgcolor-global);
+        color: $bgcolor-global;
       }
 
       .custom-control-input:checked + .custom-control-label::before {
-        color: var(--bgcolor-global);
+        color: $bgcolor-global;
         background-color: $primary;
         // border-color: $primary !important;
       }
       .custom-control-input:checked + .custom-control-label::after {
-        color: var(--bgcolor-global);
+        color: $bgcolor-global;
       }
     }
   }
@@ -298,7 +299,7 @@ ul.pagination {
         background-color: transparent;
 
         .icon-lock {
-          color: var(--color-link);
+          color: $color-link;
         }
 
         .grw-recent-changes-item-lower {
@@ -317,7 +318,7 @@ ul.pagination {
  * Icon
  */
 .editor-container .navbar-editor svg {
-  fill: var(--color-editor-icons);
+  fill: $color-editor-icons;
 }
 
 // page preview button in link form
@@ -344,7 +345,7 @@ ul.pagination {
   }
 
   .modal-content {
-    background-color: var(--bgcolor-global);
+    background-color: $bgcolor-global;
   }
 
   .modal-footer {
@@ -356,13 +357,13 @@ ul.pagination {
   .nav-item {
     &:hover,
     &:focus {
-      background-color: var(--color-link); opacity:0.9;
+      background-color: rgba($color-link, 0.08);
     }
     .nav-link {
       -webkit-appearance: none;
-      color: var(--color-link);
+      color: $color-link;
       svg {
-        fill: var(--color-link);
+        fill: $color-link;
       }
 
       // Disabled state lightens text
@@ -376,7 +377,7 @@ ul.pagination {
   }
 
   .grw-nav-slide-hr {
-    border-color: var(--color-link);
+    border-color: $color-link;
   }
 }
 
@@ -392,8 +393,8 @@ ul.pagination {
  * cards
  */
 .card.well {
-  color: var(--color-global);
-  background-color: var(--bgcolor-card);
+  color: $color-global;
+  background-color: $bgcolor-card;
   border-color: $light;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
 }
@@ -446,21 +447,21 @@ ul.pagination {
   }
 
   a {
-    color: var(--color-link-wiki);
+    color: $color-link-wiki;
 
     &:hover {
-      color: var(--color-link-wiki-hover);
+      color: $color-link-wiki-hover;
     }
   }
 
   // table with handsontable modal button
   .editable-with-handsontable {
     button {
-      color: var(--color-link-wiki);
+      color: $color-link-wiki;
     }
 
     button:hover {
-      color: var(--color-link-wiki-hover);
+      color: $color-link-wiki-hover;
     }
   }
 }
@@ -474,26 +475,26 @@ ul.pagination {
     .list-group-item {
       a {
         svg {
-          fill: var(--color-global);
+          fill: $color-global;
         }
 
         @include hover() {
           svg {
-            fill: var(--color-global);
+            fill: $color-global;
           }
         }
       }
 
       .page-list-meta {
-        color: var(--color-page-list-group-item-meta);
+        color: $color-page-list-group-item-meta;
         svg {
-          fill: var(--color-page-list-group-item-meta);
+          fill: $color-page-list-group-item-meta;
         }
       }
 
       &.list-group-item-action {
         &.active {
-          background-color: var(--bgcolor-page-list-group-item-active);
+          background-color: $bgcolor-page-list-group-item-active;
           border-left-color: $primary;
         }
       }
@@ -506,19 +507,19 @@ ul.pagination {
  */
 .layout-root.editing {
   .main {
-    background-color: hsl(from var(--bgcolor-global) h s calc(l - 2%));
+    background-color: darken($bgcolor-global, 2%);
 
     .page-editor-editor-container {
       border-right-color: $border-color-theme;
 
       .navbar-editor {
-        background-color: var(--bgcolor-global); // same color with active tab
+        background-color: $bgcolor-global; // same color with active tab
         border-bottom-color: $border-color-theme;
       }
     }
 
     .page-editor-preview-container {
-      background-color: var(--bgcolor-global);
+      background-color: $bgcolor-global;
     }
   }
 }
@@ -528,8 +529,8 @@ ul.pagination {
  */
 body.editing-sidebar {
   .page-editor-preview-body {
-    color: var(--color-sidebar-context);
-    background-color: var(--bgcolor-sidebar-context);
+    color: $color-sidebar-context;
+    background-color: $bgcolor-sidebar-context;
   }
 }
 
@@ -540,10 +541,10 @@ body.editing-sidebar {
   .desktop-preview,
   .tablet-preview,
   .mobile-preview {
-    background: var(--bgcolor-global);
+    background: $bgcolor-global;
   }
   .grid-edit-border-for-each-cols {
-    border: 2px solid var(--bgcolor-global);
+    border: 2px solid $bgcolor-global;
   }
 }
 
@@ -567,10 +568,10 @@ body.editing-sidebar {
  * GROWI comment
  */
 .page-comment-meta .page-comment-revision svg {
-  fill: var(--color-link);
+  fill: $color-link;
 
   &:hover {
-    fill: var(--color-link-hover);
+    fill: $color-link-hover;
   }
 }
 
@@ -580,17 +581,17 @@ body.editing-sidebar {
 .page-comments {
   .page-comment .page-comment-main,
   .page-comment-form .comment-form-main {
-    background-color: var(--bgcolor-global);
+    background-color: $bgcolor-global;
 
     &:before {
-      border-right-color: var(--bgcolor-global);
+      border-right-color: $bgcolor-global;
     }
 
     .nav.nav-tabs {
       > li > a.active {
         background: transparent;
-        border-bottom: solid 1px hsl(from var(--bgcolor-global) h s calc(l - 4%));
-        border-bottom-color: hsl(from var(--bgcolor-global) h s calc(l - 4%));
+        border-bottom: solid 1px darken($bgcolor-global, 4%);
+        border-bottom-color: darken($bgcolor-global, 4%);
       }
     }
   }
@@ -601,10 +602,10 @@ body.editing-sidebar {
  */
 .search-result-base {
   .grw-search-page-nav {
-    background-color: var(--bgcolor-subnav);
+    background-color: $bgcolor-subnav;
   }
   .search-control {
-    background-color: var(--bgcolor-global);
+    background-color: $bgcolor-global;
   }
   .page-list {
     .highlighted-keyword {
@@ -625,7 +626,7 @@ mark.rbt-highlight-text {
  * GROWI page content footer
  */
 .page-content-footer {
-  background-color: hsl(from var(--bgcolor-global) h s calc(l - 2%));
+  background-color: darken($bgcolor-global, 2%);
   border-top-color: $border-color-theme;
 }
 
@@ -644,7 +645,7 @@ mark.rbt-highlight-text {
   #themeOptions {
     .theme-option-container.active {
       .theme-option-name {
-        color: var(--color-global);
+        color: $color-global;
       }
       a {
         background-color: $color-theme-color-box;
@@ -658,7 +659,7 @@ mark.rbt-highlight-text {
  * HackMd
  */
 .bg-box {
-  background-color: var(--bgcolor-global);
+  background-color: $bgcolor-global;
 }
 
 .grw-fab {

packages/app/src/styles/theme/_reboot-bootstrap-buttons.scss

@@ -1,21 +1,21 @@
 .btn-link {
-  color: var(--link-color);
+  color: $link-color;
   svg {
-    fill: var(--link-color);
+    fill: $link-color;
   }
 
   @include hover() {
-    color: var(--link-hover-color);
+    color: $link-hover-color;
     svg {
-      fill: var(--link-hover-color);
+      fill: $link-hover-color;
     }
   }
 
   &:disabled,
   &.disabled {
-    color: var(--btn-link-disabled-color);
+    color: $btn-link-disabled-color;
     svg {
-      fill: var(--btn-link-disabled-color);
+      fill: $btn-link-disabled-color;
     }
   }
 }

packages/app/src/styles/theme/_reboot-bootstrap-colors.scss

@@ -15,31 +15,31 @@
 //    the `inherit` value on things like `<th>` elements.
 
 &, body {
-  color: var(--body-color);
-  background-color: var(--body-bg); // 2
+  color: $body-color;
+  background-color: $body-bg; // 2
 
   svg {
-    fill: var(--body-color);
+    fill: $body-color;
   }
 }
 
 // Links
 
 a {
-  color: var(--link-color);
+  color: $link-color;
   text-decoration: $link-decoration;
   background-color: transparent; // Remove the gray background on active links in IE 10.
 
   svg {
-    fill: var(--link-color);
+    fill: $link-color;
   }
 
   @include hover() {
-    color: var(--link-hover-color);
+    color: $link-hover-color;
     text-decoration: $link-hover-decoration;
 
     svg {
-      fill: var(--link-hover-color);
+      fill: $link-hover-color;
     }
   }
 }

packages/app/src/styles/theme/mixins/_list-group.scss

@@ -63,7 +63,7 @@
     }
     .grw-pagetree-title-anchor {
       .grw-sidebar-text-muted {
-        // color: rgba(desaturate($color, 50%), 0.6);
+        color: rgba(desaturate($color, 50%), 0.6);
       }
     }
   }

packages/preset-themes/src/styles/default.scss

@@ -17,92 +17,88 @@
 //== Light Mode
 //
 :root[data-theme='light'] {
-  --primary: #122c55;
+  $primary: #122c55;
   $accent: #209fd8;
 
   // Background colors
-  --bgcolor-global: white;
-  --body-bg: var(--bgcolor-global);
+  $bgcolor-global: white;
   $bgcolor-inline-code: $gray-100; //optional
-  --bgcolor-card: #{$gray-50};
+  $bgcolor-card: $gray-50;
   $bgcolor-blinked-section: rgba($primary, 0.1);
   //$bgcolor-keyword-highlighted: $grw-marker-yellow;
 
   // Font colors
-  --color-global: #112744;
-  --body-color: var(--color-global);
+  $color-global: #112744;
   $color-reversal: $light;
   // $color-header: #2b2b2b;
-  --color-link: #1938ba;
-  --link-color: var(--color-link);
-  --link-hover-color: var(--color-link-hover);
-  --color-link-hover: hsl(from var(--color-link) h s calc(l 20%));
-  --color-link-wiki: var(--color-link);
-  --color-link-wiki-hover:  hsl(from var(--color-link-wiki) h s calc(l 20%));
-  --color-link-nabvar: #{gray-500};
+  $color-link: #1938ba;
+  $color-link-hover: lighten($color-link, 20%);
+  $color-link-wiki: $color-link;
+  $color-link-wiki-hover: lighten($color-link-wiki, 20%);
+  $color-link-nabvar: $gray-500;
   $color-inline-code: darken($red, 15%); // optional
 
   // List Group colors
-  --color-list: var(--color-global); // optional
-  // --bgcolor-list: var(--bgcolor-global); // optional
-  // --color-list-hover: va(--color-global); // optional
-  --bgcolor-list-hover: hsl(from var(--bgcolor-global) h s calc(l 3%)); // optional
-  // --color-list-active:white ; // optional
+  // $color-list: $color-global; // optional
+  // $bgcolor-list: $bgcolor-global; // optional
+  // $color-list-hover: $color-global; // optional
+  // $bgcolor-list-hover: darken($bgcolor-global, 3%); // optional
+  // $color-list-active: $color-reversal; // optional
   // $bgcolor-list-active: $primary; // optional
 
   // Table colors
-  // --color-table: #; // optional
-  // --bgcolor-table: #; // optional
-  // --border-color-table: #; // optional
-  // --color-table-hover: #; // optional
-  // --bgcolor-table-hover: #; // optional
+  // $bgcolor-subnav: #; // optional
+  // $color-table: #; // optional
+  // $bgcolor-table: #; // optional
+  // $border-color-table: #; // optional
+  // $color-table-hover: #; // optional
+  // $bgcolor-table-hover: #; // optional
 
   // Navbar
-  --bgcolor-navbar: #{$gray-900};
+  $bgcolor-navbar: $gray-900;
   $bgcolor-search-top-dropdown: $accent;
   $border-image-navbar: linear-gradient(to right, #36c9ff 0%, #36c9ff 33%, #7926ff 66%, #ff2eff 100%);
 
   // Logo colors
-  --bgcolor-logo: var(--bgcolor-navbar);
-  --fillcolor-logo-mark: lighten(desaturate(var(--bgcolor-navbar), 10%), 15%);
+  $bgcolor-logo: $bgcolor-navbar;
+  $fillcolor-logo-mark: lighten(desaturate($bgcolor-navbar, 10%), 15%);
 
   // Sidebar
-  --bgcolor-sidebar: var(--primary);
-  $bgcolor-sidebar: #122c55;
+  $bgcolor-sidebar: $primary;
   $bgcolor-sidebar-nav-item-active: rgba(black, 0.37); // optional
-  --text-shadow-sidebar-nav-item-active: 0px 0px 10px #0099ff; // optional
+  $text-shadow-sidebar-nav-item-active: 0px 0px 10px #0099ff; // optional
   // Sidebar resize button
   $color-resize-button: $color-reversal;
   $bgcolor-resize-button: $accent;
   $color-resize-button-hover: $color-reversal;
   $bgcolor-resize-button-hover: lighten($bgcolor-resize-button, 5%);
   // Sidebar contents
-  --color-sidebar-context: var(--color-global);
-
+  $color-sidebar-context: $color-global;
+  $bgcolor-sidebar-context: lighten($primary, 77%);
   // Sidebar list group
-  --bgcolor-sidebar-list-group: #{gray-50}; // optional
+  $bgcolor-sidebar-list-group: $gray-50; // optional
 
   // Subnavigation
-  // --bgcolor-subnav: #fafafa; // optional
+  // $bgcolor-subnav: #fafafa; // optional
 
   // Tabs
   // $color-nav-tabs-link-active: #; //optional
   // $bordercolor-nav-tabs-hover: # # $bordercolor-nav-tabs; // optional
-  // $bordercolor-nav-tabs-active: # # --bgcolor-global; // optional
+  // $bordercolor-nav-tabs-active: # # $bgcolor-global; // optional
 
   // Tags
   // $color-tags: #; //optional
   // $bgcolor-tags: #; //optional
 
   // Icon colors
-  --color-editor-icons: var(--color-global);
+  $color-editor-icons: $color-global;
 
   // Border colors
   $border-color-theme: $gray-400;
   $bordercolor-inline-code: $gray-400; // optional
 
   // Dropdown colors
-  --bgcolor-dropdown-link-active: $growi-blue;
+  $bgcolor-dropdown-link-active: $growi-blue;
 
   // admin theme box
   $color-theme-color-box: lighten($primary, 20%);
@@ -113,7 +109,7 @@
   // Button
   .btn-group.grw-page-editor-mode-manager {
     .btn.btn-outline-primary {
-      @include page-editor-mode-manager.btn-page-editor-mode-manager(primary, lighten($primary, 65%), lighten($primary, 70%));
+      @include page-editor-mode-manager.btn-page-editor-mode-manager($primary, lighten($primary, 65%), lighten($primary, 70%));
     }
   }
 }
@@ -121,83 +117,81 @@
 //== Dark Mode
 //
 :root[data-theme='dark'] {
-  --primary: #115cd3;
+  $primary: #115cd3;
   $accent: #db00c2;
 
   // Background colors
-  --bgcolor-global: #131418;
+  $bgcolor-global: #131418;
   $bgcolor-inline-code: #1f1f22; //optional
-  --bgcolor-card: hsl(from var(--bgcolor-global) h s calc(l - 5%));
+  $bgcolor-card: darken($bgcolor-global, 5%);
   $bgcolor-blinked-section: rgba($primary, 0.4);
   $bgcolor-keyword-highlighted: darken($grw-marker-red, 30%);
 
   // Font colors
-  --color-global: #{$gray-400};
-  $color-global: var(--color-global);
+  $color-global: $gray-400;
   $color-reversal: $gray-900;
   // $color-header: desaturate($primary, 20%);
-  --color-link: #7b9ad5;
-  --color-link-hover: hsl(from var(--color-link) h s calc(l 10%));
-  --color-link-wiki: var(--color-link);
-  --color-link-wiki-hover: hsl(from var(--color-link-wiki) h s calc(l 10%));
-  --color-link-nabvar: #a7a7a7;
-  --color-inline-code: #c7254e; // optional
+  $color-link: #7b9ad5;
+  $color-link-hover: lighten($color-link, 10%);
+  $color-link-wiki: $color-link;
+  $color-link-wiki-hover: lighten($color-link-wiki, 10%);
+  $color-link-nabvar: #a7a7a7;
+  $color-inline-code: #c7254e; // optional
 
   // List Group colors
-  --color-list: var(--color-global); // optional
-  // --bgcolor-list: var(--bgcolor-global); // optional
-  // --color-list-hover: va(--color-global); // optional
-  --bgcolor-list-hover: hsl(from var(--bgcolor-global) h s calc(l 3%)); // optional
-  // --color-list-active:white ; // optional
+  // $color-list: $color-global; // optional
+  // $bgcolor-list: $bgcolor-global; // optional
+  // $color-list-hover: $color-global; // optional
+  // $bgcolor-list-hover: lighten($bgcolor-global, 3%); // optional
+  // $color-list-active:white ; // optional
   // $bgcolor-list-active: $primary; // optional
 
   // Table colors
-  // --color-table: #; // optional
-  // --bgcolor-table: #; // optional
-  // --border-color-table: #; // optional
-  // --color-table-hover: #; // optional
-  // --bgcolor-table-hover: #; // optional
+  // $color-table: #; // optional
+  // $bgcolor-table: #; // optional
+  // $border-color-table: #; // optional
+  // $color-table-hover: #; // optional
+  // $bgcolor-table-hover: #; // optional
 
   // Navbar
-  --bgcolor-navbar: #2a2929;
+  $bgcolor-navbar: #2a2929;
   $bgcolor-search-top-dropdown: $accent;
   $border-image-navbar: linear-gradient(to right, #44bfe3 0%, #b04aff 50%, #ff1794 100%);
 
   // Logo colors
-  $bgcolor-logo: var(--bgcolor-navbar);
-  --fillcolor-logo-mark: #{$gray-700};
+  $bgcolor-logo: $bgcolor-navbar;
+  $fillcolor-logo-mark: $gray-700;
 
   // Sidebar
-  --bgcolor-sidebar: #122c55;
   $bgcolor-sidebar: #122c55;
   $bgcolor-sidebar-nav-item-active: rgba(#969494, 0.3); // optional
-  --text-shadow-sidebar-nav-item-active: 0px 0px 10px #0099ff; // optional
+  $text-shadow-sidebar-nav-item-active: 0px 0px 10px #0099ff; // optional
   // Sidebar resize button
   $color-resize-button: white;
   $bgcolor-resize-button: $accent;
   $color-resize-button-hover: white;
   $bgcolor-resize-button-hover: darken($bgcolor-resize-button, 5%);
   // Sidebar contents
-  --color-sidebar-context: var(--color-global);
-
+  $bgcolor-sidebar-context: lighten($bgcolor-global, 8%);
+  $color-sidebar-context: $color-global;
   // Sidebar list group
-  --bgcolor-sidebar-list-group: #1c2a3e; // optional
+  $bgcolor-sidebar-list-group: #1c2a3e; // optional
 
   // Subnavigation
-  --bgcolor-subnav: hsl(from var(--bgcolor-global) h s calc(l 4%)); // optional
+  $bgcolor-subnav: lighten($bgcolor-global, 4%); // optional
 
   // Tabs
   $bordercolor-nav-tabs: $gray-700; // optional
   // $color-nav-tabs-link-active: #; //optional
   $bordercolor-nav-tabs-hover: #666 #666 $bordercolor-nav-tabs; // optional
-  // $bordercolor-nav-tabs-active: # # var(--bgcolor-global); // optional
+  // $bordercolor-nav-tabs-active: # # $bgcolor-global; // optional
 
   // Tags
   // $color-tags: #; //optional
   // $bgcolor-tags: #; //optional
 
   // Icon colors
-  --color-editor-icons: var(--color-global);
+  $color-editor-icons: $color-global;
 
   // Border colors
   $border-color-theme: $gray-400;

packages/preset-themes/src/styles/theme/_apply-colors-dark.scss

@@ -4,26 +4,46 @@
 @use './mixins/count-badge';
 
 // determine optional variables
+$color-list: $color-global !default;
+$bgcolor-list: $bgcolor-global !default;
+$color-list-hover: $color-global !default;
+$bgcolor-list-hover: lighten($bgcolor-global, 8%) !default;
 $color-list-active: $color-reversal !default;
 $bgcolor-list-active: $primary !default;
+$bgcolor-subnav: lighten($bgcolor-global, 3%) !default;
+$color-table: white !default;
 $bgcolor-table: #343a40 !default;
 $border-color-table: lighten($bgcolor-table, 7.5%) !default;
 $color-table-hover: rgba(white, 0.075) !default;
 $bgcolor-table-hover: lighten($bgcolor-table, 7.5%) !default;
+$bgcolor-sidebar-list-group: $bgcolor-list !default;
 $color-tags: #949494 !default;
 $bgcolor-tags: $dark !default;
 $border-color-global: $gray-500 !default;
 $border-color-toc: $border-color-global !default;
+$color-dropdown: $color-global !default;
+$bgcolor-dropdown: $bgcolor-global !default;
+$color-dropdown-link: $color-global !default;
 $color-dropdown-link-hover: $light !default;
+$bgcolor-dropdown-link-hover: lighten($bgcolor-global, 15%) !default;
 $color-dropdown-link-active: $light !default;
 $bgcolor-dropdown-link-active: $primary !default;
 
 // override bootstrap variables
 $text-muted: $gray-550;
+$table-dark-color: $color-table;
 $table-dark-bg: $bgcolor-table;
 $table-dark-border-color: $border-color-table;
+$table-dark-hover-color: $color-table-hover;
 $table-dark-hover-bg: $bgcolor-table-hover;
 $border-color: $border-color-global;
+$dropdown-color: $color-dropdown;
+$dropdown-bg: $bgcolor-dropdown;
+$dropdown-link-color: $color-dropdown-link;
+$dropdown-link-hover-color: $color-dropdown-link-hover;
+$dropdown-link-hover-bg: $bgcolor-dropdown-link-hover;
+$dropdown-link-active-color: $color-dropdown-link-active;
+$dropdown-link-active-bg: $bgcolor-dropdown-link-active;
 
 @import './mixins/list-group';
 @import './reboot-bootstrap-text';
@@ -32,6 +52,8 @@ $border-color: $border-color-global;
 @import './reboot-bootstrap-dropdown';
 
 // List Group
+@include override-list-group-item($color-list, $bgcolor-list, $color-list-hover, $bgcolor-list-hover, $color-list-active, $bgcolor-list-active);
+
 /*
   * Form
   */
@@ -39,8 +61,11 @@ input.form-control,
 select.form-control,
 select.custom-select,
 textarea.form-control {
+  color: $color-global;
+  background-color: darken($bgcolor-global, 5%);
   border-color: $border-color-global;
   &:focus {
+    background-color: $bgcolor-global;
   }
   // FIXME: accent color
   // border: 1px solid darken($border, 30%);
@@ -48,6 +73,8 @@ textarea.form-control {
 
 .form-control[disabled],
 .form-control[readonly] {
+  color: lighten($color-global, 10%);
+  background-color: lighten($bgcolor-global, 5%);
 }
 
 .input-group > .input-group-prepend > .input-group-text {
@@ -65,6 +92,7 @@ textarea.form-control {
 }
 
 label.custom-control-label::before {
+  background-color: darken($bgcolor-global, 5%);
 }
 
 /*
@@ -198,6 +226,7 @@ ul.pagination {
   .page-list-ul {
     > li {
       > span.page-list-meta {
+        color: darken($color-global, 10%);
       }
     }
   }
@@ -205,10 +234,13 @@ ul.pagination {
   // List group
   .list-group-item {
     &.active {
+      background-color: lighten($bgcolor-global, 9%) !important;
     }
     .list-group-item-action:hover {
+      background-color: $bgcolor-list-hover;
     }
     .page-list-snippet {
+      color: darken($body-color, 10%);
     }
   }
 }
@@ -218,6 +250,7 @@ ul.pagination {
  */
 .revision-toc-content {
   ::marker {
+    color: lighten($bgcolor-global, 30%);
   }
 }
 
@@ -225,14 +258,17 @@ ul.pagination {
  * GROWI subnavigation
  */
 .grw-subnav {
+  background-color: $bgcolor-subnav;
 }
 
 .grw-subnav-fixed-container .grw-subnav {
+  background-color: rgba($bgcolor-subnav, 0.85);
 }
 
 .grw-page-editor-mode-manager {
   .btn-outline-primary {
     &:hover {
+      color: $primary;
       background-color: $gray-700;
     }
   }
@@ -240,7 +276,7 @@ ul.pagination {
 
 // Search drop down
 #search-typeahead-asynctypeahead {
-  background-color: var(--bgcolor-global);
+  background-color: $bgcolor-global;
   .table {
     background-color: transparent;
   }
@@ -250,17 +286,39 @@ ul.pagination {
  * GROWI Sidebar
  */
 .grw-sidebar {
-  .grw-pagetree-triangle-btn {
-    @include mixins-buttons.button-outline-svg-icon-variant($secondary, $gray-200);
-  }
-  .btn-page-item-control {
-    @include button-outline-variant($gray-500, $gray-500, $secondary, transparent);
-    @include hover() {
+  // List
+  @include override-list-group-item($color-list, $bgcolor-sidebar-list-group, $color-list-hover, $bgcolor-list-hover, $color-list-active, $bgcolor-list-active);
+
+  // Pagetree
+  .grw-pagetree {
+    @include override-list-group-item-for-pagetree(
+      $color-sidebar-context,
+      lighten($bgcolor-sidebar-context, 8%),
+      lighten($bgcolor-sidebar-context, 15%),
+      darken($color-sidebar-context, 15%),
+      darken($color-sidebar-context, 10%),
+      lighten($bgcolor-sidebar-context, 18%),
+      lighten($bgcolor-sidebar-context, 24%)
+    );
+    .grw-pagetree-triangle-btn {
+      @include mixins-buttons.button-outline-svg-icon-variant($secondary, $gray-200);
     }
-    &:not(:disabled):not(.disabled):active,
-    &:not(:disabled):not(.disabled).active {
+    .btn-page-item-control {
+      @include button-outline-variant($gray-500, $gray-500, $secondary, transparent);
+      @include hover() {
+        background-color: lighten($bgcolor-sidebar-context, 20%);
+      }
+      &:not(:disabled):not(.disabled):active,
+      &:not(:disabled):not(.disabled).active {
+        background-color: lighten($bgcolor-sidebar-context, 34%);
+      }
+      box-shadow: none !important;
+    }
+  }
+  .private-legacy-pages-link {
+    &:hover {
+      background: $bgcolor-list-hover;
     }
-    box-shadow: none !important;
   }
 }
 
@@ -281,6 +339,7 @@ ul.pagination {
  * Popover
  */
 .popover {
+  background-color: $bgcolor-global;
   border-color: $secondary;
   .popover-header {
     color: $white;
@@ -297,6 +356,7 @@ ul.pagination {
     }
 
     &::after {
+      border-top-color: $bgcolor-global;
     }
   }
   &.bs-popover-bottom .arrow {
@@ -305,6 +365,7 @@ ul.pagination {
     }
 
     &::after {
+      border-bottom-color: $bgcolor-global;
     }
   }
   &.bs-popover-right .arrow {
@@ -313,6 +374,7 @@ ul.pagination {
     }
 
     &::after {
+      border-right-color: $bgcolor-global;
     }
   }
   &.bs-popover-left .arrow {
@@ -321,6 +383,7 @@ ul.pagination {
     }
 
     &::after {
+      border-left-color: $bgcolor-global;
     }
   }
 }
@@ -340,6 +403,7 @@ ul.pagination {
   $color-slack: #4b144c;
 
   .form-control {
+    background: $bgcolor-global;
   }
 
   .custom-control-label {
@@ -405,6 +469,7 @@ ul.pagination {
 }
 
 .page-comments-row {
+  background: $bgcolor-subnav;
 }
 
 /*
@@ -469,4 +534,5 @@ ul.pagination {
  * skeleton
  */
 .grw-skeleton {
+  background-color: lighten($bgcolor-subnav, 15%);
 }

packages/preset-themes/src/styles/theme/_apply-colors-light.scss

@@ -4,24 +4,41 @@
 @use './mixins/count-badge';
 
 // determine optional variables
+$color-list: $color-global !default;
+$bgcolor-list: $bgcolor-global !default;
+$color-list-hover: $color-global !default;
+$bgcolor-list-hover: lighten($primary, 72%) !default;
 $bgcolor-list-active: lighten($primary, 65%) !default;
 $color-list-active: color-yiq($bgcolor-list-active) !default;
+$color-table: $color-global !default;
 $bgcolor-table: null !default;
 $border-color-table: $gray-200 !default;
+$color-table-hover: $color-table !default;
 $bgcolor-table-hover: rgba(black, 0.075) !default;
+$bgcolor-sidebar-list-group: $bgcolor-list !default;
 $color-tags: $secondary !default;
 $bgcolor-tags: $gray-200 !default;
 $border-color-global: $gray-300 !default;
 $border-color-toc: $border-color-global !default;
+$color-dropdown: $color-global !default;
+$color-dropdown-link: $color-global !default;
+$color-dropdown-link-hover: $color-global !default;
 $color-dropdown-link-active: $color-reversal !default;
 $bgcolor-dropdown-link-active: $primary !default;
 
 // override bootstrap variables
 $text-muted: $gray-500;
+$table-color: $color-table;
 $table-bg: $bgcolor-table;
 $table-border-color: $border-color-table;
+$table-hover-color: $color-table-hover;
 $table-hover-bg: $bgcolor-table-hover;
 $border-color: $border-color-global;
+$dropdown-color: $color-dropdown;
+$dropdown-link-color: $color-dropdown-link;
+$dropdown-link-hover-color: $color-dropdown-link-hover;
+$dropdown-link-active-color: $color-dropdown-link-active;
+$dropdown-link-active-bg: $bgcolor-dropdown-link-active;
 
 @import './mixins/list-group';
 @import './reboot-bootstrap-text';
@@ -30,23 +47,30 @@ $border-color: $border-color-global;
 @import './reboot-bootstrap-dropdown';
 
 // List Group
+@include override-list-group-item($color-list, $bgcolor-list, $color-list-hover, $bgcolor-list-hover, $color-list-active, $bgcolor-list-active);
+
 /*
  * Form
  */
 .form-control {
+  background-color: $bgcolor-global;
 }
 
 .form-control::placeholder {
+  color: darken($bgcolor-global, 20%);
 }
 
 .form-control[disabled],
 .form-control[readonly] {
+  color: lighten($color-global, 10%);
+  background-color: darken($bgcolor-global, 5%);
 }
 
 /*
  * card
  */
 .card.card-disabled {
+  background-color: darken($bgcolor-card, 5%);
   border-color: $gray-200;
 }
 
@@ -133,9 +157,11 @@ $border-color: $border-color-global;
  * GROWI subnavigation
  */
 .grw-subnav {
+  background-color: $bgcolor-subnav;
 }
 
 .grw-subnav-fixed-container .grw-subnav {
+  background-color: rgba($bgcolor-subnav, 0.85);
 }
 
 .grw-page-editor-mode-manager {
@@ -157,6 +183,7 @@ $border-color: $border-color-global;
  */
 .grw-sidebar {
   // List
+  @include override-list-group-item($color-list, $bgcolor-sidebar-list-group, $color-list-hover, $bgcolor-list-hover, $color-list-active, $bgcolor-list-active);
   // sidebar-centent-bg
   .grw-navigation-wrap {
     // Drop a shadow on the light theme. The dark theme makes '$ bgcolor-sidebar-context' brighter than the body.
@@ -164,12 +191,22 @@ $border-color: $border-color-global;
   }
   // Pagetree
   .grw-pagetree {
+    @include override-list-group-item-for-pagetree(
+      $color-sidebar-context,
+      darken($bgcolor-sidebar-context, 5%),
+      darken($bgcolor-sidebar-context, 12%),
+      lighten($color-sidebar-context, 10%),
+      lighten($color-sidebar-context, 8%),
+      darken($bgcolor-sidebar-context, 15%),
+      darken($bgcolor-sidebar-context, 24%)
+    );
     .grw-pagetree-triangle-btn {
       @include mixins-buttons.button-outline-svg-icon-variant($gray-400, $primary);
     }
   }
   .private-legacy-pages-link {
     &:hover {
+      background: $bgcolor-list-hover;
     }
   }
 }
@@ -193,12 +230,14 @@ $border-color: $border-color-global;
   .page-list-ul {
     > li {
       > span.page-list-meta {
+        color: lighten($color-global, 10%);
       }
     }
   }
   // List group
   .list-group-item {
     .page-list-snippet {
+      color: lighten($body-color, 10%);
     }
   }
 }
@@ -208,6 +247,7 @@ $border-color: $border-color-global;
  */
 .revision-toc-content {
   ::marker {
+    color: darken($bgcolor-global, 20%);
   }
 }
 
@@ -322,6 +362,7 @@ $border-color: $border-color-global;
 }
 
 .page-comments-row {
+  background: $bgcolor-subnav;
 }
 
 /*
@@ -385,4 +426,5 @@ $border-color: $border-color-global;
  * skeleton
  */
 .grw-skeleton {
+  background-color: darken($bgcolor-subnav, 10%);
 }

packages/preset-themes/src/styles/theme/_apply-colors.scss

@@ -12,19 +12,32 @@
 $border-image-navbar: linear-gradient(to right, $gray-300 0%, $gray-300 100%) !default;
 $bgcolor-search-top-dropdown: $secondary !default;
 $bgcolor-sidebar-nav-item-active: darken($bgcolor-sidebar, 10%) !default;
+$text-shadow-sidebar-nav-item-active: 1px 1px 2px $primary !default;
 $bgcolor-inline-code: $gray-100 !default;
 $color-inline-code: darken($red, 15%) !default;
 $bordercolor-inline-code: $gray-400 !default;
 $bordercolor-nav-tabs: $gray-300 !default;
 $bordercolor-nav-tabs-hover: $gray-200 $gray-200 $bordercolor-nav-tabs !default;
 $color-nav-tabs-link-active: $gray-600 !default;
+$bordercolor-nav-tabs-active: $bordercolor-nav-tabs $bordercolor-nav-tabs $bgcolor-global !default;
 $color-btn-reload-in-sidebar: $gray-500;
 $bgcolor-keyword-highlighted: var.$grw-marker-yellow !default;
+$bgcolor-page-list-group-item-active: lighten($primary, 76%) !default;
+$color-page-list-group-item-meta: $gray-500 !default;
+$color-search-page-list-title: $color-global !default;
+$bgcolor-subnav: darken($bgcolor-global, 3%) !default;
 
 // override bootstrap variables
+$body-bg: $bgcolor-global;
+$body-color: $color-global;
+$link-color: $color-link;
+$link-hover-color: $color-link-hover;
+$input-focus-color: $color-global;
 $nav-tabs-border-color: $bordercolor-nav-tabs;
 $nav-tabs-link-hover-border-color: $bordercolor-nav-tabs-hover;
 $nav-tabs-link-active-color: $color-nav-tabs-link-active;
+$nav-tabs-link-active-bg: $bgcolor-global;
+$nav-tabs-link-active-border-color: $bordercolor-nav-tabs-active;
 $theme-colors: map-merge($theme-colors, ( primary: $primary ));
 
 @import 'reboot-bootstrap-buttons';
@@ -64,6 +77,7 @@ code:not([class^='language-']) {
     fill: $secondary;
   }
   .grw-color-mode-icon svg {
+    fill: $color-global;
   }
   .grw-color-mode-icon-muted svg {
     fill: $secondary;
@@ -77,10 +91,12 @@ code:not([class^='language-']) {
 
 // Tabs
 .nav.nav-tabs .nav-link.active {
+  color: $color-link !important;
   background: transparent;
 
   &:hover,
   &:focus {
+    color: $color-link-hover !important;
   }
 }
 
@@ -132,6 +148,10 @@ ul.pagination {
     transition: fill 0.8s ease-out;
   }
 
+  svg {
+    fill: $fillcolor-logo-mark;
+  }
+
   &:hover {
     svg {
       .group1 {
@@ -146,13 +166,16 @@ ul.pagination {
 }
 
 .grw-navbar {
+  background: $bgcolor-navbar;
   .nav-item .nav-link {
+    color: $color-link-nabvar;
   }
 
   border-image: $border-image-navbar;
   border-image-slice: 1;
 
   .grw-app-title {
+    color: $fillcolor-logo-mark;
   }
 }
 
@@ -163,11 +186,13 @@ ul.pagination {
 
   // for https://youtrack.weseek.co.jp/issue/GW-2603
   .search-typeahead {
+    background-color: rgba($bgcolor-global, 0.9);
   }
 }
 
 .grw-sidebar {
   .grw-navigation-resize-button {
+    $color-resize-button: $color-global !default;
     $bgcolor-resize-button: white !default;
     $color-resize-button-hover: $color-reversal !default;
     $bgcolor-resize-button-hover: lighten($bgcolor-resize-button, 5%) !default;
@@ -191,10 +216,13 @@ ul.pagination {
   }
   div.grw-global-navigation {
     > div {
+      background-color: $bgcolor-sidebar;
     }
   }
   div.grw-contextual-navigation {
     > div {
+      color: $color-sidebar-context;
+      background-color: $bgcolor-sidebar-context;
     }
   }
 
@@ -213,10 +241,11 @@ ul.pagination {
   .grw-sidebar-nav-primary-container {
     .btn.active {
       i {
-        text-shadow: var(--text-shadow-sidebar-nav-item-active);
+        text-shadow: $text-shadow-sidebar-nav-item-active;
       }
       // fukidashi
       &:after {
+        border-right-color: $bgcolor-sidebar-context;
       }
     }
   }
@@ -232,16 +261,20 @@ ul.pagination {
       }
 
       .custom-control-label::after {
+        background-color: $bgcolor-global;
       }
 
       .custom-control-input:not(:checked) + .custom-control-label::before {
+        color: $bgcolor-global;
       }
 
       .custom-control-input:checked + .custom-control-label::before {
+        color: $bgcolor-global;
         background-color: $primary;
         // border-color: $primary !important;
       }
       .custom-control-input:checked + .custom-control-label::after {
+        color: $bgcolor-global;
       }
     }
   }
@@ -265,7 +298,7 @@ ul.pagination {
         background-color: transparent;
 
         .icon-lock {
-          color: var(--color-link);
+          color: $color-link;
         }
 
         .grw-recent-changes-item-lower {
@@ -284,6 +317,7 @@ ul.pagination {
  * Icon
  */
 .editor-container .navbar-editor svg {
+  fill: $color-editor-icons;
 }
 
 // page preview button in link form
@@ -310,6 +344,7 @@ ul.pagination {
   }
 
   .modal-content {
+    background-color: $bgcolor-global;
   }
 
   .modal-footer {
@@ -321,10 +356,13 @@ ul.pagination {
   .nav-item {
     &:hover,
     &:focus {
+      background-color: rgba($color-link, 0.08);
     }
     .nav-link {
       -webkit-appearance: none;
+      color: $color-link;
       svg {
+        fill: $color-link;
       }
 
       // Disabled state lightens text
@@ -338,7 +376,7 @@ ul.pagination {
   }
 
   .grw-nav-slide-hr {
-    border-color: var(--color-link);
+    border-color: $color-link;
   }
 }
 
@@ -354,6 +392,8 @@ ul.pagination {
  * cards
  */
 .card.well {
+  color: $color-global;
+  background-color: $bgcolor-card;
   border-color: $light;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
 }
@@ -406,17 +446,21 @@ ul.pagination {
   }
 
   a {
+    color: $color-link-wiki;
 
     &:hover {
+      color: $color-link-wiki-hover;
     }
   }
 
   // table with handsontable modal button
   .editable-with-handsontable {
     button {
+      color: $color-link-wiki;
     }
 
     button:hover {
+      color: $color-link-wiki-hover;
     }
   }
 }
@@ -430,19 +474,26 @@ ul.pagination {
     .list-group-item {
       a {
         svg {
+          fill: $color-global;
         }
 
         @include hover() {
           svg {
+            fill: $color-global;
           }
         }
       }
 
       .page-list-meta {
+        color: $color-page-list-group-item-meta;
+        svg {
+          fill: $color-page-list-group-item-meta;
+        }
       }
 
       &.list-group-item-action {
         &.active {
+          background-color: $bgcolor-page-list-group-item-active;
           border-left-color: $primary;
         }
       }
@@ -455,16 +506,19 @@ ul.pagination {
  */
 .layout-root.editing {
   .main {
+    background-color: darken($bgcolor-global, 2%);
 
     .page-editor-editor-container {
       border-right-color: $border-color-theme;
 
       .navbar-editor {
+        background-color: $bgcolor-global; // same color with active tab
         border-bottom-color: $border-color-theme;
       }
     }
 
     .page-editor-preview-container {
+      background-color: $bgcolor-global;
     }
   }
 }
@@ -474,6 +528,8 @@ ul.pagination {
  */
 body.editing-sidebar {
   .page-editor-preview-body {
+    color: $color-sidebar-context;
+    background-color: $bgcolor-sidebar-context;
   }
 }
 
@@ -484,8 +540,10 @@ body.editing-sidebar {
   .desktop-preview,
   .tablet-preview,
   .mobile-preview {
+    background: $bgcolor-global;
   }
   .grid-edit-border-for-each-cols {
+    border: 2px solid $bgcolor-global;
   }
 }
 
@@ -501,8 +559,10 @@ body.editing-sidebar {
  * GROWI comment
  */
 .page-comment-meta .page-comment-revision svg {
+  fill: $color-link;
 
   &:hover {
+    fill: $color-link-hover;
   }
 }
 
@@ -512,13 +572,17 @@ body.editing-sidebar {
 .page-comments {
   .page-comment .page-comment-main,
   .page-comment-form .comment-form-main {
+    background-color: $bgcolor-global;
 
     &:before {
+      border-right-color: $bgcolor-global;
     }
 
     .nav.nav-tabs {
       > li > a.active {
         background: transparent;
+        border-bottom: solid 1px darken($bgcolor-global, 4%);
+        border-bottom-color: darken($bgcolor-global, 4%);
       }
     }
   }
@@ -529,8 +593,10 @@ body.editing-sidebar {
  */
 .search-result-base {
   .grw-search-page-nav {
+    background-color: $bgcolor-subnav;
   }
   .search-control {
+    background-color: $bgcolor-global;
   }
   .page-list {
     .highlighted-keyword {
@@ -551,6 +617,7 @@ mark.rbt-highlight-text {
  * GROWI page content footer
  */
 .page-content-footer {
+  background-color: darken($bgcolor-global, 2%);
   border-top-color: $border-color-theme;
 }
 
@@ -569,6 +636,7 @@ mark.rbt-highlight-text {
   #themeOptions {
     .theme-option-container.active {
       .theme-option-name {
+        color: $color-global;
       }
       a {
         background-color: $color-theme-color-box;
@@ -582,6 +650,7 @@ mark.rbt-highlight-text {
  * HackMd
  */
 .bg-box {
+  background-color: $bgcolor-global;
 }
 
 .grw-fab {

packages/preset-themes/src/styles/theme/_reboot-bootstrap-buttons.scss

@@ -1,21 +1,21 @@
 .btn-link {
-  color: var(--link-color);
+  color: $link-color;
   svg {
-    fill: var(--link-color);
+    fill: $link-color;
   }
 
   @include hover() {
-    color: var(--link-hover-color);
+    color: $link-hover-color;
     svg {
-      fill: var(--link-hover-color);
+      fill: $link-hover-color;
     }
   }
 
   &:disabled,
   &.disabled {
-    color: var(--btn-link-disabled-color);
+    color: $btn-link-disabled-color;
     svg {
-      fill: var(--btn-link-disabled-color);
+      fill: $btn-link-disabled-color;
     }
   }
 }

packages/preset-themes/src/styles/theme/_reboot-bootstrap-colors.scss

@@ -0,0 +1,60 @@
+//
+//
+// Apply partially
+//   https://github.com/twbs/bootstrap/blob/v4.5.0/scss/_reboot.scss
+//
+//
+
+// stylelint-disable at-rule-no-vendor-prefix, declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
+
+// Body
+//
+// 1. Remove the margin in all browsers.
+// 2. As a best practice, apply a default `background-color`.
+// 3. Set an explicit initial text-align value so that we can later use
+//    the `inherit` value on things like `<th>` elements.
+
+&, body {
+  color: $body-color;
+  background-color: $body-bg; // 2
+
+  svg {
+    fill: $body-color;
+  }
+}
+
+// Links
+
+a {
+  color: $link-color;
+  text-decoration: $link-decoration;
+  background-color: transparent; // Remove the gray background on active links in IE 10.
+
+  svg {
+    fill: $link-color;
+  }
+
+  @include hover() {
+    color: $link-hover-color;
+    text-decoration: $link-hover-decoration;
+
+    svg {
+      fill: $link-hover-color;
+    }
+  }
+}
+
+// And undo these styles for placeholder links/named anchors (without href).
+// It would be more straightforward to just use a[href] in previous block, but that
+// causes specificity issues in many other styles that are too complex to fix.
+// See https://github.com/twbs/bootstrap/issues/19402
+
+// a:not([href]) {
+//   color: inherit;
+//   text-decoration: none;
+
+//   @include hover() {
+//     color: inherit;
+//     text-decoration: none;
+//   }
+// }

packages/preset-themes/src/styles/theme/_reboot-bootstrap-theme-colors.scss

@@ -57,16 +57,16 @@
       border-color: $color;
     }
     .custom-control-input:checked + .custom-control-label::after {
-      color: var(--bgcolor-global);
+      color: $bgcolor-global;
     }
     .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
-      color: var(--bgcolor-global);
+      color: $bgcolor-global;
       background-color: $color;
       border-color: $color;
     }
     .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
-      color: var(--bgcolor-global);
-      background-color: var(--bgcolor-global);
+      color: $bgcolor-global;
+      background-color: $bgcolor-global;
       border-color: $input-focus-border-color;
     }
   }

packages/preset-themes/src/styles/theme/mixins/_list-group.scss

@@ -63,7 +63,7 @@
     }
     .grw-pagetree-title-anchor {
       .grw-sidebar-text-muted {
-        // color: rgba(desaturate($color, 50%), 0.6);
+        color: rgba(desaturate($color, 50%), 0.6);
       }
     }
   }