pinafore/docs/Theming.md

Theming

Create a file scss/themes/foobar.scss, write some SCSS inside and add the following at the bottom of scss/themes/foobar.scss.

@import "_base.scss";

body.theme-foobar {
  @include baseTheme();
}

Note: You can find all the SCSS variables available in scss/themes/_default.scss while the all CSS Custom Properties available are listed in scss/themes/_base.scss.

Add your theme to routes/_static/themes.js

const themes = [
  ...
  {
    name: 'foobar',
    label: 'Foobar', // user-visible name
    color: 'magenta', // main theme color
    dark: true // whether it's a dark theme or not
  }
]

Start the development server (npm run dev), go to http://localhost:4002/settings/instances/your-instance-name and select your newly created theme. Once you've done that, you can update your theme, and refresh the page to see the change (you don't have to restart the server).