|
@@ -1,4 +1,78 @@
|
|
|
-@use '@growi/core/scss/bootstrap/init' as bs;
|
|
|
|
|
|
|
+:root[data-bs-theme='light'] {
|
|
|
|
|
+ @import '@growi/core/scss/bootstrap/init-stage-1';
|
|
|
|
|
+ @import '@growi/core/scss/bootstrap/theming/variables';
|
|
|
|
|
+ @import '@growi/core/scss/bootstrap/theming/utils/color-palette';
|
|
|
|
|
+
|
|
|
|
|
+ $primary: #007eb0;
|
|
|
|
|
+ $highlight: #c4c2bd;
|
|
|
|
|
+
|
|
|
|
|
+ @include generate-color-palette('primary', $primary, #000010, white, 22%, 22%);
|
|
|
|
|
+ @include generate-color-palette('highlight', $highlight);
|
|
|
|
|
+
|
|
|
|
|
+ $body-color: #223246;
|
|
|
|
|
+ $body-bg: white;
|
|
|
|
|
+
|
|
|
|
|
+ $body-secondary-color: rgba($body-color, .75);
|
|
|
|
|
+ $body-secondary-bg: $gray-200;
|
|
|
|
|
+
|
|
|
|
|
+ $body-tertiary-color: rgba($body-color, .5);
|
|
|
|
|
+ $body-tertiary-bg: $gray-100;
|
|
|
|
|
+
|
|
|
|
|
+ $border-color: var(--grw-highlight-200);
|
|
|
|
|
+
|
|
|
|
|
+ $link-color: #434240;
|
|
|
|
|
+
|
|
|
|
|
+ @import 'bootstrap/scss/variables';
|
|
|
|
|
+ @import 'bootstrap/scss/variables-dark';
|
|
|
|
|
+
|
|
|
|
|
+ @import '@growi/core/scss/bootstrap/init-stage-2';
|
|
|
|
|
+
|
|
|
|
|
+ @import '@growi/core/scss/bootstrap/theming/root';
|
|
|
|
|
+ @import '@growi/core/scss/bootstrap/theming/root-light';
|
|
|
|
|
+ @import '@growi/core/scss/bootstrap/theming/apply';
|
|
|
|
|
+
|
|
|
|
|
+ --grw-wiki-link-color-rgb: var(--grw-highlight-800-rgb);
|
|
|
|
|
+ --grw-wiki-link-hover-color-rgb: var(--grw-highlight-900-rgb);
|
|
|
|
|
+ --grw-sidebar-nav-btn-color: var(--grw-highlight-600);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+:root[data-bs-theme='dark'] {
|
|
|
|
|
+ @import '@growi/core/scss/bootstrap/init-stage-1';
|
|
|
|
|
+ @import '@growi/core/scss/bootstrap/theming/variables';
|
|
|
|
|
+ @import '@growi/core/scss/bootstrap/theming/utils/color-palette';
|
|
|
|
|
+
|
|
|
|
|
+ $primary: #007eb0;
|
|
|
|
|
+ $highlight: #c4c2bd;
|
|
|
|
|
+
|
|
|
|
|
+ @include generate-color-palette('primary', $primary, #000010, white, 22%, 22%);
|
|
|
|
|
+ @include generate-color-palette('highlight', $highlight, black, white);
|
|
|
|
|
+
|
|
|
|
|
+ $body-color-dark: $gray-300;
|
|
|
|
|
+ $body-bg-dark: #1c1a1a;
|
|
|
|
|
+
|
|
|
|
|
+ $body-secondary-color-dark: rgba($body-color-dark, .75);
|
|
|
|
|
+ $body-secondary-bg-dark: $gray-800;
|
|
|
|
|
+
|
|
|
|
|
+ $body-tertiary-color-dark: rgba($body-color-dark, .5);
|
|
|
|
|
+ $body-tertiary-bg-dark: mix($gray-800, $gray-900, 50%);
|
|
|
|
|
+
|
|
|
|
|
+ $border-color-dark: var(--grw-highlight-200);
|
|
|
|
|
+
|
|
|
|
|
+ $link-color-dark: $gray-500;
|
|
|
|
|
+
|
|
|
|
|
+ @import 'bootstrap/scss/variables';
|
|
|
|
|
+ @import 'bootstrap/scss/variables-dark';
|
|
|
|
|
+
|
|
|
|
|
+ @import '@growi/core/scss/bootstrap/init-stage-2';
|
|
|
|
|
+
|
|
|
|
|
+ @import '@growi/core/scss/bootstrap/theming/root';
|
|
|
|
|
+ @import '@growi/core/scss/bootstrap/theming/root-dark';
|
|
|
|
|
+ @import '@growi/core/scss/bootstrap/theming/apply';
|
|
|
|
|
+
|
|
|
|
|
+ --grw-wiki-link-color-rgb: var(--grw-highlight-500-rgb);
|
|
|
|
|
+ --grw-wiki-link-hover-color-rgb: var(--grw-highlight-300-rgb);
|
|
|
|
|
+ --grw-sidebar-nav-btn-color: rgba(var(--grw-highlight-400-rgb), 0.8);
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
// @use './variables' as var;
|
|
// @use './variables' as var;
|
|
|
// @use './theme/mixins/page-editor-mode-manager';
|
|
// @use './theme/mixins/page-editor-mode-manager';
|