From 35eac4a3141c0b6b4431129f34bd61293fc81d98 Mon Sep 17 00:00:00 2001
From: Maxime Le Conte des Floris <mlcdf@users.noreply.github.com>
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