kopia lustrzana https://github.com/nolanlawson/pinafore
1.5 KiB
1.5 KiB
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 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).