Extending the Dashboard
Extending the Dashboard
Start with meaning, then move to detail.
This lesson explains Extending the Dashboard as part of Hermes internals and extension points. You will learn what it does, when it matters, and the smallest safe test that proves it works.
If you are new, do not memorize names. Focus on three questions: what problem does this solve, what access does it need, and how can you verify the result?
For practice, inspect the first example, identify its effects, run it on test data, and compare the result with the source claim.
For advanced readers, inspect Table of contents, Themes, Quick start — your first theme, then verify failure modes and version compatibility.
Know Python, Git, and basic project structure before changing code.
A clear outcome before you read.
- Understand Extending the Dashboard without assumed prior knowledge.
- Separate the source description from what still needs testing in your environment.
- Read the first command and identify its inputs and outputs before copying it.
Build themes and plugins for the Hermes web dashboard — palettes, typography, layouts, custom tabs, shell slots, page-scoped slots, and backend API routes
What does the source say, and in what order?
- 01Table of contents
Start here to understand the core idea or structure.
- 02Themes
Read this after the foundation, then connect it to the previous step.
- 03Quick start — your first theme
Read this after the foundation, then connect it to the previous step.
- 04Palette, typography, layout
Read this after the foundation, then connect it to the previous step.
- 05Palette (3-layer)
Read this after the foundation, then connect it to the previous step.
- 06Typography
Read this after the foundation, then connect it to the previous step.
- 07Changing the font from the UI (no YAML)
Read this after the foundation, then connect it to the previous step.
- 08Layout
Read this after the foundation, then connect it to the previous step.
- 09Layout variants
Read this after the foundation, then connect it to the previous step.
- 10Theme assets (images as CSS vars)
Finish here to verify the result and special cases.
Copy only after you understand the effect.
mkdir -p ~/.hermes/dashboard-themes# ~/.hermes/dashboard-themes/neon.yaml
name: neon
label: Neon
description: Pure magenta on black
palette:
background: "#000000"
midground: "#ff00ff"palette:
background:
hex: "#05091a"
alpha: 1.0
midground: "#d8f0ff" # bare hex, alpha = 1.0
foreground:
hex: "#ffffff"
alpha: 0 # invisible top layer
warmGlow: "rgba(255, 199, 55, 0.24)"
noiseOpacity: 0.7Read the first command and identify its inputs and outputs before copying it.
Match every command to your installed Hermes version, review the files and accounts it can reach, and use non-sensitive data for the first test. If this explanation differs from the source, the official source wins.