data.coop/pinafore
8
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity
pinafore/docs/Theming.md
Nolan Lawson 9b2b90b46e
simplify theme definitions (#574) 
* simplify theme definitions

* remove rollup dep which is overkill

* fix syntax error

* fix lint

* fix test
2018-09-23 12:26:01 -07:00

920 B
Raw Blame History

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