Update Ansible theme to match brand color (#99)

* Update Ansible theme to match brand color

* chore: auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

.gitignore

@@ -8,4 +8,3 @@ site
 src/mkdocs_ansible/_version.py
 .cache
 _readthedocs
-_readthedocs

docs/README.md

@@ -6,7 +6,7 @@ look and feel for any project related to [Ansible](https://docs.ansible.com/) ec
 Some of the projects that use this theme are:
 
 - [ansible-compat](https://ansible.readthedocs.io/projects/compat/)
-- [ansible-devtools](https://ansible.readthedocs.io/projects/dev-tools/)
+- [ansible-dev-tools](https://ansible.readthedocs.io/projects/dev-tools/)
 - [ansible-language-server](https://ansible.readthedocs.io/projects/language-server/)
 - [ansible-lint](https://ansible.readthedocs.io/projects/lint/)
 - [ansible-navigator](https://ansible.readthedocs.io/projects/navigator/)

mkdocs.yml

@@ -47,6 +47,8 @@ plugins:
   - material/social
   - material/search:
       separator: '[\s\-,:!=\[\]()"`/]+|\.(?!\d)|&[lg]t;|(?!\b)(?=[A-Z][a-z])'
+  - material/tags
+  - material/offline
   - minify:
       minify_html: true
 

pyproject.toml

@@ -63,6 +63,9 @@ dependencies = { file = [".config/requirements.in"] }
 [tool.setuptools]
 include-package-data = true
 
+[tool.setuptools.package-data]
+"*" = ["*.css", "*.html", "*.js"]
+
 [tool.setuptools.packages.find]
 where = ["src"]
 

src/mkdocs_ansible/assets/stylesheets/ansible.css

@@ -0,0 +1,5 @@
+:root {
+  --md-primary-fg-color: #5bbdbf;
+  /* --md-primary-fg-color--light: #ECB7B7; */
+  /* --md-primary-fg-color--dark:  #FF5850; */
+}

src/mkdocs_ansible/main.html

@@ -0,0 +1,3 @@
+{% extends "base.html" %} {% block styles %} {{ super() }}
+<link rel="stylesheet" href="assets/stylesheets/ansible.css" />
+{% endblock %}

src/mkdocs_ansible/mkdocs_theme.yml

@@ -3,20 +3,28 @@ extends: material
 
 language: en
 direction: ltr
-features: []
 palette:
-  - scheme: default
-    primary: teal
-    accent: teal
+  # Palette toggle for automatic mode
+  - media: "(prefers-color-scheme)"
+    toggle:
+      icon: material/brightness-auto
+      name: Switch to light mode
+
+  # Palette toggle for light mode
+  - media: "(prefers-color-scheme: light)"
+    scheme: default
+    primary: custom
     toggle:
       icon: material/brightness-7
       name: Switch to dark mode
-  - scheme: slate
-    primary: teal
-    accent: teal
+
+  # Palette toggle for dark mode
+  - media: "(prefers-color-scheme: dark)"
+    scheme: slate
+    primary: custom
     toggle:
       icon: material/brightness-4
-      name: Switch to light mode
+      name: Switch to system preference
 
 font:
   # Must be a valid Google Font name from https://fonts.google.com/

tox.ini

@@ -43,7 +43,7 @@ description = Run all linters
 basepython = python3.10
 deps =
   pre-commit>=2.6.0
-  setuptools>=51.1.1
+  setuptools>=65.3.0
   pytest>=7.2.0  # to updated schemas
 skip_install = true
 commands =
@@ -85,14 +85,14 @@ setenv =
 skip_install = false
 usedevelop = true
 commands =
-  mkdocs build --strict --strict --site-dir=_readthedocs/html/ {posargs:}
+  mkdocs build -v -c --strict --site-dir=_readthedocs/html/ {posargs:}
   linkchecker -f linkcheckerrc _readthedocs/html/
 
 [testenv:pkg]
 description =
   Build package, verify metadata, install package and assert behavior when ansible is missing.
 deps =
-  build >= 0.9.0
+  build >= 1.0.3
   twine >= 4.0.1
 skip_install = true
 # Ref: https://twitter.com/di_codes/status/1044358639081975813