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.
This commit is contained in:
Hayden
2026-05-31 10:12:50 -05:00
parent 15b3e59c55
commit 845b2c2c73
3 changed files with 30 additions and 2 deletions

View File

@@ -17,6 +17,31 @@
--md-default-accent-bg-color: #1f1e1e; --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 */ /* frontpage elements */
.tx-hero h1 { .tx-hero h1 {
font-size: 2.41rem !important; font-size: 2.41rem !important;
@@ -64,7 +89,7 @@ th {
} }
.announce-left > a { .announce-left > a {
color: #e0e0e0; color: var(--md-default-fg-color);
font-weight: bold; font-weight: bold;
} }

View File

@@ -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. 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 ## 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) - 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)

View File

@@ -27,6 +27,9 @@ theme:
- navigation.tabs.sticky - navigation.tabs.sticky
favicon: assets/img/favicon.png favicon: assets/img/favicon.png
name: material name: material
font:
text: Roboto
code: Roboto Mono
icon: icon:
logo: material/silverware-variant logo: material/silverware-variant