Skip to content

Theming

Every Lodekit app is styled from one shared theme, so everything feels like one product. That theme is built from tokens — named values like the primary color or the corner radius — and you can override them in a plain CSS file. No app code changes, no rebuilding by hand.

  • theme.css at the root of your Lodekit folder restyles everything — every app and the dashboard.
  • apps/<app-id>/theme.css restyles one app. It layers on top of the global file, so an app can differ in just one or two tokens and inherit the rest.

Neither file exists until you create it. Save one, and Lodekit rebuilds the affected apps automatically — cards on the dashboard flip through building… and the new look is live moments later.

~/Documents/Lodekit/theme.css
:root {
--primary: oklch(0.55 0.15 150);
--radius: 0.5rem;
}

That turns every button, link, and highlight green and softens the corners — across all your apps at once. Dark mode has its own values; override those under .dark:

~/Documents/Lodekit/theme.css
.dark {
--primary: oklch(0.7 0.13 150);
}

The token names are the stable, supported surface: colors like --primary, --background, and --foreground, plus shape values like --radius. You can write any CSS you like in these files, but only token overrides are promised to keep working as Lodekit’s components evolve — anything more specific may break with an update.

You don’t have to hand-pick values yourself. Your agent knows the full token list — ask it to “make everything warmer and rounder” or “give the garden app a green theme” and it writes the file for you.

Open Themes in the dashboard to see every installed theme as a card — palette swatches with a light/dark preview — and to switch one on everywhere or for a single app. Opening a theme gets you the editor: colors, typography, corner radius, and density, with a components canvas that restyles as you tweak and a real-app tab that renders one of your apps under your unsaved edits. Saving applies the theme everywhere, live.

That’s the tour of using Lodekit day to day. Next, meet the services your apps build on — storage, tasks, events, and more — in the Services overview.