Theming

Theming is handled using CSS custom properties. The properties that are supported are listed here. There are three main ways you can set these properties.

Styles

You can set custom properties in the style tag of your component:

<style>
  :root {
    --info-color: purple;
  }
</style>

When setting custom properties in the style tag, you need to make sure you set all related colors (e.g. if you set --info-color, you will also need to set --info-hover-color).

loadTheme

Alternatively, you can pass an object into the loadTheme method in the onMount method of your component:

import { loadTheme } from "svelte-toolkit";

onMount(() => {
  loadTheme({
    "--info-color": "purple"
  });
});

The loadTheme method will set related colors (e.g. in the example above it will set --info-hover-color as well as --info-color) but as it's called on onMount the original colors will be displayed briefly before the theme colors are loaded. It's most useful for applying user custom themes or other dynamic themes.

You can use the getTheme method to get all colors that have been set (including related colors if set through loadTheme):

import { getTheme } from "svelte-toolkit";

onMount(() => {
  alert(getTheme());
});

Script

Svelte Toolkit also comes with a script that you can use to override the styles in the component files themselves. It requires a bit of setup.

Install `node-sass` as a dependency:

yarn add -D node-sass

Add a `stk.config.json` file to the root of your site, with content in the following format:

{
  "theme": {
    "--info-color": "purple"
  }
}

Add the script entry to your `package.json` file:

"scripts": {
  "theme": "stk theme"
}

Run the script:

yarn theme

The script will only build the theme when the config file has changed or the svelte-toolkit dependency has been updated, so you can put it into your `package.json` as a predev or prebuild script without impacting performance.

The script will set related colors (e.g. in the example above it will set --info-hover-color as well as --info-color), just like using loadTheme.

Behind the scenes, this script injects new styles directly into the components, so you can also change some properties that are impossible to do as CSS custom properties, including media query breakpoints.