update Theme Color Block

.storybook/preview-head.html

@@ -12,13 +12,13 @@
     --border-color: #2b2f31;
     --color-layer-transparent: rgba(0, 0, 0, 0.5);
 
-    &.light {
+    &.theme-light {
       background: #E6E6F0;
       color: #000000;
       --body-color: #000000;
     }
 
-    &.dark {
+    &.theme-dark {
       background: #11111F;
       color: #F7F7FA;
       --body-color: #F7F7FA;
@@ -37,12 +37,12 @@
     font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace !important;
   }
 
-  .light .sb-show-main.sb-main-centered {
+  .theme-light .sb-show-main.sb-main-centered {
     color: #11111F;
     background: #F7F7FA;
   }
 
-  .dark .sb-show-main.sb-main-centered {
+  .theme-dark .sb-show-main.sb-main-centered {
     color: #F7F7FA;
     background: #11111F;
   }

.storybook/preview.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import theme from './theme';
 import { Preview } from '@storybook/react';
 import { withThemeByClassName } from '@storybook/addon-themes';
@@ -19,10 +20,10 @@ const preview: Preview = {
     withProvider,
     withThemeByClassName({
       themes: {
-        light: 'light',
-        dark: 'dark',
+        light: 'theme-light',
+        dark: 'theme-dark',
       },
-      defaultTheme: 'dark',
+      defaultTheme: 'theme-dark',
     }),
   ],
   parameters: {

package.json

@@ -63,7 +63,7 @@
     "@marko19907/string-to-color": "^1.0.0",
     "@reaviz/react-use-fuzzy": "^1.0.3",
     "body-scroll-lock-upgrade": "^1.1.0",
-    "chroma-js": "^2.4.2",
+    "chroma-js": "^3.1.2",
     "classnames": "^2.5.1",
     "coverup": "^0.1.1",
     "create-global-state-hook": "^0.0.2",