Update theme colors and fonts to match armbian.com

[igorpecovnik]

Summary

• Switch primary/accent color from red to Armbian orange (#F26522)
• Use DM Sans (body) and JetBrains Mono (code) fonts to match the new website
• Applied to both light and dark mode schemes

Test plan

• Verify colors render correctly in light mode
• Verify colors render correctly in dark mode
• Check font loading works

Documentation website preview will be available shortly:

 Open WWW preview 

[coderabbitai]

Walkthrough

The pull request updates the Armbian documentation site's styling configuration. CSS custom properties are added to define Armbian brand colors (primary and accent colors with variants) applied to the global :root and slate color scheme selectors. Concurrently, the MkDocs Material theme configuration is updated to specify custom fonts—DM Sans for text and JetBrains Mono for code—and both the default and slate color schemes are modified to reference a custom primary and accent color instead of red.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main change: updating theme colors and fonts to match armbian.com, which aligns perfectly with the PR's primary objectives.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description check	✅ Passed	The pull request description clearly explains the changes: switching colors from red to Armbian orange (#F26522), updating fonts to DM Sans and JetBrains Mono, and applying to both light and dark modes, which directly aligns with the changeset in mkdocs.yml and the new CSS file.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch update-theme-colors-fonts

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

docs/css/armbian-extra.css (1)

2-16: Consolidate duplicated token declarations.

The :root and slate blocks are identical. Merging them into one selector list reduces drift risk.

♻️ Refactor suggestion

-:root {
-  --md-primary-fg-color: `#F26522`;
-  --md-primary-fg-color--light: `#FF8B1A`;
-  --md-primary-fg-color--dark: `#DC5819`;
-  --md-accent-fg-color: `#F26522`;
-  --md-accent-fg-color--transparent: `#F2652218`;
-}
-
-[data-md-color-scheme="slate"] {
+:root,
+[data-md-color-scheme="slate"] {
   --md-primary-fg-color: `#F26522`;
   --md-primary-fg-color--light: `#FF8B1A`;
   --md-primary-fg-color--dark: `#DC5819`;
   --md-accent-fg-color: `#F26522`;
   --md-accent-fg-color--transparent: `#F2652218`;
 }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@docs/css/armbian-extra.css` around lines 2 - 16, The two identical CSS blocks
for :root and [data-md-color-scheme="slate"] should be consolidated into a
single selector list to avoid duplicated token declarations; replace the two
separate blocks with one combined selector (":root,
[data-md-color-scheme=\"slate\"]") containing the shared custom properties
(--md-primary-fg-color, --md-primary-fg-color--light,
--md-primary-fg-color--dark, --md-accent-fg-color,
--md-accent-fg-color--transparent) so the variables are defined once for both
contexts.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@docs/css/armbian-extra.css`:
- Around line 3-7: The :root and [data-md-color-scheme="slate"] theme blocks
define --md-primary-fg-color but omit --md-primary-bg-color, causing
insufficient contrast on primary surfaces; add an explicit --md-primary-bg-color
in both blocks (in :root set a dark-text background that pairs with the orange
foreground, e.g., a very light/neutral background color for normal text
readability, and in [data-md-color-scheme="slate"] set a dark background or
light text background appropriate for the dark scheme) so that
--md-primary-fg-color / --md-primary-bg-color meet WCAG AA (>=4.5:1) for normal
text. Ensure you add the variables alongside the existing --md-primary-fg-color
and --md-accent-fg-color declarations so the theme uses the explicit background
instead of the white default.

---

Nitpick comments:
In `@docs/css/armbian-extra.css`:
- Around line 2-16: The two identical CSS blocks for :root and
[data-md-color-scheme="slate"] should be consolidated into a single selector
list to avoid duplicated token declarations; replace the two separate blocks
with one combined selector (":root, [data-md-color-scheme=\"slate\"]")
containing the shared custom properties (--md-primary-fg-color,
--md-primary-fg-color--light, --md-primary-fg-color--dark, --md-accent-fg-color,
--md-accent-fg-color--transparent) so the variables are defined once for both
contexts.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: d1f5027a-08a4-4de5-9ad8-1e8b922d4441

📥 Commits

Reviewing files that changed from the base of the PR and between bd3a6b0 and a18677e.

📒 Files selected for processing (2)

• docs/css/armbian-extra.css
• mkdocs.yml