★ GitHub

Theming

Customize StarKit's colors, shadows, and spacing.

StarKit is built on a solid foundation of CSS variables. By overriding these variables, you can create entirely new themes while maintaining the neo-brutalist architecture.

Dark Mode

StarKit includes a built-in dark mode. To enable it, simply add the data-theme="dark" attribute to your <html> or <body> tag.

<html data-theme="dark">

Custom Themes

You can create unlimited custom themes by defining new CSS variables scoped to a data-theme attribute, or by overriding the :root variables in your own stylesheet.

Example: Cyberpunk Theme

Add this to your global CSS file to create a custom Cyberpunk theme:

[data-theme='cyberpunk'] {
  --brut-yellow: #fcee0a;
  --brut-red: #ff003c;
  --brut-blue: #00f0ff;
  --brut-green: #00ff00;
  --brut-black: #000000;
  --brut-white: #fcee0a;
  --brut-gray: #202020;
}

Then apply it to your app:

<html data-theme="cyberpunk">

Design Tokens

Here are some of the key tokens you can override:

  • --brut-yellow, --brut-red, --brut-blue, --brut-green: Primary UI colors.
  • --brut-black, --brut-white, --brut-gray: Neutral colors. (In dark mode, black and white are typically inverted).
  • --brut-border, --brut-border-thick: Border definitions.
  • --brut-shadow-sm, --brut-shadow-md, --brut-shadow-lg: Hard shadow definitions.
  • --brut-radius: Border radius (defaults to 0px).