Theming

w3-kit uses CSS custom properties in HSL format for full compatibility with shadcn/ui theming. Component variants are powered by class-variance-authority (CVA).

Color Tokens

The theming system defines these CSS custom properties. Override them in your global CSS to customize every component at once.

globals.css

:root {
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 222.2 84% 4.9%;
}

w3-kit Specific Tokens

In addition to the standard shadcn tokens, w3-kit defines its own design tokens for grayscale and accent colors.

--w3-gray-100 through --w3-gray-900 — grayscale ramp
--w3-accent (#5554d9) — primary brand color
--w3-surface-elevated — card / elevated surface backgrounds
--w3-border-subtle — light borders and dividers

Tailwind Configuration

Extend your Tailwind config to use the custom properties. This pattern is the same one used by shadcn/ui.

tailwind.config.js

module.exports = {
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        border: "hsl(var(--border))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
    },
  },
}

Component Variants (CVA)

Components use class-variance-authority to define variants. You can pass variant props to change a component's appearance without writing custom CSS.

<ConnectWalletButton variant="light" />
<ConnectWalletButton variant="dark" />
<ConnectWalletButton variant="outline" />
<ConnectWalletButton variant="ghost" />