Pinafore-Web-Client-Frontend/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 the CSS class you just define to scss/themes/_offlines.

...
body.offline,
body.theme-foobar.offline, // <-
body.theme-hotpants.offline,
body.theme-majesty.offline,
body.theme-oaken.offline,
body.theme-scarlet.offline,
body.theme-seafoam.offline,
body.theme-gecko.offline {
  @include baseTheme();
}

Add your theme to routes/_static/themes.js

const themes = [
  ...
  {
    name: 'foobar',
    label: 'Foobar'
  }
]

export { themes }

Add your theme in inline-script.js.

window.__themeColors = {
      'default': "royalblue",
      scarlet:   "#e04e41",
      seafoam:   "#177380",
      hotpants:  "hotpink",
      oaken:     "saddlebrown",
      majesty:   "blueviolet",
      gecko:     "#4ab92f",
      foobar:    "#BADA55", // <-
      offline:   "#999999"
    }

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).