48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
import type { Preview } from "@storybook/react-vite";
|
|
import "../src/styles/storybook.css";
|
|
|
|
const applyTheme = (theme: string) => {
|
|
if (typeof document === "undefined") return;
|
|
const dark = theme === "dark";
|
|
document.documentElement.classList.toggle("dark", dark);
|
|
document.documentElement.classList.toggle("light", !dark);
|
|
};
|
|
|
|
const preview: Preview = {
|
|
parameters: {
|
|
controls: {
|
|
matchers: {
|
|
color: /(background|color)$/i,
|
|
date: /Date$/i,
|
|
},
|
|
},
|
|
layout: "padded",
|
|
backgrounds: { disable: true },
|
|
},
|
|
globalTypes: {
|
|
theme: {
|
|
description: "主题",
|
|
toolbar: {
|
|
title: "主题",
|
|
icon: "mirror",
|
|
items: [
|
|
{ value: "light", title: "亮色" },
|
|
{ value: "dark", title: "暗色" },
|
|
],
|
|
dynamicTitle: true,
|
|
},
|
|
},
|
|
},
|
|
initialGlobals: {
|
|
theme: "light",
|
|
},
|
|
decorators: [
|
|
(Story, context) => {
|
|
applyTheme(context.globals.theme === "dark" ? "dark" : "light");
|
|
return Story();
|
|
},
|
|
],
|
|
};
|
|
|
|
export default preview;
|