SCSS theming like it should be done! ​

• 🔒 Type-checking themes for validity, checking all values exist etc.
• 🌐 Produces nice SCSS AND CSS variables, so you can use all SCSS features with theming.
• 🖌 Multi-theme: You can either use classic dark/light themes, or define as many as you want!
• 🚀 Extra features like JS/TS methods for interactivity built in.
• 🎭 Customizable: Adjust nearly every aspect of how you use themes.
• 🌈 Prints human-readable errors when doing something wrong.
• First class React support with @komplett/react-themed.

And no, CSS variables are not a solution. Read though our Guide so we can convince you.

As easy as it gets: ​

1. Install ​

$ npm add -D @komplett/themed

$ pnpm add -D @komplett/themed

$ yarn add -D @komplett/themed

$ bun add -D @komplett/themed

2. Import ​

@use '@komplett/themed' as *;

3. Define themes ​

@use '@komplett/themed' as *;

$themes: (
  'light': (
    'text': #212529,
    'background': #fafafa,
    'grey-1': #343a40,
    'grey-2': #495057,
    'grey-3': #6c757d,
  ),
  'dark': (
    'text': #fafafa,
    'background': #212529,
    'grey-1': #f8f9fa,
    'grey-2': #e9ecef,
    'grey-3': #dee2e6,
  ),
);

@include apply($themes);

4. Themed! 🎉 🚀 ​

html,
body {
  color: themed('text');
  background-color: themed('background');
}