infinite-canvas/web/src/lib/app-theme.ts

import type { CSSProperties } from "react";
import type { ThemeConfig } from "antd";
import { theme as antdTheme } from "antd";

const neutral = {
  light: {
    primary: "#171717",
    primaryHover: "#000000",
    primaryText: "#ffffff",
    menuBg: "#f5f5f5",
    menuText: "#171717",
  },
  dark: {
    primary: "#fafafa",
    primaryHover: "#ffffff",
    primaryText: "#171717",
    menuBg: "#262626",
    menuText: "#fafafa",
  },
};

export const adminLayoutStyle = {
  siderWidth: 232,
  headerHeight: 56,
  brandHeight: 64,
  menu: { borderInlineEnd: 0, padding: "18px 12px", fontSize: 15 } satisfies CSSProperties,
  menuItem: { height: 44, lineHeight: "44px", marginBlock: 4, borderRadius: 8 } satisfies CSSProperties,
};

export function getAntThemeConfig(dark: boolean): ThemeConfig {
  const color = dark ? neutral.dark : neutral.light;

  return {
    algorithm: dark ? antdTheme.darkAlgorithm : antdTheme.defaultAlgorithm,
    cssVar: { key: dark ? "infinite-canvas-dark" : "infinite-canvas-light" },
    token: {
      colorPrimary: color.primary,
      colorInfo: color.primary,
      colorLink: color.primary,
      colorLinkHover: color.primaryHover,
      colorLinkActive: color.primary,
      colorTextLightSolid: color.primaryText,
    },
    components: {
      Button: {
        primaryShadow: "none",
      },
      Menu: {
        itemActiveBg: color.menuBg,
        itemHoverBg: color.menuBg,
        itemSelectedBg: color.menuBg,
        itemSelectedColor: color.menuText,
        darkItemHoverBg: neutral.dark.menuBg,
        darkItemSelectedBg: neutral.dark.menuBg,
        darkItemSelectedColor: neutral.dark.menuText,
      },
    },
  };
}