64 lines
1.5 KiB
JavaScript
64 lines
1.5 KiB
JavaScript
|
import { addons } from "@storybook/addons";
|
||
|
|
import { create } from "@storybook/theming/create";
|
||
|
|
|
||
|
|
const lightTheme = create({
|
||
|
|
base: "light",
|
||
|
|
//logo and Title
|
||
|
|
brandTitle: "Bitwarden Component Library",
|
||
|
|
brandUrl: "/",
|
||
|
|
brandImage:
|
||
|
|
"https://github.com/bitwarden/brand/blob/51942f8d6e55e96a078a524e0f739efbf1997bcf/logos/logo-horizontal-blue.png?raw=true",
|
||
|
|
brandTarget: "_self",
|
||
|
|
|
||
|
|
//Colors
|
||
|
|
colorPrimary: "#6D757E",
|
||
|
|
colorSecondary: "#175DDC",
|
||
|
|
|
||
|
|
// UI
|
||
|
|
appBg: "#f9fBff",
|
||
|
|
appContentBg: "#ffffff",
|
||
|
|
appBorderColor: "#CED4DC",
|
||
|
|
|
||
|
|
// Text colors
|
||
|
|
textColor: "#212529",
|
||
|
|
textInverseColor: "#ffffff",
|
||
|
|
|
||
|
|
// Toolbar default and active colors
|
||
|
|
barTextColor: "#6D757E",
|
||
|
|
barSelectedColor: "#175DDC",
|
||
|
|
barBg: "#ffffff",
|
||
|
|
|
||
|
|
// Form colors
|
||
|
|
inputBg: "#ffffff",
|
||
|
|
inputBorder: "#6D757E",
|
||
|
|
inputTextColor: "#6D757E",
|
||
|
|
});
|
||
|
|
|
||
|
|
const darkTheme = create({
|
||
|
|
base: "dark",
|
||
|
|
|
||
|
|
//logo and Title
|
||
|
|
brandTitle: "Bitwarden Component Library",
|
||
|
|
brandUrl: "/",
|
||
|
|
brandImage:
|
||
|
|
"https://github.com/bitwarden/brand/blob/51942f8d6e55e96a078a524e0f739efbf1997bcf/logos/logo-horizontal-white.png?raw=true",
|
||
|
|
brandTarget: "_self",
|
||
|
|
|
||
|
|
//Colors
|
||
|
|
colorSecondary: "#6A99F0",
|
||
|
|
barSelectedColor: "#6A99F0",
|
||
|
|
});
|
||
|
|
|
||
|
|
export const getPreferredColorScheme = () => {
|
||
|
|
if (!globalThis || !globalThis.matchMedia) return "light";
|
||
|
|
|
||
|
|
const isDarkThemePreferred = globalThis.matchMedia("(prefers-color-scheme: dark)").matches;
|
||
|
|
if (isDarkThemePreferred) return "dark";
|
||
|
|
|
||
|
|
return "light";
|
||
|
|
};
|
||
|
|
|
||
|
|
addons.setConfig({
|
||
|
|
theme: getPreferredColorScheme() === "dark" ? darkTheme : lightTheme,
|
||
|
|
});
|