storybook update: change background color on theme

SpookyJelly · Feb 1, 2025 · f8fede1 · f8fede1
1 parent e55318a
commit f8fede1
Show file tree

Hide file tree

Showing 13 changed files with 36 additions and 13 deletions.
diff --git a/.storybook/global.css b/.storybook/global.css
@@ -0,0 +1,21 @@
+.sb-show-main {
+  background-color: #ffffff !important;
+}
+
+/* 다크 모드 감지 시 스타일 변경 */
+@media (prefers-color-scheme: dark) {
+  .sb-show-main {
+    background-color: #333333 !important;
+  }
+}
+
+/* centered 버전에도 동일하게 적용 */
+.sb-show-main.sb-main-centered {
+  background-color: #ffffff !important;
+}
+
+@media (prefers-color-scheme: dark) {
+  .sb-show-main.sb-main-centered {
+    background-color: #333333 !important;
+  }
+}
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -1,4 +1,5 @@
 import type { Preview } from "@storybook/react";
+import "./global.css";
 
 const preview: Preview = {
   parameters: {

diff --git a/docs/assets/Color-F6OSRLHC-rAzT7EF4.js → docs/assets/Color-F6OSRLHC-BJE1mwjM.js b/docs/assets/Color-F6OSRLHC-rAzT7EF4.js → docs/assets/Color-F6OSRLHC-BJE1mwjM.js
diff --git a/docs/assets/Configure-DzgrMlM4.js → docs/assets/Configure-DeO2pzqU.js b/docs/assets/Configure-DzgrMlM4.js → docs/assets/Configure-DeO2pzqU.js
@@ -1,4 +1,4 @@
-import{j as e}from"./jsx-runtime-Cw8dmJ57.js";import{useMDXComponents as r}from"./index-y0ifwxXQ.js";import{M as l}from"./index-vtNPFcgj.js";import"./index-C57_-39e.js";import"./iframe-DrqN1PAe.js";import"./index-B_KJRbAy.js";import"./index-D9XJHvQl.js";import"./index-NOh9rqHv.js";import"./index-ogSvIofg.js";function i(s){const n={a:"a",br:"br",code:"code",h2:"h2",h3:"h3",hr:"hr",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...r(),...s.components};return e.jsxs(e.Fragment,{children:[e.jsx(l,{title:"Introduction"}),`
+import{j as e}from"./jsx-runtime-Cw8dmJ57.js";import{useMDXComponents as r}from"./index-y0ifwxXQ.js";import{M as l}from"./index-Ba9eJjej.js";import"./index-C57_-39e.js";import"./iframe-DqsvfuQL.js";import"./index-B_KJRbAy.js";import"./index-D9XJHvQl.js";import"./index-NOh9rqHv.js";import"./index-ogSvIofg.js";function i(s){const n={a:"a",br:"br",code:"code",h2:"h2",h3:"h3",hr:"hr",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...r(),...s.components};return e.jsxs(e.Fragment,{children:[e.jsx(l,{title:"Introduction"}),`
 `,e.jsxs("div",{align:"center",children:[e.jsx("img",{src:"https://github.com/user-attachments/assets/d19d6c78-a51b-4794-80a2-cd48228a6521",alt:"logo",width:"150px"}),e.jsx("h1",{children:"AppleJelly"})]}),`
 `,e.jsx("hr",{}),`
 `,e.jsx(n.h2,{id:"table-of-contents",children:"Table of contents"}),`

diff --git a/.../assets/DocsRenderer-CFRXHY34-Cv4U89E0.js → .../assets/DocsRenderer-CFRXHY34-g3-yXqRK.js b/.../assets/DocsRenderer-CFRXHY34-Cv4U89E0.js → .../assets/DocsRenderer-CFRXHY34-g3-yXqRK.js
diff --git a/docs/assets/entry-preview-CtupvnsC.js → docs/assets/entry-preview-D6H0mrhG.js b/docs/assets/entry-preview-CtupvnsC.js → docs/assets/entry-preview-D6H0mrhG.js
diff --git a/docs/assets/iframe-DrqN1PAe.js → docs/assets/iframe-DqsvfuQL.js b/docs/assets/iframe-DrqN1PAe.js → docs/assets/iframe-DqsvfuQL.js
diff --git a/docs/assets/index-vtNPFcgj.js → docs/assets/index-Ba9eJjej.js b/docs/assets/index-vtNPFcgj.js → docs/assets/index-Ba9eJjej.js
diff --git a/docs/assets/preview-C4nbaMBi.js → docs/assets/preview-BkUzePjs.js b/docs/assets/preview-C4nbaMBi.js → docs/assets/preview-BkUzePjs.js
diff --git a/docs/assets/preview-CU1GVNmU.css b/docs/assets/preview-CU1GVNmU.css
diff --git a/docs/assets/preview-CIRcjyVj.js → docs/assets/preview-Clbvhhb0.js b/docs/assets/preview-CIRcjyVj.js → docs/assets/preview-Clbvhhb0.js
diff --git a/docs/iframe.html b/docs/iframe.html
@@ -509,7 +509,7 @@
   }
 </script>
 
-    <script type="module" crossorigin src="./assets/iframe-DrqN1PAe.js"></script>
+    <script type="module" crossorigin src="./assets/iframe-DqsvfuQL.js"></script>
   </head>
 
   <body>

diff --git a/docs/project.json b/docs/project.json
@@ -1 +1 @@
-{"generatedAt":1738405205777,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"testPackages":{},"hasRouterPackage":false,"packageManager":{"type":"npm","version":"10.9.2"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/react-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/react","portableStoriesFileCount":3,"applicationFileCount":0,"storybookVersion":"8.5.2","storybookVersionSpecifier":"^8.5.2","language":"typescript","storybookPackages":{"@storybook/blocks":{"version":"8.5.2"},"@storybook/react":{"version":"8.5.2"},"@storybook/react-vite":{"version":"8.5.2"},"@storybook/test":{"version":"8.5.2"},"eslint-plugin-storybook":{"version":"0.11.2"},"storybook":{"version":"8.5.2"}},"addons":{"@storybook/addon-onboarding":{"version":"8.5.2"},"@storybook/addon-essentials":{"version":"8.5.2"},"@chromatic-com/storybook":{"version":"3.2.4"},"@storybook/addon-interactions":{"version":"8.5.2"},"sb-addon-permutation-table":{"version":"1.0.3"}}}
+{"generatedAt":1738421970253,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"testPackages":{},"hasRouterPackage":false,"packageManager":{"type":"npm","version":"10.9.2"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/react-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/react","portableStoriesFileCount":3,"applicationFileCount":0,"storybookVersion":"8.5.2","storybookVersionSpecifier":"^8.5.2","language":"typescript","storybookPackages":{"@storybook/blocks":{"version":"8.5.2"},"@storybook/react":{"version":"8.5.2"},"@storybook/react-vite":{"version":"8.5.2"},"@storybook/test":{"version":"8.5.2"},"eslint-plugin-storybook":{"version":"0.11.2"},"storybook":{"version":"8.5.2"}},"addons":{"@storybook/addon-onboarding":{"version":"8.5.2"},"@storybook/addon-essentials":{"version":"8.5.2"},"@chromatic-com/storybook":{"version":"3.2.4"},"@storybook/addon-interactions":{"version":"8.5.2"},"sb-addon-permutation-table":{"version":"1.0.3"}}}
-Original file line number
+Diff line change
@@ Expand Up / @@ -509,7 +509,7 @@ @@
       }
     </script>
-        <script type="module" crossorigin src="./assets/iframe-DrqN1PAe.js"></script>
+        <script type="module" crossorigin src="./assets/iframe-DqsvfuQL.js"></script>
       </head>
       <body>
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		{"generatedAt":1738405205777,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"testPackages":{},"hasRouterPackage":false,"packageManager":{"type":"npm","version":"10.9.2"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/react-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/react","portableStoriesFileCount":3,"applicationFileCount":0,"storybookVersion":"8.5.2","storybookVersionSpecifier":"^8.5.2","language":"typescript","storybookPackages":{"@storybook/blocks":{"version":"8.5.2"},"@storybook/react":{"version":"8.5.2"},"@storybook/react-vite":{"version":"8.5.2"},"@storybook/test":{"version":"8.5.2"},"eslint-plugin-storybook":{"version":"0.11.2"},"storybook":{"version":"8.5.2"}},"addons":{"@storybook/addon-onboarding":{"version":"8.5.2"},"@storybook/addon-essentials":{"version":"8.5.2"},"@chromatic-com/storybook":{"version":"3.2.4"},"@storybook/addon-interactions":{"version":"8.5.2"},"sb-addon-permutation-table":{"version":"1.0.3"}}}
		{"generatedAt":1738421970253,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"testPackages":{},"hasRouterPackage":false,"packageManager":{"type":"npm","version":"10.9.2"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/react-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/react","portableStoriesFileCount":3,"applicationFileCount":0,"storybookVersion":"8.5.2","storybookVersionSpecifier":"^8.5.2","language":"typescript","storybookPackages":{"@storybook/blocks":{"version":"8.5.2"},"@storybook/react":{"version":"8.5.2"},"@storybook/react-vite":{"version":"8.5.2"},"@storybook/test":{"version":"8.5.2"},"eslint-plugin-storybook":{"version":"0.11.2"},"storybook":{"version":"8.5.2"}},"addons":{"@storybook/addon-onboarding":{"version":"8.5.2"},"@storybook/addon-essentials":{"version":"8.5.2"},"@chromatic-com/storybook":{"version":"3.2.4"},"@storybook/addon-interactions":{"version":"8.5.2"},"sb-addon-permutation-table":{"version":"1.0.3"}}}