mirror of
https://github.com/bitwarden/browser.git
synced 2025-02-16 01:21:48 +01:00
70ea75d8f7
The legacy config is deprecated and will be removed in eslint 10. The flat config also allows us to write js functions which will assist in handling limitations with multiple identical rules.
68 lines
1.6 KiB
JavaScript
68 lines
1.6 KiB
JavaScript
import { addons } from "@storybook/manager-api";
|
|
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,
|
|
});
|