Themes

Novus Design with Ant Design

Ant Design derives its full colour palettes from seed tokens at runtime, so it needs computable colour values, a raw var() string won't work there. The Novus pattern: read the computed token values from the document at runtime and feed those into ConfigProvider. Still by reference, no value is ever copied into code, and a theme flip just re-reads the tokens. Verified against antd v6 (the v5 API is the same).

1. Load the kit alongside antd

import "novus-design-kit/js/novus-theme.js";
import "novus-design-kit/tokens.css";
import "antd/dist/reset.css";

2. Derive the antd theme by reading the tokens

import { ConfigProvider, theme as antdTheme } from "antd";
import { useState } from "react";

const t = (name) =>
  getComputedStyle(document.documentElement).getPropertyValue(name).trim();

const novusAntd = () => ({
  algorithm: window.novusTheme.current() === "dark"
    ? antdTheme.darkAlgorithm
    : antdTheme.defaultAlgorithm,
  token: {
    colorPrimary: t("--accent"),
    colorSuccess: t("--success"),
    colorWarning: t("--warning"),
    colorError:   t("--danger"),
    colorLink:    t("--accent-text"),
    colorTextBase: t("--text"),
    colorBgBase:   t("--bg"),
    fontFamily:    t("--font-sans"),
    borderRadius:  parseFloat(t("--radius-md")),
  },
});

export function AppShell({ children }) {
  const [themeTick, setThemeTick] = useState(0);
  const toggle = () => { window.novusTheme.toggle(); setThemeTick(themeTick + 1); };

  return (
    <ConfigProvider theme={novusAntd()}>
      <button className="btn btn--ghost btn--sm" onClick={toggle}>Theme</button>
      {children}
    </ConfigProvider>
  );
}

3. Dark mode

The toggle flips data-theme, the tokens re-tune, and the re-render re-reads them, antd's dark algorithm and the Novus dark values stay in lockstep. OS-preference-only visitors get the right mode too, because novusTheme.current() falls back to prefers-color-scheme.

Verified result

Rendered from this guide's own sample project, executed and verified on 2026-08-26 against antd 6.6.

Rules of the road

• antd supplies behaviour (tables, forms, date pickers); Novus supplies identity. One accent per view, whichever library renders it.
• Never paste token values into the config as literals, read them with getComputedStyle so tokens.css stays the single source of truth.
• Where an antd component and a kit component overlap (buttons, badges, alerts), prefer the kit's class-based component on brand-critical surfaces.
• Logos remain placed assets from the package, never antd icons or typed text.