site/apps/web/src/modules/admin/config/adminTheme.ts

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