Theming

Set the look of your app in one place. Components share colors, spacing, and corner sizes through CSS variables.

On this page

Light and dark mode

Set theme to light, dark, or system. The system option follows the device setting.

App.tsx

import { DethinkProvider } from "@dethink/components";

export function App() {
  return (
    <DethinkProvider theme="system">
      {/* Your app */}
    </DethinkProvider>
  );
}

Change your colors

Override the shared color variables after importing the Dethink stylesheet. Set a background color and a readable foreground color for both themes.

app.css

@import "@dethink/components/styles.css";

:root {
  --dt-color-primary-light: oklch(0.5 0.1 185);
  --dt-color-primary-foreground-light: white;
  --dt-color-primary-dark: oklch(0.8 0.12 178);
  --dt-color-primary-foreground-dark: oklch(0.2 0.04 210);
}

Use semantic Tailwind classes such as bg-background, text-foreground, and border-border in your own UI. They follow the same theme. Check text contrast after changing colors.

Adjust spacing

Use compact for dense tables and toolbars, default for everyday screens, or comfortable for more room.

Compact layout

<DethinkProvider density="compact">
  {/* Your app */}
</DethinkProvider>

Density changes the shared control height and gap values. Individual components may also offer a size prop.

Style one component

Use a component’s props first. Add className for local layout or spacing changes.

Button example

<Button variant="outline" size="sm" className="w-full">
  Save changes
</Button>

Keep focus indicators visible, and check your changes in both light and dark mode.