pinafore/docs/Theming.md

28 lines
920 B
Markdown
Raw Normal View History

2018-04-09 22:04:39 +00:00
## Theming
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`.
Add your theme to `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
2018-04-09 22:04:39 +00:00
}
]
```
2018-04-10 01:00:48 +00:00
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).