diff --git a/README.md b/README.md index 5ddac2e..0a85eb7 100644 --- a/README.md +++ b/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) diff --git a/docs/assets/images/settings/theme_dark.png b/docs/assets/images/settings/theme_dark.png new file mode 100644 index 0000000..930ab9e Binary files /dev/null and b/docs/assets/images/settings/theme_dark.png differ diff --git a/docs/assets/images/settings/theme_default.png b/docs/assets/images/settings/theme_default.png new file mode 100644 index 0000000..b11573f Binary files /dev/null and b/docs/assets/images/settings/theme_default.png differ diff --git a/docs/start/themes.md b/docs/start/themes.md new file mode 100644 index 0000000..41719df --- /dev/null +++ b/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. diff --git a/mkdocs.yml b/mkdocs.yml index 0797f1d..d07c89e 100644 --- a/mkdocs.yml +++ b/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/ \ No newline at end of file