From 35eac4a3141c0b6b4431129f34bd61293fc81d98 Mon Sep 17 00:00:00 2001 From: Maxime Le Conte des Floris Date: Tue, 10 Apr 2018 00:04:39 +0200 Subject: [PATCH] docs: add guide to theming (#46) --- docs/Theming.md | 58 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 58 insertions(+) create mode 100644 docs/Theming.md diff --git a/docs/Theming.md b/docs/Theming.md new file mode 100644 index 00000000..74a32f80 --- /dev/null +++ b/docs/Theming.md @@ -0,0 +1,58 @@ +## 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 the CSS class you just define to `scss/themes/_offlines`. +```scss +... +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` +```js +const themes = [ + ... + { + name: 'foobar', + label: 'Foobar' + } +] + +export { themes } +``` + +Add your theme in `templates/2xx.html`. +```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 updated your theme, and refresh the page to see the change (you don't have to restart the server). \ No newline at end of file