import { theme, type ThemeConfig } from "antd"; export type AdminColorMode = "light" | "dark"; const ADMIN_THEME_KEY = "wespAdminTheme"; export function readAdminThemePreference(): AdminColorMode { if (typeof window === "undefined") { return "light"; } return localStorage.getItem(ADMIN_THEME_KEY) === "dark" ? "dark" : "light"; } export function persistAdminThemePreference(mode: AdminColorMode): void { localStorage.setItem(ADMIN_THEME_KEY, mode); } export function toggleAdminColorMode(mode: AdminColorMode): AdminColorMode { return mode === "light" ? "dark" : "light"; } const lightTheme: ThemeConfig = { algorithm: theme.defaultAlgorithm, token: { colorPrimary: "#48816d", colorBgBase: "#f6f6f4", colorBgContainer: "#ffffff", colorTextBase: "#1a1e1c", colorBorder: "#e8e8e2", colorBorderSecondary: "#e8e8e2", colorError: "#cd3838", colorWarning: "#d4a72c", colorSuccess: "#0f766e" }, components: { Layout: { siderBg: "#ffffff", triggerBg: "#ebebe5", triggerColor: "#1a1e1c" }, Menu: { itemBg: "transparent", itemColor: "#1a1e1c", itemSelectedBg: "rgba(72, 129, 109, 0.16)", itemSelectedColor: "#48816d", itemHoverBg: "#e8f2ef", itemMarginInline: 8, itemBorderRadius: 8, itemHeight: 40 }, Card: { colorBgContainer: "#ffffff", colorBorderSecondary: "#e8e8e2", borderRadiusLG: 20 }, Table: { headerBg: "#ebebe5", rowHoverBg: "rgba(72, 129, 109, 0.06)", borderColor: "#e8e8e2" }, Tag: { defaultBg: "#ebebe5", defaultColor: "#4a5a52" }, Input: { colorBgContainer: "#ffffff", colorBorder: "#e8e8e2", colorText: "#1a1e1c" }, Select: { colorBgContainer: "#ffffff", colorBorder: "#e8e8e2", colorText: "#1a1e1c", optionSelectedBg: "rgba(72, 129, 109, 0.1)" }, Switch: { colorPrimary: "#48816d", colorPrimaryHover: "#5a9a82" }, Modal: { contentBg: "#ffffff", headerBg: "#ffffff", titleColor: "#1a1e1c", colorIcon: "#4a5a52", colorIconHover: "#1a1e1c" }, Button: { defaultBg: "#ffffff", defaultBorderColor: "#e8e8e2", defaultColor: "#1a1e1c" } } }; const darkTheme: ThemeConfig = { algorithm: theme.darkAlgorithm, token: { colorPrimary: "#5a9a82", colorBgBase: "#1f2229", colorBgContainer: "#0b0a10", colorTextBase: "#ececf1", colorBorder: "rgba(186, 184, 208, 0.14)", colorBorderSecondary: "rgba(186, 184, 208, 0.1)", colorError: "#e94b4b", colorWarning: "#e8b84a", colorSuccess: "#6bc4a8" }, components: { Layout: { siderBg: "#0b0a10", triggerBg: "#15141c", triggerColor: "#ececf1" }, Menu: { darkItemBg: "transparent", darkItemSelectedBg: "rgba(90, 154, 130, 0.32)", darkItemHoverBg: "rgba(90, 154, 130, 0.2)", itemMarginInline: 8, itemBorderRadius: 8, itemHeight: 40 }, Card: { colorBgContainer: "#0b0a10", colorBorderSecondary: "rgba(186, 184, 208, 0.14)", borderRadiusLG: 20 }, Table: { headerBg: "#1a1924", rowHoverBg: "rgba(90, 154, 130, 0.1)", borderColor: "rgba(186, 184, 208, 0.1)" }, Tag: { defaultBg: "rgba(11, 10, 16, 0.35)", defaultColor: "rgba(236, 236, 241, 0.75)" }, Input: { colorBgContainer: "#15141c", colorBorder: "rgba(186, 184, 208, 0.16)", colorText: "#ececf1" }, Select: { colorBgContainer: "#15141c", colorBorder: "rgba(186, 184, 208, 0.16)", colorText: "#ececf1", optionSelectedBg: "rgba(90, 154, 130, 0.2)" }, Switch: { colorPrimary: "#5a9a82", colorPrimaryHover: "#6bc4a8" }, Modal: { colorBgElevated: "#0b0a10", contentBg: "#0b0a10", headerBg: "#0b0a10", titleColor: "#ececf1", colorIcon: "#a8adbb", colorIconHover: "#ececf1" }, Button: { defaultBg: "#15141c", defaultBorderColor: "rgba(186, 184, 208, 0.16)", defaultColor: "#ececf1" } } }; export function getAdminAntdTheme(mode: AdminColorMode): ThemeConfig { return mode === "dark" ? darkTheme : lightTheme; }