mirror of
https://github.com/nolanlawson/pinafore
synced 2024-12-12 18:28:03 +01:00
9b2b90b46e
* simplify theme definitions * remove rollup dep which is overkill * fix syntax error * fix lint * fix test
920 B
920 B
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 inscss/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).