bitwarden-browser/.storybook/manager.js

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,
});