GITBOOK-198: refactor themes

SUMMARY.md

@@ -29,10 +29,12 @@
   * [Presets](overview/features/presets.md)
   * [Print History and Statistics](overview/features/print-history-and-statistics.md)
   * [Query devices](overview/features/query-devices.md)
-  * [Themes](overview/features/themes/README.md)
+  * [Build-in Themes](overview/features/build-in-themes.md)
+  * [Custom Themes](overview/features/themes/README.md)
     * [Prepare](overview/features/themes/prepare.md)
     * [Backgrounds](overview/features/themes/backgrounds.md)
     * [Logos and Icons](overview/features/themes/logos-and-icons.md)
+    * [Custom Navigation](overview/features/themes/custom-navigation.md)
     * [Custom CSS](overview/features/themes/custom-css.md)
     * [Community Themes](overview/features/themes/themes.md)
   * [Thumbnails](overview/features/thumbnails.md)

overview/features/build-in-themes.md

@@ -0,0 +1,42 @@
+---
+description: >-
+  Build-in themes are pre-designed themes. They provide users with a quick and
+  easy way to customize the look and feel of their interface without having to
+  create a design from scratch.
+---
+
+# Build-in Themes
+
+In Mainsail, there are two groups that are permitted to have build-in themes. The first group consists of all vendor sponsors, who receive exclusive themes as a recognition of their support. The second group includes large open source communities. 
+
+{% hint style="info" %}
+If you are a maintainer of a large open-source 3d printing project, please contact the Mainsail crew on the Discord server for a build-in theme.
+{% endhint %}
+
+### Change theme in Mainsail
+
+<figure><img src="../../.gitbook/assets/mainsail-interface-settings-ui-settings.png" alt=""><figcaption><p>Interface Settings > UI-Settings</p></figcaption></figure>
+
+To change the Theme in Mainsail, open the `Interface Settings` (cogs-menu on the right top), switch to `UI-Settings` and select a theme in the dropdown.
+
+The following themes are currently available in Mainsail:
+
+* Mainsail (default theme)
+* Klipper
+* Voron Design
+* VzBot
+* BigTreeTech (Sponsor)
+* LDO Motion (Sponsor)
+* Multec GmbH (Sponsor)
+* Prusa Research (Sponsor)
+* YUMI (Sponsor)
+
+### Possible options in Build-in themes
+
+* Sidebar Logo (colorizeable in the UI-Settings)
+* Primary Color
+* Sidebar Background
+* Main Background
+* Custom CSS
+
+Most themes only change the sidebar logo and favicon with the logo and primary color.&#x20;

overview/features/themes/custom-navigation.md

@@ -0,0 +1,56 @@
+---
+description: >-
+  It is also possible to add additional navigation points via a custom theme.
+  You have to add a navi.json file with the following content.
+---
+
+# Custom Navigation
+
+```json
+[
+  {
+    "title":"Custom1",
+    "href":"https://www.google.com"
+  },
+  {
+    "title":"Moonraker",
+    "href":"/server/info",
+    "target": "_blank",
+    "position": 90,
+    "icon": "M5 5H7V11H5V5M10 5H8V11H10V5M5 19H7V13H5V19M10 13H8V19H10V17H15V15H10V13M2 21H4V3H2V21M20 3V7H13V5H11V11H13V9H20V15H18V13H16V19H18V17H20V21H22V3H20Z"
+  }
+]
+```
+
+### Options
+
+#### title: string (requirement)
+
+`title` is the name of the new navigation point.
+
+#### href: string (requirement)
+
+This is the path/url to link to.
+
+#### target: string
+
+With this option you can specify whether the link is opened in a new tab or in the same window. possible values here are `_self` and `_blank`.
+
+#### position: integer
+
+This value is used to sort the navigation. All normal navigation points are numbered in steps of 10 (Dashboard: 10, Webcam: 20, Console: 30, ... Machine: 90). Simply set a value in between to place the new navipoint between two default points.
+
+#### icon: string
+
+A custom icon can be added to the navigation point. This can be copied from the material design icons. To do this, open the page [https://pictogrammers.com/library/mdi/](https://pictogrammers.com/library/mdi/), open an icon and click on "copy SVG". All you need is the path. Hier the example from the `account` icon:
+
+```svg
+// complete SVG
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+<title>account</title>
+<path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
+</svg>
+
+// what we need
+M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z
+```

overview/features/themes/logos-and-icons.md

@@ -19,6 +19,10 @@ For more information on creating and uploading to your `.theme` folder, please r
 
 ![](../../../.gitbook/assets/screenshot-sidebar-logo.png)
 
+{% hint style="info" %}
+If you use a SVG, you can use "var(--color-logo, #000000)" as fill color, to use the logo color from the interface settings.
+{% endhint %}
+
 ## Favicons <a href="#favicons" id="favicons"></a>
 
 Upload favicons into your .theme folder and name them `favicon-32x32.png` _(required)_ and `favicon-16x16.png` _(optional)_.