pinafore/docs/Theming.md
Nolan Lawson 4bd181d3cc
fix: update Sapper to latest (#775)
* fix: update to latest sapper

fixes #416

* fix error and debug pages

* requestIdleCallback makes column switching feel way nicer than double rAF

* add export feature

* add better csp info

* workaround for sapper sub-page issue

* clarify in readme about exporting

* fix now config

* switch from rIC to triple raf

* style-loader is no longer used

* update theming guide
2018-12-11 07:31:48 -08:00

35 lines
1,010 B
Markdown

## Theming
This document describes how to write your own theme for Pinafore.
First, create a file `scss/themes/foobar.scss`, write some SCSS inside and add
the following at the bottom of `scss/themes/foobar.scss`.
```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`.
Then, Add your theme to `src/routes/_static/themes.js`
```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).