fix apply-colors-dark

packages/app/src/pages/_app.page.tsx

@@ -19,8 +19,9 @@ import { CommonProps } from './utils/commons';
 import { registerTransformerForObjectId } from './utils/objectid-transformer';
 
 import '~/styles/style-app.scss';
-import '~/styles/theme/_apply-colors.scss';
 import '~/styles/theme/_apply-colors-light.scss';
+import '~/styles/theme/_apply-colors-dark.scss';
+import '~/styles/theme/_apply-colors.scss';
 
 const isDev = process.env.NODE_ENV === 'development';
 

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

@@ -6,553 +6,576 @@
 @use './hsl-functions' as hsl;
 
 // 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-active: var(--color-list-active,var(--color-reversal));
-$bgcolor-list-hover: var(--bgcolor-list-hover,var(--bgcolor-global));
-$bgcolor-list-active: var(--bgcolor-list-active,var(--primary));
-$bgcolor-subnav: var(--bgcolor-subnav);
-$color-table: var(--color-table,white);
-$bgcolor-table: var(--bgcolor-table,#343a40);
-$border-color-table: var(--border-color-table,hsl.lighten(var(--bgcolor-table),7.5%),lighten(#343a40, 7.5%));
-$color-table-hover: var(--color-table-hover,rgba(white, 0.075));
-$bgcolor-table-hover: var(--bgcolor-table-hover,hsl.lighten(var(--bgcolor-table),7.5%),lighten(#343a40, 7.5%));
-$bgcolor-sidebar-list-group: var(--bgcolor-sidebar-list-group,var(--bgcolor-list));
-$color-tags: var(--color-tags,#949494);
-$bgcolor-tags: var(--bgcolor-tags,var(--dark));
-$border-color-global: var(--border-color-global,#{$gray-500});
-$border-color-toc: var(--border-color-toc,$border-color-global);
-$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-link-hover: var(--color-dropdown-link-hover,var(--light));
-$bgcolor-dropdown-link-hover: var(--bgcolor-dropdown-link-hover,var(--primary));
-$color-dropdown-link-active: var(--color-dropdown-link-active,var(--light));
-$bgcolor-dropdown-link-active: var(--bgcolor-dropdown-link-active,var(--primary));
-
-// 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';
-@import './reboot-bootstrap-border-colors';
-@import './reboot-bootstrap-tables';
-@import './reboot-bootstrap-dropdown';
-
-// List Group
-@include override-list-group-item(
-  $color-list,
-  $bgcolor-sidebar-list-group,
-  $color-list-hover,
-  $bgcolor-list-hover,
-  $color-list-active,
-  $bgcolor-list-active
-);
-/*
-  * Form
-  */
-input.form-control,
-select.form-control,
-select.custom-select,
-textarea.form-control {
-  color: var(--color-global);
-  background-color: hsl.darken(var(--bgcolor-global), 5%);
-  border-color: $border-color-global;
-  &:focus {
-    background-color: var(--bgcolor-global);
+:root[data-theme='dark'] {
+  $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-active: var(--color-list-active,var(--color-reversal));
+  $bgcolor-list-hover: var(--bgcolor-list-hover,var(--bgcolor-global));
+  $bgcolor-list-active: var(--bgcolor-list-active,var(--primary));
+  $bgcolor-subnav: var(--bgcolor-subnav);
+  $color-table: var(--color-table,white);
+  $bgcolor-table: var(--bgcolor-table,#343a40);
+  $border-color-table: var(--border-color-table,hsl.lighten(var(--bgcolor-table),7.5%),lighten(#343a40, 7.5%));
+  $color-table-hover: var(--color-table-hover,rgba(white, 0.075));
+  $bgcolor-table-hover: var(--bgcolor-table-hover,hsl.lighten(var(--bgcolor-table),7.5%),lighten(#343a40, 7.5%));
+  $bgcolor-sidebar-list-group: var(--bgcolor-sidebar-list-group,var(--bgcolor-list));
+  $color-tags: var(--color-tags,#949494);
+  $bgcolor-tags: var(--bgcolor-tags,var(--dark));
+  $border-color-global: var(--border-color-global,#{$gray-500});
+  $border-color-toc: var(--border-color-toc,#{$border-color-global});
+  $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-link-hover: var(--color-dropdown-link-hover,var(--light));
+  $bgcolor-dropdown-link-hover: var(--bgcolor-dropdown-link-hover,var(--primary));
+  $color-dropdown-link-active: var(--color-dropdown-link-active,var(--light));
+  $bgcolor-dropdown-link-active: var(--bgcolor-dropdown-link-active,var(--primary));
+
+  // 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';
+  @import './reboot-bootstrap-border-colors';
+  @import './reboot-bootstrap-tables';
+  @import './reboot-bootstrap-dropdown';
+
+  // List Group
+  @include override-list-group-item(
+    $color-list,
+    $bgcolor-sidebar-list-group,
+    $color-list-hover,
+    $bgcolor-list-hover,
+    $color-list-active,
+    $bgcolor-list-active
+  );
+  /*
+    * Form
+    */
+  input.form-control,
+  select.form-control,
+  select.custom-select,
+  textarea.form-control {
+    color: var(--color-global);
+    background-color: hsl.darken(var(--bgcolor-global), 5%);
+    border-color: $border-color-global;
+    &:focus {
+      background-color: var(--bgcolor-global);
+    }
+    // FIXME: accent color
+    // border: 1px solid darken($border, 30%);
   }
-  // FIXME: accent color
-  // border: 1px solid darken($border, 30%);
-}
 
-.form-control[disabled],
-.form-control[readonly] {
-  color: hsl.lighten(var(--color-global),10%);
-  background-color: hsl.lighten(var(--color-global),5%);
-}
+  .form-control[disabled],
+  .form-control[readonly] {
+    color: hsl.lighten(var(--color-global),10%);
+    background-color: hsl.lighten(var(--color-global),5%);
+  }
 
-.input-group > .input-group-prepend > .input-group-text {
-  color: theme-color('light');
-  background-color: theme-color('secondary');
-  border: 1px solid theme-color('secondary');
-  border-right: none;
-  &.text-muted {
-    color: theme-color('light') !important;
+  .input-group > .input-group-prepend > .input-group-text {
+    color: theme-color('light');
+    background-color: theme-color('secondary');
+    border: 1px solid theme-color('secondary');
+    border-right: none;
+    &.text-muted {
+      color: theme-color('light') !important;
+    }
   }
-}
 
-.input-group input {
-  border-color: $border-color-global;
-}
+  .input-group input {
+    border-color: $border-color-global;
+  }
 
-label.custom-control-label::before {
-  background-color: hsl.darken(var(--bgcolor-global),5%);
-}
+  label.custom-control-label::before {
+    background-color: hsl.darken(var(--bgcolor-global),5%);
+  }
 
-/*
- * Table
- */
-.table {
-  @extend .table-dark;
-}
+  /*
+  * Table
+  */
+  .table {
+    @extend .table-dark;
+  }
 
-/*
- * Card
- */
-// .card:not([class*='bg-']):not(.well):not(.card-disabled) {
-//   @extend .bg-dark;
-// }
+  /*
+  * Card
+  */
+  // .card:not([class*='bg-']):not(.well):not(.card-disabled) {
+  //   @extend .bg-dark;
+  // }
 
-// [TODO] GW-3219 modify common color of well in dark theme, then remove below css.
-.card.well {
-  border-color: var(--secondary);
-}
+  // [TODO] GW-3219 modify common color of well in dark theme, then remove below css.
+  .card.well {
+    border-color: var(--secondary);
+  }
 
-.card.card-disabled {
-  background-color: lighten($dark, 10%);
-  border-color: var(--secondary);
-}
+  .card.card-disabled {
+    background-color: lighten($dark, 10%);
+    border-color: var(--secondary);
+  }
 
-/*
- * Pagination
- */
-ul.pagination {
-  li.page-item {
-    button.page-link {
-      @include button-variant($dark, $dark);
-      @include mixins-buttons.button-svg-icon-variant($dark, $dark);
-      box-shadow: none !important;
+  /*
+  * Pagination
+  */
+  ul.pagination {
+    li.page-item.disabled {
+      button.page-link {
+        color: $gray-400;
+      }
+    }
+    li.page-item.active {
+      button.page-link {
+        color: hsl.contrast(var(--primary));
+        background-color: var(--primary);
+        &:hover,
+        &:focus {
+          color: hsl.contrast(var(--primary));
+          background-color: var(--primary);
+        }
+      }
+    }
+    li.page-item {
+      button.page-link {
+        @include button-variant($dark, $dark);
+        @include mixins-buttons.button-svg-icon-variant($dark, $dark);
+        color: var(--primary);
+        border-color: var(--secondary);
+        box-shadow: none !important;
+      }
     }
   }
-}
 
-/*
- * GROWI Login form
- */
-.nologin {
-  // background color
-  $color-gradient: #3c465c;
-  background: linear-gradient(45deg, darken($color-gradient, 30%) 0%, hsla(340, 100%, 55%, 0) 70%),
-    linear-gradient(135deg, darken(var.$growi-green, 30%) 10%, hsla(225, 95%, 50%, 0) 70%),
-    linear-gradient(225deg, darken(var.$growi-blue, 20%) 10%, hsla(140, 90%, 50%, 0) 80%),
-    linear-gradient(315deg, darken($color-gradient, 25%) 100%, hsla(35, 95%, 55%, 0) 70%);
-
-  .noLogin-header {
-    background-color: rgba(black, 0.5);
+  /*
+  * GROWI Login form
+  */
+  .nologin {
+    // background color
+    $color-gradient: #3c465c;
+    background: linear-gradient(45deg, darken($color-gradient, 30%) 0%, hsla(340, 100%, 55%, 0) 70%),
+      linear-gradient(135deg, darken(var.$growi-green, 30%) 10%, hsla(225, 95%, 50%, 0) 70%),
+      linear-gradient(225deg, darken(var.$growi-blue, 20%) 10%, hsla(140, 90%, 50%, 0) 80%),
+      linear-gradient(315deg, darken($color-gradient, 25%) 100%, hsla(35, 95%, 55%, 0) 70%);
+
+    .noLogin-header {
+      background-color: rgba(black, 0.5);
+
+      .logo {
+        background-color: rgba(white, 0);
+        fill: rgba(white, 0.5);
+      }
 
-    .logo {
-      background-color: rgba(white, 0);
-      fill: rgba(white, 0.5);
+      h1 {
+        color: rgba(white, 0.5);
+      }
     }
 
-    h1 {
-      color: rgba(white, 0.5);
+    .noLogin-dialog {
+      background-color: rgba(black, 0.5);
     }
-  }
 
-  .noLogin-dialog {
-    background-color: rgba(black, 0.5);
-  }
+    .input-group {
+      .input-group-text {
+        color: darken(white, 30%);
+        background-color: rgba($gray-700, 0.7);
+      }
 
-  .input-group {
-    .input-group-text {
-      color: darken(white, 30%);
-      background-color: rgba($gray-700, 0.7);
-    }
+      .form-control {
+        color: white;
+        background-color: rgba(#505050, 0.7);
+        box-shadow: unset;
 
-    .form-control {
-      color: white;
-      background-color: rgba(#505050, 0.7);
-      box-shadow: unset;
+        &::placeholder {
+          color: darken(white, 30%);
+        }
+      }
+    }
 
-      &::placeholder {
-        color: darken(white, 30%);
+    .btn-fill {
+      .btn-label {
+        color: $gray-300;
+      }
+      .btn-label-text {
+        color: $gray-400;
       }
     }
-  }
 
-  .btn-fill {
-    .btn-label {
-      color: $gray-300;
+    .grw-external-auth-form {
+      border-color: gray !important;
     }
-    .btn-label-text {
-      color: $gray-400;
+
+    .btn-external-auth-tab {
+      @include button-variant($dark, $dark);
+      @include mixins-buttons.button-svg-icon-variant($dark, $dark);
+      box-shadow: none !important;
     }
-  }
 
-  .grw-external-auth-form {
-    border-color: gray !important;
+    // footer link text
+    .link-growi-org {
+      color: rgba(white, 0.4);
+
+      &:hover,
+      &.focus {
+        color: rgba(white, 0.7);
+
+        .growi {
+          color: darken(var.$growi-green, 5%);
+        }
+
+        .org {
+          color: darken(var.$growi-blue, 5%);
+        }
+      }
+    }
   }
 
-  .btn-external-auth-tab {
+  /*
+  * GROWI subnavigation
+  */
+  .grw-drawer-toggler {
     @include button-variant($dark, $dark);
     @include mixins-buttons.button-svg-icon-variant($dark, $dark);
+    color: $gray-400;
     box-shadow: none !important;
-  }
-
-  // footer link text
-  .link-growi-org {
-    color: rgba(white, 0.4);
-
-    &:hover,
-    &.focus {
-      color: rgba(white, 0.7);
 
-      .growi {
-        color: darken(var.$growi-green, 5%);
-      }
+  }
 
-      .org {
-        color: darken(var.$growi-blue, 5%);
+  /*
+  * GROWI page list
+  */
+  .page-list {
+    .page-list-ul {
+      > li {
+        > span.page-list-meta {
+          color: hsl.darken(var(--color-global),10%);
+        }
       }
     }
-  }
-}
-
-/*
- * GROWI subnavigation
- */
-.grw-drawer-toggler {
-  @include button-variant($dark, $dark);
-  @include mixins-buttons.button-svg-icon-variant($dark, $dark);
-  color: #{$gray-400};
-  box-shadow: none !important;
 
-}
-
-/*
- * GROWI page list
- */
-.page-list {
-  .page-list-ul {
-    > li {
-      > span.page-list-meta {
+    // List group
+    .list-group-item {
+      &.active {
+        background-color: hsl.lighten(var(--bgcolor-global),10%) !important;
+      }
+      &.list-group-item-action:hover {
+        background-color: hsl.lighten(var(--bgcolor-global),10%) !important;
+      }
+      .page-list-snippet {
         color: hsl.darken(var(--color-global),10%);
       }
     }
   }
 
-  // List group
-  .list-group-item {
-    &.active {
-      background-color: hsl.darken(var(--color-global),10%);
-    }
-    .list-group-item-action:hover {
-      background-color: var(--bgcolor-list-hover);
-    }
-    .page-list-snippet {
-      color: hsl.darken(var(--color-global),10%);
+  /*
+  * GROWI ToC
+  */
+  .revision-toc-content {
+    ::marker {
+      color: hsl.lighten(var(--color-global),30%);
     }
   }
-}
 
-/*
- * GROWI ToC
- */
-.revision-toc-content {
-  ::marker {
-    color: hsl.lighten(var(--color-global),30%);
+  /*
+  * GROWI subnavigation
+  */
+  .grw-subnav {
+    background-color: var(--bgcolor-subnav);
   }
-}
-
-/*
- * GROWI subnavigation
- */
-.grw-subnav {
-  background-color: var(--bgcolor-subnav);
-}
 
-.grw-subnav-fixed-container .grw-subnav {
-  background-color: hsl.alpha(var(--bgcolor-subnav),15%);
-}
+  .grw-subnav-fixed-container .grw-subnav {
+    background-color: hsl.alpha(var(--bgcolor-subnav),15%);
+  }
 
-.grw-page-editor-mode-manager {
-  .btn-outline-primary {
-    &:hover {
-      color: var(--primary);
-      background-color: $gray-700;
+  .grw-page-editor-mode-manager {
+    .btn-outline-primary {
+      &:hover {
+        color: var(--primary);
+        background-color: $gray-700;
+      }
     }
   }
-}
 
-// Search drop down
-#search-typeahead-asynctypeahead {
-  background-color: var(--bgcolor-global);
-  .table {
-    background-color: transparent;
+  // Search drop down
+  #search-typeahead-asynctypeahead {
+    background-color: var(--bgcolor-global);
+    .table {
+      background-color: transparent;
+    }
   }
-}
 
-/*
- * GROWI Sidebar
- */
-.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
-  );
-  // Pagetree
-  .grw-pagetree {
-    @include override-list-group-item-for-pagetree(
-      var(--color-sidebar-context),
-      hsl.lighten(var(--bgcolor-sidebar-context),8%),
-      hsl.lighten(var(--bgcolor-sidebar-context),15%),
-      hsl.darken(var(--color-sidebar-context),15%),
-      hsl.darken(var(--color-sidebar-context),10%),
-      hsl.lighten(var(--bgcolor-sidebar-context),18%),
-      hsl.lighten(var(--bgcolor-sidebar-context),24%)
+  /*
+  * GROWI Sidebar
+  */
+  .grw-sidebar {
+    --gray-500: hsl(var(--gray-500-hs),var(--gray-500-l));
+    --gray-500-hs: 210,13%;
+    --gray-500-l: 61%;
+    // List
+    @include override-list-group-item(
+      $color-list,
+      $bgcolor-sidebar-list-group,
+      $color-list-hover,
+      $bgcolor-list-hover,
+      $color-list-active,
+      $bgcolor-list-active
     );
-    .grw-pagetree-triangle-btn {
-      @include mixins-buttons.button-outline-svg-icon-variant(var(--secondary), $gray-200);
-    }
-    .btn-page-item-control {
-      @include hsl-button.button-outline-variant($gray-500, $gray-500, var(--secondary), transparent);
-      @include hover() {
-        background-color: hsl.lighten(var(--bgcolor-sidebar-context),20%);
+    // Pagetree
+    .grw-pagetree {
+      @include override-list-group-item-for-pagetree(
+        var(--color-sidebar-context),
+        hsl.lighten(var(--bgcolor-sidebar-context),8%),
+        hsl.lighten(var(--bgcolor-sidebar-context),15%),
+        hsl.darken(var(--color-sidebar-context),15%),
+        hsl.darken(var(--color-sidebar-context),10%),
+        hsl.lighten(var(--bgcolor-sidebar-context),18%),
+        hsl.lighten(var(--bgcolor-sidebar-context),24%)
+      );
+      .grw-pagetree-triangle-btn {
+        @include mixins-buttons.button-outline-svg-icon-variant(var(--secondary), $gray-200);
       }
-      &:not(:disabled):not(.disabled):active,
-      &:not(:disabled):not(.disabled).active {
-        background-color: hsl.lighten(var(--bgcolor-sidebar-context),34%);
+      .btn-page-item-control {
+        @include hsl-button.button-outline-variant(var(--gray-500), var(--gray-500), var(--secondary), transparent);
+        @include hover() {
+          background-color: hsl.lighten(var(--bgcolor-sidebar-context),20%);
+        }
+        &:not(:disabled):not(.disabled):active,
+        &:not(:disabled):not(.disabled).active {
+          background-color: hsl.lighten(var(--bgcolor-sidebar-context),34%);
+        }
+        box-shadow: none !important;
       }
-      box-shadow: none !important;
     }
-  }
-  .private-legacy-pages-link {
-    &:hover {
-      background: var(--bgcolor-list-hover);
+    .private-legacy-pages-link {
+      &:hover {
+        background: var(--bgcolor-list-hover);
+      }
     }
   }
-}
 
-.btn.btn-page-item-control {
-  @include hsl-button.button-outline-variant($gray-500, $gray-500, var(--secondary), transparent);
-  @include hover() {
-    background-color: $gray-700;
-  }
-  &:not(:disabled):not(.disabled):active,
-  &:not(:disabled):not(.disabled).active {
-    color: $gray-200;
-    background-color: $gray-600;
+  .btn.btn-page-item-control {
+    @include hsl-button.button-outline-variant(var(--gray-500), var(--gray-500), var(--secondary), transparent);
+    @include hover() {
+      background-color: $gray-700;
+    }
+    &:not(:disabled):not(.disabled):active,
+    &:not(:disabled):not(.disabled).active {
+      color: $gray-200;
+      background-color: $gray-600;
+    }
+    box-shadow: none !important;
   }
-  box-shadow: none !important;
-}
 
-/*
- * Popover
- */
-.popover {
-  background-color: var(--bgcolor-global);
-  border-color: var(--secondary);
-  .popover-header {
-    color: white;
-    background-color: var(--secondary);
+  /*
+  * Popover
+  */
+  .popover {
+    background-color: var(--bgcolor-global);
     border-color: var(--secondary);
-  }
-  .popover-body {
-    color: inherit;
-  }
-
-  &.bs-popover-top .arrow {
-    &::before {
-      border-top-color: var(--secondary);
+    .popover-header {
+      color: white;
+      background-color: var(--secondary);
+      border-color: var(--secondary);
     }
-
-    &::after {
-      border-top-color: var(--bgcolor-global);
+    .popover-body {
+      color: inherit;
     }
-  }
-  &.bs-popover-bottom .arrow {
-    &::before {
-      border-bottom-color: var(--secondary);
+
+    &.bs-popover-top .arrow {
+      &::before {
+        border-top-color: var(--secondary);
+      }
+
+      &::after {
+        border-top-color: var(--bgcolor-global);
+      }
     }
+    &.bs-popover-bottom .arrow {
+      &::before {
+        border-bottom-color: var(--secondary);
+      }
 
-    &::after {
-      border-bottom-color: var(--bgcolor-global);
+      &::after {
+        border-bottom-color: var(--bgcolor-global);
+      }
     }
-  }
-  &.bs-popover-right .arrow {
-    &::before {
-      border-right-color: var(--secondary);
+    &.bs-popover-right .arrow {
+      &::before {
+        border-right-color: var(--secondary);
+      }
+
+      &::after {
+        border-right-color: var(--bgcolor-global);
+      }
     }
+    &.bs-popover-left .arrow {
+      &::before {
+        border-left-color: var(--secondary);
+      }
 
-    &::after {
-      border-right-color: var(--bgcolor-global);
+      &::after {
+        border-left-color: var(--bgcolor-global);
+      }
     }
   }
-  &.bs-popover-left .arrow {
-    &::before {
-      border-left-color: var(--secondary);
-    }
 
-    &::after {
-      border-left-color: var(--bgcolor-global);
-    }
+  /*
+  * GROWI Grid Edit Modal
+  */
+  .grw-grid-edit-preview {
+    background: $gray-900;
   }
-}
 
-/*
- * GROWI Grid Edit Modal
- */
-.grw-grid-edit-preview {
-  background: $gray-900;
-}
+  /*
+  * Slack
+  */
+  .grw-slack-notification {
+    background-color: transparent;
+    $color-slack: #4b144c;
 
-/*
- * Slack
- */
-.grw-slack-notification {
-  background-color: transparent;
-  $color-slack: #4b144c;
+    .form-control {
+      background: var(--bgcolor-global);
+    }
 
-  .form-control {
-    background: var(--bgcolor-global);
-  }
+    .custom-control-label {
+      &::before {
+        background-color: var(--secondary);
+        border-color: transparent;
+      }
+      &::after {
+        background-color: darken($color-slack, 5%);
+        background-image: url(/images/icons/slack/slack-logo-dark-off.svg);
+      }
+    }
 
-  .custom-control-label {
-    &::before {
-      background-color: var(--secondary);
-      border-color: transparent;
+    .custom-control-input:checked ~ .custom-control-label {
+      &::before {
+        background-color: lighten($color-slack, 10%);
+      }
+      &::after {
+        background-color: darken($color-slack, 5%);
+        background-image: url(/images/icons/slack/slack-logo-dark-on.svg);
+      }
     }
-    &::after {
-      background-color: darken($color-slack, 5%);
-      background-image: url(/images/icons/slack/slack-logo-dark-off.svg);
+    .grw-slack-logo svg {
+      fill: #dd80de;
     }
-  }
 
-  .custom-control-input:checked ~ .custom-control-label {
-    &::before {
-      background-color: lighten($color-slack, 10%);
+    .grw-btn-slack {
+      background-color: black;
+      &:focus,
+      &:hover {
+        background-color: black;
+      }
     }
-    &::after {
-      background-color: darken($color-slack, 5%);
-      background-image: url(/images/icons/slack/slack-logo-dark-on.svg);
+
+    .grw-btn-slack-triangle {
+      color: var(--secondary);
     }
   }
-  .grw-slack-logo svg {
-    fill: #dd80de;
+
+  /*
+  * GROWI HandsontableModal
+  */
+  .grw-hot-modal-navbar {
+    background-color: var(--dark);
   }
 
-  .grw-btn-slack {
-    background-color: black;
-    &:focus,
-    &:hover {
-      background-color: black;
+  .wiki {
+    h1 {
+      border-color: hsl.lighten(var(--border-color-theme),10%);
+    }
+    h2 {
+      border-color: var(--border-color-theme);
     }
   }
 
-  .grw-btn-slack-triangle {
-    color: var(--secondary);
+  /*
+  * GROWI comment form
+  */
+  .comment-form {
+    #slack-mark-black {
+      display: none;
+    }
   }
-}
-
-/*
- * GROWI HandsontableModal
- */
-.grw-hot-modal-navbar {
-  background-color: var(--dark);
-}
 
-.wiki {
-  h1 {
-    border-color: hsl.lighten(var(--border-color-theme),10%);
+  .page-comments-row {
+    background: var(--bgcolor-subnav);
   }
-  h2 {
-    border-color: var(--border-color-theme);
-  }
-}
 
-/*
- * GROWI comment form
- */
-.comment-form {
-  #slack-mark-black {
-    display: none;
+  /*
+  * GROWI tags
+  */
+  .grw-tag-labels {
+    .grw-tag-label {
+      color: $color-tags;
+      background-color: $bgcolor-tags;
+    }
   }
-}
-
-.page-comments-row {
-  background: var(--bgcolor-subnav);
-}
 
-/*
- * GROWI tags
- */
-.grw-tag-labels {
-  .grw-tag-label {
-    color: $color-tags;
-    background-color: $bgcolor-tags;
+  /*
+  * GROWI popular tags
+  */
+  .grw-popular-tag-labels {
+    .grw-tag-label {
+      color: $color-tags;
+      background-color: $bgcolor-tags;
+    }
   }
-}
 
-/*
- * GROWI popular tags
- */
-.grw-popular-tag-labels {
-  .grw-tag-label {
-    color: $color-tags;
-    background-color: $bgcolor-tags;
+  /*
+  * admin settings
+  */
+  .admin-setting-header {
+    border-color: $border-color-global;
   }
-}
 
-/*
- * admin settings
- */
-.admin-setting-header {
-  border-color: $border-color-global;
-}
+  /*
+  * grw-side-contents
+  */
+  .grw-side-contents-sticky-container {
+    .grw-count-badge {
+      @include count-badge.count-badge($gray-400, $gray-700);
+    }
 
-/*
-* grw-side-contents
-*/
-.grw-side-contents-sticky-container {
-  .grw-count-badge {
-    @include count-badge.count-badge($gray-400, $gray-700);
-  }
+    .grw-border-vr {
+      border-color: $border-color-toc;
+    }
 
-  .grw-border-vr {
-    border-color: $border-color-toc;
+    .revision-toc {
+      border-color: $border-color-toc;
+    }
   }
 
-  .revision-toc {
-    border-color: $border-color-toc;
+  /*
+  * drawio
+  */
+  .drawio-viewer {
+    border-color: $border-color-global;
   }
-}
-
-/*
- * drawio
- */
-.drawio-viewer {
-  border-color: $border-color-global;
-}
 
-/*
- * modal
- */
-.grw-modal-head {
-  border-color: $border-color-global;
-}
+  /*
+  * modal
+  */
+  .grw-modal-head {
+    border-color: $border-color-global;
+  }
 
-/*
- * skeleton
- */
-.grw-skeleton {
+  /*
+  * skeleton
+  */
+  .grw-skeleton {
+  }
 }

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

@@ -6,450 +6,457 @@
 @use './hsl-functions' as hsl;
 
 // 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));
-$bgcolor-list-hover: var(--bgcolor-list-hover,var(--bgcolor-global));
-$bgcolor-list-active: var(--bgcolor-list-active,var(--primary-65));
-$color-list-active: var(--color-list-active,#{hsl.contrast(var(--primary-65))});
-$color-table: var(--color-table,var(--color-global));
-$bgcolor-table: var(--bgcolor-table,null);
-$border-color-table: var(--border-color-table,#{$gray-200});
-$color-table-hover: var(--color-table-hover,var(--color-table));
-$bgcolor-table-hover: var(--bgcolor-table-hover,rgba(black, 0.075));
-$bgcolor-sidebar-list-group: var(--bgcolor-sidebar-list-group,var(--bgcolor-list));
-$color-tags: var(--color-tags,var(--secondary));
-$bgcolor-tags: var(--bgcolor-tags,#{$gray-200});
-$border-color-global: var(--border-color-global,#{$gray-300});
-$border-color-toc: var(--border-color-toc,#{$gray-300});
-$color-dropdown: var(--color-dropdown,var(--color-global));
-$bgcolor-dropdown: var(--color-dropdown,var(--bgcolor-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-dropdown-link-active,var(--color-reversal));
-$bgcolor-dropdown-link-hover: var(--bgcolor-dropdown-link-hover,hsl.lighten(var(--bgcolor-global),15%));
-$bgcolor-dropdown-link-active: var(--bgcolor-dropdown-link-active,var(--primary));
-
-
-// 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';
-@import './reboot-bootstrap-border-colors';
-@import './reboot-bootstrap-tables';
-@import './reboot-bootstrap-dropdown';
-
-// List Group
-@include override-list-group-item(
-  $color-list,
-  $bgcolor-sidebar-list-group,
-  $color-list-hover,
-  $bgcolor-list-hover,
-  $color-list-active,
-  $bgcolor-list-active
-);
-/*
- * Form
- */
-.form-control {
-  background-color: var(--bgcolor-global);
-}
+:root[data-theme='light'] {
+  $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));
+  $bgcolor-list-hover: var(--bgcolor-list-hover,var(--bgcolor-global));
+  $bgcolor-list-active: var(--bgcolor-list-active,hsl.lighten(var(--primary),65%));
+  $color-list-active: var(--color-list-active,hsl(var(--primary-hs), clamp(10%, (100% - var(--primary-l)  + 65% - 51%) * 1000, 95%)));
+  $color-table: var(--color-table,var(--color-global));
+  $bgcolor-table: var(--bgcolor-table,null);
+  $border-color-table: var(--border-color-table,#{$gray-200});
+  $color-table-hover: var(--color-table-hover,var(--color-table));
+  $bgcolor-table-hover: var(--bgcolor-table-hover,rgba(black, 0.075));
+  $bgcolor-sidebar-list-group: var(--bgcolor-sidebar-list-group,var(--bgcolor-list));
+  $color-tags: var(--color-tags,var(--secondary));
+  $bgcolor-tags: var(--bgcolor-tags,#{$gray-200});
+  $border-color-global: var(--border-color-global,#{$gray-300});
+  $border-color-toc: var(--border-color-toc,#{$gray-300});
+  $color-dropdown: var(--color-dropdown,var(--color-global));
+  $bgcolor-dropdown: var(--color-dropdown,var(--bgcolor-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-dropdown-link-active,var(--color-reversal));
+  $bgcolor-dropdown-link-hover: var(--bgcolor-dropdown-link-hover,hsl.lighten(var(--bgcolor-global),15%));
+  $bgcolor-dropdown-link-active: var(--bgcolor-dropdown-link-active,var(--primary));
+
+
+  // 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';
+  @import './reboot-bootstrap-border-colors';
+  @import './reboot-bootstrap-tables';
+  @import './reboot-bootstrap-dropdown';
+
+  // List Group
+  @include override-list-group-item(
+    $color-list,
+    $bgcolor-sidebar-list-group,
+    $color-list-hover,
+    $bgcolor-list-hover,
+    $color-list-active,
+    $bgcolor-list-active
+  );
+  /*
+  * Form
+  */
+  .form-control {
+    background-color: var(--bgcolor-global);
+  }
 
-.form-control::placeholder {
-  color: #{hsl.darken(var(--bgcolor-global), 20%)};
-}
+  .form-control::placeholder {
+    color: hsl.darken(var(--bgcolor-global), 20%);
+  }
 
-.form-control[disabled],
-.form-control[readonly] {
-  color: #{hsl.lighten(var(--color-global),10%)};
-  background-color: #{hsl.darken(var(--color-global),5%)};
-}
+  .form-control[disabled],
+  .form-control[readonly] {
+    color: hsl.lighten(var(--color-global),10%);
+    background-color: hsl.darken(var(--color-global),5%);
+  }
 
-/*
- * card
- */
-.card.card-disabled {
-  background-color: var(--background-color);
-  border-color: $gray-200;
-}
+  /*
+  * card
+  */
+  .card.card-disabled {
+    background-color: var(--background-color);
+    border-color: $gray-200;
+  }
 
-/*
- * GROWI Login form
- */
-.nologin {
-  // background color
-  --color-gradient: #3e4d6c;
-  background: linear-gradient(45deg, #{hsl.darken(var(--color-gradient), 30%)} 0%, hsla(340, 100%, 55%, 0) 70%),
-    linear-gradient(135deg, #{var.$growi-green} 10%, hsla(225, 95%, 50%, 0) 70%), linear-gradient(225deg, #{var.$growi-blue} 10%, hsla(140, 90%, 50%, 0) 80%),
-    linear-gradient(315deg, #{hsl.darken(var(--color-gradient), 25%)} 100%, hsla(35, 95%, 55%, 0) 70%);
+  /*
+  * GROWI Login form
+  */
+  .nologin {
+    // background color
+    --color-gradient: #3e4d6c;
+    background: linear-gradient(45deg, hsl.darken(var(--color-gradient), 30%) 0%, hsla(340, 100%, 55%, 0) 70%),
+      linear-gradient(135deg, var.$growi-green 10%, hsla(225, 95%, 50%, 0) 70%), linear-gradient(225deg, var.$growi-blue 10%, hsla(140, 90%, 50%, 0) 80%),
+      linear-gradient(315deg, hsl.darken(var(--color-gradient), 25%) 100%, hsla(35, 95%, 55%, 0) 70%);
 
-  .noLogin-header {
-    background-color: rgba(white, 0.5);
+    .noLogin-header {
+      background-color: rgba(white, 0.5);
 
-    .logo {
-      background-color: rgba(black, 0);
-      fill: rgba(black, 0.5);
-    }
+      .logo {
+        background-color: rgba(black, 0);
+        fill: rgba(black, 0.5);
+      }
 
-    h1 {
-      color: rgba(black, 0.5);
+      h1 {
+        color: rgba(black, 0.5);
+      }
     }
-  }
 
-  .noLogin-dialog {
-    background-color: rgba(white, 0.5);
-  }
+    .noLogin-dialog {
+      background-color: rgba(white, 0.5);
+    }
 
-  .dropdown-with-icon {
-    .dropdown-toggle {
-      color: white;
-      background-color: rgba($gray-600, 0.7);
-      box-shadow: unset;
-      &:focus {
+    .dropdown-with-icon {
+      .dropdown-toggle {
         color: white;
         background-color: rgba($gray-600, 0.7);
+        box-shadow: unset;
+        &:focus {
+          color: white;
+          background-color: rgba($gray-600, 0.7);
+        }
+      }
+      i {
+        color: darken(white, 30%);
+        background-color: rgba($gray-700, 0.7);
       }
     }
-    i {
-      color: darken(white, 30%);
-      background-color: rgba($gray-700, 0.7);
-    }
-  }
 
-  .input-group {
-    .input-group-text {
-      color: darken(white, 30%);
-      background-color: rgba($gray-700, 0.7);
-    }
+    .input-group {
+      .input-group-text {
+        color: darken(white, 30%);
+        background-color: rgba($gray-700, 0.7);
+      }
 
-    .form-control {
-      color: white;
-      background-color: rgba($gray-600, 0.7);
-      box-shadow: unset;
+      .form-control {
+        color: white;
+        background-color: rgba($gray-600, 0.7);
+        box-shadow: unset;
 
-      &::placeholder {
-        color: darken(white, 30%);
+        &::placeholder {
+          color: darken(white, 30%);
+        }
       }
     }
-  }
 
-  // footer link text
-  .link-growi-org {
-    color: rgba(black, 0.4);
+    // footer link text
+    .link-growi-org {
+      color: rgba(black, 0.4);
 
-    &:hover,
-    &.focus {
-      color: black;
+      &:hover,
+      &.focus {
+        color: black;
 
-      .growi {
-        color: darken(var.$growi-green, 20%);
-      }
+        .growi {
+          color: darken(var.$growi-green, 20%);
+        }
 
-      .org {
-        color: darken(var.$growi-blue, 15%);
+        .org {
+          color: darken(var.$growi-blue, 15%);
+        }
       }
     }
   }
-}
 
-/*
- * GROWI subnavigation
- */
-.grw-subnav {
-  background-color: var(--bgcolor-subnav);
-}
+  /*
+  * GROWI subnavigation
+  */
+  .grw-subnav {
+    background-color: var(--bgcolor-subnav);
+  }
 
-.grw-subnav-fixed-container .grw-subnav {
-  background-color: #{hsl.alpha(var(--bgcolor-subnav),15%)};
-}
+  .grw-subnav-fixed-container .grw-subnav {
+    background-color: hsl.alpha(var(--bgcolor-subnav),15%);
+  }
 
-.grw-page-editor-mode-manager {
-  .btn-outline-primary {
-    &:hover {
-      color: var(--primary);
-      background-color: $gray-200;
+  .grw-page-editor-mode-manager {
+    .btn-outline-primary {
+      &:hover {
+        color: var(--primary);
+        background-color: $gray-200;
+      }
     }
   }
-}
-
-.grw-drawer-toggler {
-  @include button-variant($light, $light);
-  @include mixins-buttons.button-svg-icon-variant($light, $light);
-  color: $gray-500;
-  box-shadow: none !important;
-}
 
-/*
- * GROWI Sidebar
- */
-.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.
-    box-shadow: 0px 0px 3px rgba(black, 0.24);
-  }
-  // Pagetree
-  .grw-pagetree {
-    @include override-list-group-item-for-pagetree(
-      var(--color-sidebar-context),
-      hsl.darken(var(--bgcolor-sidebar-context),5%),
-      hsl.darken(var(--bgcolor-sidebar-context),12%),
-      hsl.lighten(var(--color-sidebar-context),10%),
-      hsl.lighten(var(--color-sidebar-context),8%),
-      hsl.darken(var(--bgcolor-sidebar-context),15%),
-      hsl.darken(var(--bgcolor-sidebar-context),24%)
+  .grw-drawer-toggler {
+    @include button-variant($light, $light);
+    @include mixins-buttons.button-svg-icon-variant($light, $light);
+    color: $gray-500;
+    box-shadow: none !important;
+  }
+
+  /*
+  * GROWI Sidebar
+  */
+  .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
     );
-
-    .grw-pagetree-triangle-btn {
-      @include mixins-buttons.button-outline-svg-icon-variant($gray-400, var(--primary));
+    // sidebar-centent-bg
+    .grw-navigation-wrap {
+      // Drop a shadow on the light theme. The dark theme makes '$ bgcolor-sidebar-context' brighter than the body.
+      box-shadow: 0px 0px 3px rgba(black, 0.24);
     }
-  }
-  .private-legacy-pages-link {
-    &:hover {
-      background: $bgcolor-list-hover;
+    // Pagetree
+    .grw-pagetree {
+      @include override-list-group-item-for-pagetree(
+        var(--color-sidebar-context),
+        hsl.darken(var(--bgcolor-sidebar-context),5%),
+        hsl.darken(var(--bgcolor-sidebar-context),12%),
+        hsl.lighten(var(--color-sidebar-context),10%),
+        hsl.lighten(var(--color-sidebar-context),8%),
+        hsl.darken(var(--bgcolor-sidebar-context),15%),
+        hsl.darken(var(--bgcolor-sidebar-context),24%)
+      );
+
+      .grw-pagetree-triangle-btn {
+        @include mixins-buttons.button-outline-svg-icon-variant($gray-400, var(--primary));
+      }
+    }
+    .private-legacy-pages-link {
+      &:hover {
+        background: $bgcolor-list-hover;
+      }
     }
   }
-}
-
-.btn.btn-page-item-control {
-  --gray-500: hsl(var(--gray-500-hs),var(--gray-500-l));
-  --gray-500-hs: 210,13%;
-  --gray-500-l: 61%;
-  @include hsl-button.button-outline-variant(var(--gray-500), var(--primary), #{hsl.lighten(var(--primary), 52%)}, transparent);
-  @include hover() {
-    background-color: #{hsl.lighten(var(--primary), 58%)};
-  }
-  &:not(:disabled):not(.disabled):active,
-  &:not(:disabled):not(.disabled).active {
-    color: var(--primary);
-  }
-  box-shadow: none !important;
-}
 
-/*
- * GROWI page list
- */
-.page-list {
-  .page-list-ul {
-    > li {
-      > span.page-list-meta {
-        color: #{hsl.lighten(var(--color-global),10%)};
+  .btn.btn-page-item-control {
+    --gray-500: hsl(var(--gray-500-hs),var(--gray-500-l));
+    --gray-500-hs: 210,13%;
+    --gray-500-l: 61%;
+    @include hsl-button.button-outline-variant(var(--gray-500), var(--primary), #{hsl.lighten(var(--primary), 52%)}, transparent);
+    @include hover() {
+      background-color: hsl.lighten(var(--primary), 58%);
+    }
+    &:not(:disabled):not(.disabled):active,
+    &:not(:disabled):not(.disabled).active {
+      color: var(--primary);
+    }
+    box-shadow: none !important;
+  }
+
+  /*
+  * GROWI page list
+  */
+  .page-list {
+    .page-list-ul {
+      > li {
+        > span.page-list-meta {
+          color: hsl.lighten(var(--color-global),10%);
+        }
       }
     }
-  }
-  // List group
-  .list-group-item {
-    .page-list-snippet {
-      color: #{hsl.lighten(var(--color-global),10%)};
+    // List group
+    .list-group-item {
+      &.active {
+        background-color: hsl.lighten(var(--primary),77%) !important;
+      }
+      &.list-group-item-action:hover {
+        background-color: hsl.lighten(var(--primary),72%) !important;
+      }
+      .page-list-snippet {
+        color: hsl.lighten(var(--color-global),10%);
+      }
     }
   }
-}
 
-/*
- * GROWI ToC
- */
-.revision-toc-content {
-  ::marker {
-    color: #{hsl.darken(var(--bgcolor-global),20%)};
+  /*
+  * GROWI ToC
+  */
+  .revision-toc-content {
+    ::marker {
+      color: hsl.darken(var(--bgcolor-global),20%);
+    }
   }
-}
 
-/*
- * GROWI Editor
- */
-.grw-editor-navbar-bottom {
-  background-color: $gray-50;
+  /*
+  * GROWI Editor
+  */
+  .grw-editor-navbar-bottom {
+    background-color: $gray-50;
 
-  #slack-mark-white {
-    display: none;
-  }
+    #slack-mark-white {
+      display: none;
+    }
 
-  .input-group-text {
-    margin-right: 1px;
-    color: var(--secondary);
-    border-color: var(--light);
-  }
+    .input-group-text {
+      margin-right: 1px;
+      color: var(--secondary);
+      border-color: var(--light);
+    }
 
-  .btn.btn-outline-secondary {
-    border-color: $border-color;
+    .btn.btn-outline-secondary {
+      border-color: $border-color;
+    }
   }
-}
 
-/*
- * GROWI Link Edit Modal
- */
-.link-edit-modal {
-  span i {
-    color: $gray-400;
+  /*
+  * GROWI Link Edit Modal
+  */
+  .link-edit-modal {
+    span i {
+      color: $gray-400;
+    }
   }
-}
 
-/*
- * GROWI Grid Edit Modal
- */
+  /*
+  * GROWI Grid Edit Modal
+  */
 
-.grw-grid-edit-preview {
-  background: $gray-100;
-}
+  .grw-grid-edit-preview {
+    background: $gray-100;
+  }
 
-/*
- * Slack
- */
-.grw-slack-notification {
-  background-color: white;
-  $color-slack: #4b144c;
+  /*
+  * Slack
+  */
+  .grw-slack-notification {
+    background-color: white;
+    $color-slack: #4b144c;
 
-  .form-control {
-    background: white;
-  }
+    .form-control {
+      background: white;
+    }
 
-  .custom-control-label {
-    &::before {
-      background-color: $gray-200;
-      border-color: transparent;
+    .custom-control-label {
+      &::before {
+        background-color: $gray-200;
+        border-color: transparent;
+      }
+      &::after {
+        background-color: white;
+        background-image: url(/images/icons/slack/slack-logo-off.svg);
+      }
     }
-    &::after {
-      background-color: white;
-      background-image: url(/images/icons/slack/slack-logo-off.svg);
+    .custom-control-input:checked ~ .custom-control-label {
+      &::before {
+        background-color: lighten($color-slack, 60%);
+      }
+      &::after {
+        background-image: url(/images/icons/slack/slack-logo-on.svg);
+      }
     }
-  }
-  .custom-control-input:checked ~ .custom-control-label {
-    &::before {
-      background-color: lighten($color-slack, 60%);
+    .grw-slack-logo svg {
+      fill: #af30b0;
+    }
+
+    .grw-btn-slack {
+      background-color: white;
+
+      &:hover,
+      &:focus {
+        background-color: white;
+      }
     }
-    &::after {
-      background-image: url(/images/icons/slack/slack-logo-on.svg);
+
+    .grw-btn-slack-triangle {
+      color: var(--secondary);
     }
   }
-  .grw-slack-logo svg {
-    fill: #af30b0;
-  }
 
-  .grw-btn-slack {
-    background-color: white;
+  /*
+  * GROWI HandsontableModal
+  */
+  .grw-hot-modal-navbar {
+    background-color: var(--light);
+  }
 
-    &:hover,
-    &:focus {
-      background-color: white;
+  .wiki {
+    h1 {
+      border-color: var(--border-color-theme);
+    }
+    h2 {
+      border-color: var(--border-color-theme);
     }
   }
 
-  .grw-btn-slack-triangle {
-    color: var(--secondary);
+  /*
+  * GROWI comment form
+  */
+  .comment-form {
+    #slack-mark-white {
+      display: none;
+    }
   }
-}
 
-/*
- * GROWI HandsontableModal
- */
-.grw-hot-modal-navbar {
-  background-color: var(--light);
-}
-
-.wiki {
-  h1 {
-    border-color: var(--border-color-theme);
+  .page-comments-row {
+    background: var(--bgcolor-subnav);
   }
-  h2 {
-    border-color: var(--border-color-theme);
+
+  /*
+  * GROWI tags
+  */
+  .grw-tag-labels {
+    .grw-tag-label {
+      color: $color-tags;
+      background-color: $bgcolor-tags;
+    }
   }
-}
 
-/*
- * GROWI comment form
- */
-.comment-form {
-  #slack-mark-white {
-    display: none;
+  /*
+  * GROWI popular tags
+  */
+  .grw-popular-tag-labels {
+    .grw-tag-label {
+      color: $color-tags;
+      background-color: $bgcolor-tags;
+    }
   }
-}
 
-.page-comments-row {
-  background: var(--bgcolor-subnav);
-}
+  /*
+  * grw-side-contents
+  */
+  .grw-side-contents-sticky-container {
+    .grw-count-badge {
+      @include count-badge.count-badge($gray-600, $gray-200);
+    }
 
-/*
- * GROWI tags
- */
-.grw-tag-labels {
-  .grw-tag-label {
-    color: $color-tags;
-    background-color: $bgcolor-tags;
+    .grw-border-vr {
+      border-color: $border-color-toc;
+    }
+    .revision-toc {
+      border-color: $border-color-toc;
+    }
   }
-}
 
-/*
- * GROWI popular tags
- */
-.grw-popular-tag-labels {
-  .grw-tag-label {
-    color: $color-tags;
-    background-color: $bgcolor-tags;
+  /*
+  * drawio
+  */
+  .drawio-viewer {
+    border-color: $border-color-global;
   }
-}
 
-/*
-* grw-side-contents
-*/
-.grw-side-contents-sticky-container {
-  .grw-count-badge {
-    @include count-badge.count-badge($gray-600, $gray-200);
+  /*
+  * admin settings
+  */
+  .admin-setting-header {
+    border-color: $border-color;
   }
 
-  .grw-border-vr {
-    border-color: $border-color-toc;
+  /*
+  * modal
+  */
+  .grw-modal-head {
+    border-color: $border-color-global;
   }
-  .revision-toc {
-    border-color: $border-color-toc;
-  }
-}
 
-/*
- * drawio
- */
-.drawio-viewer {
-  border-color: $border-color-global;
-}
-
-/*
- * admin settings
- */
-.admin-setting-header {
-  border-color: $border-color;
-}
-
-/*
- * modal
- */
-.grw-modal-head {
-  border-color: $border-color-global;
-}
-
-/*
- * skeleton
- */
-.grw-skeleton {
-  background-color: #{hsl.lighten(var(--bgcolor-navbar),10%)};
+  /*
+  * skeleton
+  */
+  .grw-skeleton {
+    background-color: hsl.lighten(var(--bgcolor-navbar),10%);
+  }
 }
-

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

@@ -87,6 +87,7 @@ code:not([class^='language-']) {
 // Form
 .form-control {
   @include form-control-focus();
+  border: none;
 }
 
 // Tabs
@@ -290,7 +291,7 @@ ul.pagination {
   .grw-recent-changes {
     .list-group {
       .list-group-item {
-        background-color: transparent;
+        background-color: transparent !important;
 
         .icon-lock {
           color: var(--color-link);
@@ -467,6 +468,7 @@ ul.pagination {
   // List group
   .list-group {
     .list-group-item {
+      background-color: var(--bgcolor-global) !important;
       a {
         svg {
           fill: var(--color-global);
@@ -487,8 +489,8 @@ ul.pagination {
       }
 
       &.list-group-item-action {
+        background-color: var(--bgcolor-list);
         &.active {
-          background-color: hsl.lighten(var(--bgcolor-global),76%);
           border-left-color: var(--primary);
         }
       }

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

@@ -21,7 +21,6 @@
   --primary: hsl(var(--primary-hs),var(--primary-l));
   --primary-hs: 216.7,65%;
   --primary-l: 20.2%;
-  --primary-65: hsl(216.7,65%,85.2%);
   --accent: hsl(var(--accent-hs),var(--accent-l));
   --accent-hs: 198.6,74.2%;
   --accent-l: 48.6%;
@@ -56,10 +55,10 @@
   // List Group colors
   --color-list: var(--color-global); // optional
   --bgcolor-list: var(--bgcolor-global); // optional
-  // --color-list-hover: va(--color-global); // optional
+  // --color-list-hover: var(--color-global); // optional
   --bgcolor-list-hover: #{hsl.lighten(var(--bgcolor-global),3%)};// optional
   // --color-list-active: white ; // optional
-  // --bgcolor-list-active: var(--primary); // optional
+  --bgcolor-list-active: #{hsl.lighten(var(--bgcolor-global),3%)}; // optional
   // --color-page-list-group-item-meta: #{$gray-500}; // optional
 
   // Table colors
@@ -168,7 +167,7 @@
   --bgcolor-keyword-highlighted: #{darken($grw-marker-red, 30%)};
 
   // Font colors
-  --color-global: #{$gray-400};
+  --color-global: hsl(var(--color-global-hs),var(--color-global-l));
   --color-global-hs: 0,0%;
   --color-global-l: 74%;
   --color-reversal: #{$gray-900};
@@ -186,7 +185,7 @@
 
   // List Group colors
   --color-list: var(--color-global); // optional
-  // --bgcolor-list: var(--bgcolor-global); // optional
+  --bgcolor-list: var(--bgcolor-global); // optional
   // --color-list-hover: var(--color-global); // optional
   --bgcolor-list-hover: #{hsl.lighten(var(--bgcolor-global),3%)}; // optional
   // --color-list-active: white ; // optional
@@ -238,13 +237,13 @@
 
   // Tabs
   --bordercolor-nav-tabs: #{$gray-700}; // optional
-  // $color-nav-tabs-link-active: #; //optional
+  // --color-nav-tabs-link-active: #; //optional
   --bordercolor-nav-tabs-hover: #666 #666 var(--bordercolor-nav-tabs); // optional
   --bordercolor-nav-tabs-active: var(--bordercolor-nav-tabs) var(--bordercolor-nav-tabs) var(--bgcolor-global); // optional
 
   // Tags
-  // $color-tags: #; //optional
-  // $bgcolor-tags: #; //optional
+  // --color-tags: #; //optional
+  // --bgcolor-tags: #; //optional
 
   // Icon colors
   --color-editor-icons: var(--color-global);