feat/theme update dark mode

.github/workflows/docs-pr.yml

@@ -0,0 +1,27 @@
+name: Validate documentation build
+
+on:
+  pull_request:
+    branches:
+      - main
+
+permissions:
+  contents: read
+
+jobs:
+  docs-validate:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@d632683dd7b4114ad314bca15554477dd762a938 # v4.2.0
+
+      - name: Set up Python
+        uses: actions/setup-python@f677139bbe7f9c59b41e40162b753c062f5d49a3 # v5.2.0
+        with:
+          python-version: '3.x'
+          cache: 'pip'
+
+      - name: Install dependencies
+        run: make install
+
+      - name: Validate documentation build
+        run: make build

Makefile

@@ -0,0 +1,15 @@
+.PHONY: help install serve build
+
+.DEFAULT_GOAL := help
+
+help: ## Show this help message
+	@grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | sort | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-15s\033[0m %s\n", $$1, $$2}'
+
+install: ## Install documentation dependencies
+	pip install -r requirements.txt
+
+serve: install ## Serve documentation locally
+	mkdocs serve
+
+build: install ## Build documentation with strict mode
+	mkdocs build --strict

custom_theme/main.html

@@ -3,10 +3,10 @@
 {% block footer %}
 {{ super() }}
 <p style="font-size:18px;text-align:center">We are a Cloud Native Computing Foundation sandbox project.</p>
-<p style="text-align:center"><picture>
-  <source media="(prefers-color-scheme: light)" srcset="https://www.cncf.io/wp-content/uploads/2022/07/cncf-white-logo.svg">
-  <img src="https://www.cncf.io/wp-content/uploads/2022/07/cncf-color-bg.svg" width=300 />
-</picture></p>
+<p style="text-align:center">
+  <img src="https://www.cncf.io/wp-content/uploads/2022/07/cncf-white-logo.svg" width=300 class="cncf-logo-dark" />
+  <img src="https://www.cncf.io/wp-content/uploads/2022/07/cncf-color-bg.svg" width=300 class="cncf-logo-light" />
+</p>
 <p style="font-size:12px;text-align:center">The Linux Foundation® (TLF) has registered trademarks and uses trademarks. For a list of TLF trademarks, see <a href="https://www.linuxfoundation.org/legal/trademark-usage">Trademark Usage</a>.</p>
-<p style="font-size:12px;text-align:left">OSCAL Compass was originally contributed by IBM.</a></p>
+<p style="font-size:12px;text-align:left">OSCAL Compass was originally contributed by IBM.</p>
 {% endblock %}

docs/.pages

@@ -2,3 +2,4 @@ nav:
     - Welcome to OSCAL Compass: index.md
     - About OSCAL Compass: about.md
     - OSCAL Compass Community: community.md
+    - Trestle Docs: https://oscal-compass.dev/compliance-trestle/

docs/css/extra.css

@@ -0,0 +1,7 @@
+/* Show/hide CNCF logo based on active color scheme */
+[data-md-color-scheme="default"] .cncf-logo-dark {
+  display: none;
+}
+[data-md-color-scheme="slate"] .cncf-logo-light {
+  display: none;
+}

mkdocs.yml

@@ -11,17 +11,29 @@ theme:
   name: material
   custom_dir: custom_theme/
   palette:
-    scheme: slate
-    primary: indigo
-    accent: lime
+    - scheme: slate
+      primary: black
+      accent: purple
+      toggle:
+        icon: material/brightness-4
+        name: Switch to light mode
+    - scheme: default
+      primary: black
+      accent: purple
+      toggle:
+        icon: material/brightness-7
+        name: Switch to dark mode
   favicon: img/oscal-compass-icon-1200x1200.png
   logo: img/oscal-compass-icon-1200x1200.png
   font:
     text: Sen
     code: Azeret Mono
   features:
     - navigation.footer
-  extra:
-    social:
-      - icon: fontawesome/brands/github
-        link: https://github.com/oscal-compass
+    - navigation.tabs
+extra:
+  social:
+    - icon: fontawesome/brands/github
+      link: https://github.com/oscal-compass
+extra_css:
+  - css/extra.css

requirements.txt

@@ -0,0 +1,2 @@
+mkdocs-material>=9.6.0
+mkdocs-awesome-pages-plugin>=2.10.0