Theming

Every Asgard component reads its colors from the nearest ThemeProvider. A theme is a plain object of tokens (backgrounds, text, borders, accents, semantic colors, per-component overrides), so you can use a built-in palette or supply your own.

ThemeProvider

The simplest, controlled usage: pass a theme object and the provider renders exactly that.

00000000001
2
3
4
5
6
import { ThemeProvider } from "@ekko/asgard";
import { themes } from "@ekko/asgard/theme";
 
<ThemeProvider theme={themes.nord}>
  {/* every Asgard component below is themed */}
</ThemeProvider>

ThemeProvider has no persistence of its own, it renders the theme you feed it. Persisting the choice (localStorage, a Mimir atom, an ekko:rune store) is the app's job; just feed the saved value back into theme.

Built-in palettes

themes (from @ekko/asgard/theme) is a map of ready-made palettes:

00000000001
2
3
4
5
6
7
import { themes } from "@ekko/asgard/theme";
 
themes.nord;        themes.dracula;     themes.tokyoNight;
themes.catppuccinMocha; themes.gruvboxDark; themes.oneDark;
themes.githubDark;  themes.githubLight; themes.solarizedDark;
// …and more: monokai, palenight, rosePine, everforest, ayu, material,
// arctic, ubuntu, linuxMint, plus plain dark / light.

Switching theme is just changing which object you pass:

00000000001
2
const [name, setName] = useState("nord");
<ThemeProvider theme={themes[name]}>…</ThemeProvider>

Reading the theme

Inside a component, useTheme() returns the active theme and setters:

00000000001
2
3
4
5
6
import { useTheme } from "@ekko/asgard";
 
function Panel() {
  const { theme } = useTheme();
  return <div style={{ background: theme.background.primary, color: theme.text.primary }}>…</div>;
}

useTheme() returns { theme, setTheme, themeName, setThemeName }. It must be called inside a ThemeProvider.

Custom themes

A theme is just a typed object. Start from a built-in one and override what you need:

00000000001
2
3
4
5
6
7
8
import { themes, type Theme } from "@ekko/asgard/theme";
 
const brand: Theme = {
  ...themes.nord,
  accent: { ...themes.nord.accent, primary: "#5e81ac", primaryActive: "#4c6f9a" },
};
 
<ThemeProvider theme={brand}>…</ThemeProvider>

The token groups are background, text, border, accent, interactive, semantic, and a components map for per-component overrides (sidebar, tab, toolbar, menu, tooltip, dropdown, scrollbar).

Nesting

Providers nest. Wrap a subtree in a second ThemeProvider to theme just that region, handy for a preview pane or a differently-themed panel inside an otherwise neutral app.

On this page

ThemeProvider Built-in palettes Reading the theme Custom themes Nesting