Theme configuration support

.gitlab-ci.yml

@@ -96,15 +96,15 @@ markdownlint:
     - gem install mdl
     - mdl --version
   script:
-    - mdl --style all --warnings .
+    - mdl -s mdl_style.rb --warnings .
 
 # Pages jobs
 mkdocs:
   stage: pages
   image: python:3.7.0-alpine3.8
   script:
     - rm -f ~/.gitconfig && rm -Rf  ~/.ssh
-    - apk add --no-cache git=2.18.0-r0 git-fast-import=2.18.0-r0 openssh-client=7.7_p1-r2 bash=4.4.19-r1
+    - apk add --no-cache git=2.18.0-r0 git-fast-import=2.18.0-r0 openssh-client=7.7_p1-r3 bash=4.4.19-r1
     - eval $(ssh-agent -s)
     - mkdir -p ~/.ssh
     - echo "$GIT_SSH_PUB_KEY" > ~/.ssh/id_rsa.pub

docs/docs/configuration.md

@@ -30,6 +30,10 @@ The sensor below is an LDR sensor which sets the *dark* theme when below
   },
 ```
 
+## custom
+
+You can create custom themes in an array here. See the the docs [here][themes].
+
 ## header
 
 This section can display weather and other sensor information in the top
@@ -359,3 +363,4 @@ The url of a still image for use in the main view. This updates every minute.
 [header]: https://raw.githubusercontent.com/timmo001/home-panel/master/docs/resources/header.png
 [weather-left]: https://raw.githubusercontent.com/timmo001/home-panel/master/docs/resources/weather-left.png
 [weather-right]: https://raw.githubusercontent.com/timmo001/home-panel/master/docs/resources/weather-right.png
+[themes]: https://git.timmo.xyz/home-panel/themes/

docs/docs/template.md

@@ -1,9 +1,30 @@
 # Starter Template
 
 ```json
-
 {
-  "theme": {},
+  "theme": {
+    "custom": [
+      {
+        "name": "Midnight",
+        "base": "dark",
+        "overrides": {
+          "backgrounds": {
+            "main": "#383c45",
+            "default": "#383c45",
+            "card": {
+              "on": "pink[600]",
+              "off": "#434954",
+              "disabled": "#7f848e"
+            }
+          },
+          "text": {
+            "light": "grey[50]",
+            "main": "grey[100]"
+          }
+        }
+      }
+    ]
+  },
   "header": {
     "left_outdoor_weather": {
       "dark_sky_icon": "sensor.dark_sky_icon",
@@ -54,5 +75,4 @@
     }
   ]
 }
-
 ```

docs/docs/themes.md

@@ -0,0 +1,85 @@
+# Custom Themes
+
+This section covers creating custom themes in the config.
+
+Start by adding an array called `custom` under the `theme` object in the
+ config or use the [template][template].
+
+```json
+  "theme": {
+    "custom": [
+    ]
+  }
+```
+
+## Configurable items
+
+Here is a table of all parts of the theme that can be overridden/configured.
+ Replace the dots (.) with an object. (`"backgrounds": { ... }`)
+
+| Item                       | What this configures/overrides                                                                                                                                 |
+| -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| type                       | The top level base. This is the high level theme which can only be light or dark. Generally this isn't needed when using the light or dark theme as the `base` |
+| primary                    | The primary color that the UI uses.                                                                                                                            |
+| secondary                  | The secondary color that the UI uses.                                                                                                                          |
+| backgrounds.main           | The main background. This can be a color or a picture. You must use css formatting however, so to use an image, use `url(https://myimageaddress...)            |
+| backgrounds.default        | The background that other sections use that don't already have. This is generally not needed.                                                                  |
+| backgrounds.card.on        | The color of the card when on. i.e. the light or switch is turned on.                                                                                          |
+| backgrounds.card.off       | The color of the card when switched off or not able to switch on                                                                                               |
+| backgrounds.card.disabled  | The color of the card when the entity is unavailable.                                                                                                          |
+| theme.overrides.text.light | The color of the lighter text and icons                                                                                                                        |
+| theme.overrides.text.main  | The color of the main text and icons. This is mostly the header section with the time, weather etc.                                                            |
+
+## Example Themes
+
+Here are some example themes you can use or expand on. Contributions welcome!
+
+### Midnight
+
+```json
+      {
+        "name": "Midnight",
+        "base": "dark",
+        "overrides": {
+          "backgrounds": {
+            "main": "#383c45",
+            "default": "#383c45",
+            "card": {
+              "on": "pink[600]",
+              "off": "#434954",
+              "disabled": "#7f848e"
+            }
+          },
+          "text": {
+            "light": "grey[50]",
+            "main": "grey[100]"
+          }
+        }
+      }
+```
+
+![Midnight Theme][theme-midnight]
+
+### Forest
+
+```json
+      {
+        "name": "Forest",
+        "base": "light",
+        "overrides": {
+          "backgrounds": {
+            "main": "url(https://images.pexels.com/photos/4827/nature-forest-trees-fog.jpeg)",
+            "card": {
+              "on": "lightGreen[700]",
+              "off": "green[50]"
+            }
+          }
+        }
+      }
+```
+
+![Forest Theme][theme-forest]
+
+[template]: https://git.timmo.xyz/home-panel/template/
+[theme-midnight]: https://raw.githubusercontent.com/timmo001/home-panel/master/docs/resources/theme-midnight.png
+[theme-forest]: https://raw.githubusercontent.com/timmo001/home-panel/master/docs/resources/theme-forest.png

docs/mkdocs.yml

@@ -1,3 +1,4 @@
+---
 site_name: Home Panel
 site_description: A touch-compatible web-app for controlling the home
 site_author: Timmo
@@ -63,10 +64,13 @@ markdown_extensions:
 # Pages
 nav:
   - Overview: index.md
-  - Setup: setup.md
-  - Login: login.md
-  - Configuration: configuration.md
-  - Template: template.md
+  - Getting Started:
+      - Setup: setup.md
+      - Login: login.md
+  - Customization:
+      - Configuration: configuration.md
+      - Themes: themes.md
+      - Template: template.md
   - Troubleshooting: troubleshooting.md
   - Contributing: contributing.md
   - License: license.md

mdl_style.rb

@@ -0,0 +1,2 @@
+all
+rule 'MD013', :tables => false