Enable both color mode

packages/preset-themes/src/consts/preset-themes.ts

@@ -94,6 +94,17 @@ export const PresetThemesMetadatas: GrowiThemeMetadata[] = [
     lightIcon: '#53687E',
     darkIcon: '#869BB1',
     createBtn: '#3491CB',
+  },  // TODO: apply decided color
+  {
+    name: PresetThemes.CHRISTMAS,
+    schemeType: BOTH,
+    lightBg: '#212836',
+    darkBg: '#323D52',
+    lightSidebar: '#2E3E27',
+    darkSidebar: '#455D3B',
+    lightIcon: '#DC7870',
+    darkIcon: '#E7A59F',
+    createBtn: '#B90606',
   },
   // light only
   {
@@ -126,20 +137,7 @@ export const PresetThemesMetadatas: GrowiThemeMetadata[] = [
     lightIcon: '#51C2D3',
     darkIcon: '#204D54',
     createBtn: '#51C2D3',
-  },
-  // TODO: apply decided color
-  {
-    name: PresetThemes.CHRISTMAS,
-    schemeType: LIGHT,
-    lightBg: '#212836',
-    darkBg: '#323D52',
-    lightSidebar: '#2E3E27',
-    darkSidebar: '#455D3B',
-    lightIcon: '#DC7870',
-    darkIcon: '#E7A59F',
-    createBtn: '#B90606',
-  },
-  {
+  }, {
     name: PresetThemes.ANTARCTIC,
     schemeType: LIGHT,
     lightBg: '#FAFEFF',
@@ -149,8 +147,7 @@ export const PresetThemesMetadatas: GrowiThemeMetadata[] = [
     lightIcon: '#2631AF',
     darkIcon: '#131857',
     createBtn: '#303DDB',
-  },
-  {
+  }, {
     name: PresetThemes.SPRING,
     schemeType: LIGHT,
     lightBg: '#FFFFFF',

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

@@ -1,59 +1,7 @@
-// @use 'sass:color';
-
-// :root[data-bs-theme] {
-//   @import '@growi/core-styles/scss/bootstrap/init-stage-1';
-
-// $gray-100: #F2F0EC;
-// $gray-200: #E6E2DA;
-// $gray-300: #DAD3C7;
-// $gray-400: #CEC5B5;
-// $gray-500: #C1B6A2;
-// $gray-600: #9F9284;
-// $gray-700: #7C6D65;
-// $gray-800: #594947;
-// $gray-900: #362824;
-
-//   @import '@growi/core-styles/scss/bootstrap/theming/variables';
-//   @import '@growi/core-styles/scss/bootstrap/theming/utils/color-palette';
-
-//   $primary: #e90f0f;
-//   $highlight: #1e8b2b;
-
-//   @include generate-color-palette('primary', $primary, #30001B, #f7da47, 20% ,25%);
-//   @include generate-color-palette('highlight', $highlight, black, white);
-
-//   $body-color-dark: #f1ede1;
-//   $body-bg-dark: #001b30;
-//   $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: color.mix($gray-800, $gray-900, 50%);
-//   $border-color-dark: $gray-700;
-//   $link-color-dark: $gray-400;
-
-//   @import 'bootstrap/scss/variables';
-//   @import 'bootstrap/scss/variables-dark';
-//   @import '@growi/core-styles/scss/bootstrap/init-stage-2';
-//   @import '@growi/core-styles/scss/bootstrap/theming/apply-dark';
-
-//   --grw-wiki-link-color-rgb: var(--grw-primary-400-rgb);
-//   --grw-wiki-link-hover-color-rgb: var(--grw-primary-300-rgb);
-
-//   // change marker color
-//   --grw-marker-bg: var(--grw-marker-bg-cyan);
-
-//     &, body {
-//     background-image: url('../images/christmas/christmas-bg.svg');
-//     background-repeat: repeat-x;
-//     background-attachment: fixed;
-//     background-size: contain;
-//   }
-// }
-
-
 @use 'sass:color';
 
-:root[data-bs-theme] {
+:root[data-bs-theme='light'] {
+
   @import '@growi/core-styles/scss/bootstrap/init-stage-1';
 
 $gray-100: #F2F0EC;
@@ -120,3 +68,53 @@ $gray-900: #362824;
     background-size: contain;
   }
 }
+
+:root[data-bs-theme='dark'] {
+  @import '@growi/core-styles/scss/bootstrap/init-stage-1';
+
+$gray-100: #F2F0EC;
+$gray-200: #E6E2DA;
+$gray-300: #DAD3C7;
+$gray-400: #CEC5B5;
+$gray-500: #C1B6A2;
+$gray-600: #9F9284;
+$gray-700: #7C6D65;
+$gray-800: #594947;
+$gray-900: #362824;
+
+  @import '@growi/core-styles/scss/bootstrap/theming/variables';
+  @import '@growi/core-styles/scss/bootstrap/theming/utils/color-palette';
+
+  $primary: #e90f0f;
+  $highlight: #1e8b2b;
+
+  @include generate-color-palette('primary', $primary, #30001B, #f7da47, 20% ,25%);
+  @include generate-color-palette('highlight', $highlight, black, white);
+
+  $body-color-dark: #f1ede1;
+  $body-bg-dark: #001b30;
+  $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: color.mix($gray-800, $gray-900, 50%);
+  $border-color-dark: $gray-700;
+  $link-color-dark: $gray-400;
+
+  @import 'bootstrap/scss/variables';
+  @import 'bootstrap/scss/variables-dark';
+  @import '@growi/core-styles/scss/bootstrap/init-stage-2';
+  @import '@growi/core-styles/scss/bootstrap/theming/apply-dark';
+
+  --grw-wiki-link-color-rgb: var(--grw-primary-400-rgb);
+  --grw-wiki-link-hover-color-rgb: var(--grw-primary-300-rgb);
+
+  // change marker color
+  --grw-marker-bg: var(--grw-marker-bg-cyan);
+
+    &, body {
+    background-image: url('../images/christmas/christmas-dark-bg.svg');
+    background-repeat: repeat-x;
+    background-attachment: fixed;
+    background-size: contain;
+  }
+}