Documentation – Theming

Overview

Theming allows you to define a set of visual variables (colors, spacing, typography) that can be switched globally across your application. By leveraging CSS custom properties, you can create lightweight, maintanable themes without JavaScript frameworks.

Defining a Theme

Declare your theme variables on the :root selector and override them inside a data attribute selector for each theme.

:root {
    --color-bg: #fafafa;
    --color-text: #222;
    --color-primary: #0066ff;
}

/* Dark theme */
[data-theme="dark"] {
    --color-bg: #1e1e1e;
    --color-text: #e0e0e0;
    --color-primary: #3399ff;
}

/* Usage */
body {
    background: var(--color-bg);
    color: var(--color-text);
}
.button {
    background: var(--color-primary);
    color:#fff;
}

Live Preview

Select a theme from the dropdown in the header to see the changes applied instantly.

Sample Card

This card reflects the current theme colors, background, and shadows.

Best Practices

Use variables for all color, spacing, and typography values.
Group related variables (e.g., --color-*, --font-*).
Provide a fallback theme for browsers without CSS variable support.
Apply the theme class to the <html> or <body> element for easy toggling.