Merge pull request #5 from eeintech/color_themes

Added documentation about Color Themes

README.md

@@ -1,6 +1,6 @@
 # InvenTree Documentation
 
-This repository hosts the official documentation for [InvenTree](https://github.com/inventree/inventree), an open source inventory management system. 
+This repository hosts the [official documentation](https://inventree.readthedocs.io/) for [InvenTree](https://github.com/inventree/inventree), an open source inventory management system. 
 
 To serve this documentation locally (e.g. for development), you will need to have Python 3 installed on your system.
 
@@ -18,7 +18,7 @@ $ pip install -r requirements.txt
 
 ## Serve Locally
 
-To serve the pages locally, run the command (from the top-level project directory)
+To serve the pages locally, run the following command (from the top-level project directory):
 
 ```
 $ mkdocs serve
@@ -28,6 +28,37 @@ $ mkdocs serve
 
 Once the server is running, it will monitor the documentation files for any changes, and update the served pages.
 
+### Admonitions
+
+"Admonition" blocks can be added as follow:
+```
+!!! info "This is the admonition block title"
+    This is the admonition block content
+```
+
+Refer to the [reference documentation](https://squidfunk.github.io/mkdocs-material/reference/admonitions/) to customize the admonition block to the use-case (eg. warning, missing, info, etc.).
+
+### Images
+
+Images are served from the `./docs/assets/images` folder and can be added as follow:
+```
+{% with id="image_id", url="folder/image_name.png", description="Text shown if image is not loaded properly" %}
+{% include 'img.html' %}
+{% endwith %}
+```
+
+Replace:
+* `image_id` with a short unique indentifier for the image (most commonly, `image_id` is same as `image_name`)
+* `folder` with the folder in `docs/assets/images` in which the image is stored
+* `image_name` with the name of the image
+* `.png` with the image extension (PNG or JPEG are preferred formats)
+
+### Global variables
+
+Refer to the [reference documentation](https://squidfunk.github.io/mkdocs-material/reference/variables/#using-custom-variables) to find out how to add global variables to the documentation site.
+
+Global variables should be added in the `# Global Variables` section of the `mkdocs.yml` configuration file.
+
 ## Credits
 
 This documentation makes use of the [mkdocs-material template](https://github.com/squidfunk/mkdocs-material)

docs/start/themes.md

@@ -0,0 +1,36 @@
+---
+title: Changing color theme
+layout: page
+---
+
+## Color Themes
+
+You can customize the look of InvenTree via the color themes feature.
+
+### Select Color Theme
+
+Navigate to the "Settings" page and click on the "Theme" tab, you should see the following:
+{% with id="theme_default", url="settings/theme_default.png", description="Default InvenTree color theme" %}
+{% include 'img.html' %}
+{% endwith %}
+
+The drop-down list let's you select any other color theme found in your static folder (see next section to find out how to [add color themes](#add-color-themes)). Once selected, click on the "Apply Theme" button for the new color theme to be activated.
+
+!!! info "Per-user Setting"
+	Color themes are "user specific" which means that changing the color theme in your own settings won't affect other users.
+
+Here is an example what the "Dark Reader" theme looks like:
+{% with id="theme_dark", url="settings/theme_dark.png", description="Dark Reader InvenTree color theme" %}
+{% include 'img.html' %}
+{% endwith %}
+
+### Add Color Theme
+
+#### Local Installation
+To add a color theme, you'll need to add a new CSS sheet in your static folder (the default folder is located at `{{ static_folder_local_default }}css/color-themes/`).
+
+InvenTree automatically lists all CSS sheets found in the `{{ static_folder_local_default }}css/color-themes/` folder and present them inside the dropdown list on the "Settings > Theme" page.
+
+#### InvenTree Source Code
+
+If you would like a CSS sheet to be permanently added to InvenTree's source code so that other users can benefit too, add it to the `{{ static_folder_source }}css/color-themes/` folder then submit a pull request.

mkdocs.yml

@@ -1,11 +1,13 @@
 # Project
-repo_url: https://github.com/inventree/inventree-docs
-repo_name: inventree/inventree-docs
 site_name: InvenTree Documentation
 site_description: InvenTree - Open Source Inventory Management
 site_author: InvenTree
 google_analytics: ['UA-143467500-1', 'inventree-docs']
 
+# Repository
+repo_url: https://github.com/inventree/inventree-docs
+repo_name: inventree/inventree-docs
+
 # Theme
 theme:
   name: material
@@ -32,6 +34,7 @@ nav:
     - Deploying: start/deploy.md
     - Updating: start/update.md
     - Migrating: start/migrate.md
+    - Color Themes: start/themes.md
   - Parts:
     - Parts: part/part.md
     - Part Views: part/views.md
@@ -78,3 +81,8 @@ markdown_extensions:
   - markdown.extensions.codehilite
   - toc:
       permalink: ⚓
+
+# Global Variables
+extra:
+  static_folder_source: ./InvenTree/InvenTree/static/
+  static_folder_local_default: ./inventree_static/