From 845b2c2c734f3d8b71f2037d5609a23be0c73584 Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Sun, 31 May 2026 10:12:50 -0500
Subject: [PATCH] fix(docs): restore classic Material look under Zensical's
 modern theme

Zensical ships a redesigned "modern" theme: a flat header that uses the page
background color and the Inter typeface, rather than Material's colored app-bar
and Roboto, and it keeps links / the nav active-item pill / the announce banner
on its default indigo accent. The mealie palette and custom.css load fine, but
the modern theme no longer wires --md-primary-fg-color to the header, and the
indigo accent clashes with the brand orange.

- mkdocs.yml: set theme.font to Roboto / Roboto Mono (Zensical honors theme.font)
- custom.css:
  - restore the orange app-bar (.md-header/.md-tabs) from --md-primary-fg-color
  - brand the accent (links, nav active pill, announce banner) by overriding
    --md-typeset-a-color and --md-accent-fg-color[--transparent]; the
    [scheme][primary] selector matches the theme's own (0,2,0) rules so it wins
    in both light (mealie) and dark (slate) modes
  - make the announce banner text adaptive so it is readable in light mode
    (was hardcoded light-gray, invisible on the modern theme's light banner)
- ai-providers.md: fix a broken self-referential link surfaced by Zensical's
  build check ("backend configuration" now points to backend-config.md)

Verified with headless-Chrome screenshots in both light and dark mode:
`zensical build` is clean ("No issues found"); Roboto fonts, orange header/tabs,
orange links, and a readable announce banner in both schemes.
---
 docs/docs/assets/stylesheets/custom.css       | 27 ++++++++++++++++++-
 .../installation/ai-providers.md              |  2 +-
 docs/mkdocs.yml                               |  3 +++
 3 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/docs/docs/assets/stylesheets/custom.css b/docs/docs/assets/stylesheets/custom.css
index e3fba385b..6103dcd8d 100644
--- a/docs/docs/assets/stylesheets/custom.css
+++ b/docs/docs/assets/stylesheets/custom.css
@@ -17,6 +17,31 @@
   --md-default-accent-bg-color: #1f1e1e;
 }
 
+/*
+ * Zensical's "modern" theme ships a flat header that uses the page background
+ * color. Restore the classic Material colored app-bar (and matching nav tabs)
+ * driven by the brand orange, and brand the link color to match.
+ */
+.md-header,
+.md-tabs {
+  background-color: var(--md-primary-fg-color);
+  color: var(--md-primary-bg-color);
+}
+
+/*
+ * Brand the accent colors. The modern theme leaves links, the nav active-item
+ * pill, and the announce banner on its default indigo accent (the latter two
+ * via --md-accent-fg-color--transparent), which clashes with the orange. The
+ * [scheme][primary] selector matches the theme's own (0,2,0) accent rules so
+ * the override wins in both light (mealie) and dark (slate) modes.
+ */
+[data-md-color-scheme="mealie"][data-md-color-primary="indigo"],
+[data-md-color-scheme="slate"][data-md-color-primary="indigo"] {
+  --md-typeset-a-color: var(--md-primary-fg-color);
+  --md-accent-fg-color: #e58325;
+  --md-accent-fg-color--transparent: #e583251a;
+}
+
 /* frontpage elements */
 .tx-hero h1 {
   font-size: 2.41rem !important;
@@ -64,7 +89,7 @@ th {
 }
 
 .announce-left > a {
-  color: #e0e0e0;
+  color: var(--md-default-fg-color);
   font-weight: bold;
 }
 
diff --git a/docs/docs/documentation/getting-started/installation/ai-providers.md b/docs/docs/documentation/getting-started/installation/ai-providers.md
index e3aebf047..af4e4972d 100644
--- a/docs/docs/documentation/getting-started/installation/ai-providers.md
+++ b/docs/docs/documentation/getting-started/installation/ai-providers.md
@@ -20,7 +20,7 @@ If you have another provider you'd like to use, such as Azure, you can configure
 
 Note that some models are capable of handling multiple features (e.g. `gpt-5` can handle both normal chat requests and image recognition requests). You may configure one provider for multiple provider features.
 
-While Mealie has prompts for each AI task, you can override these with your own prompts if you'd like. For more information, check out the [backend configuration](./installation/ai-providers.md).
+While Mealie has prompts for each AI task, you can override these with your own prompts if you'd like. For more information, check out the [backend configuration](./backend-config.md).
 
 ## AI Features
 - The OpenAI Ingredient Parser can be used as an alternative to the NLP and Brute Force parsers. Simply choose the OpenAI parser while parsing ingredients (:octicons-tag-24: v1.7.0)
diff --git a/docs/mkdocs.yml b/docs/mkdocs.yml
index 6f0f0f3bd..4ee409db0 100644
--- a/docs/mkdocs.yml
+++ b/docs/mkdocs.yml
@@ -27,6 +27,9 @@ theme:
     - navigation.tabs.sticky
   favicon: assets/img/favicon.png
   name: material
+  font:
+    text: Roboto
+    code: Roboto Mono
   icon:
     logo: material/silverware-variant