How to Customize Hermes WebUI Themes and Skins for Dark, Light, and Custom Looks

Jun 3, 2026

Problem

Most chat UIs offer a single dark or light toggle with no accent customization. I spend hours in the interface and wanted visual variety. A flat color scheme gets tiring when you are running long AI sessions.

The Two-Axis System

Hermes WebUI splits appearance into two independent axes:

Theme (system, dark, light) drives background and text colors
Skin drives only the accent palette

You can combine any theme with any skin, giving you 33 combinations out of the box.

Built-In Themes and Skins

There are 3 built-in themes:

System — follows your OS preference
Dark — dark background
Light — light background

There are 11 built-in skins with distinct accent palettes:

Skin	Accent Style
default	Standard blue
ares	Fiery red
mono	Neutral gray
slate	Cool slate
poseidon	Ocean blue
sisyphus	Warm earth
charizard	Bold orange
sienna	Soft brown
catppuccin	Mauve accent
nous	Minimal white
geist-contrast	High contrast

How to Switch

You can switch instantly via Settings -> Appearance with a live preview. Or you can use slash commands in the composer:

/theme dark
/theme poseidon
/theme sienna

Both choices persist across reloads via localStorage and server-side settings.json.

Creating a Custom Skin

Custom skins require only a few CSS variables. Here is an example:

:root[data-skin="my-skin"] {
  --accent:           #2E7D32;
  --accent-hover:     #1B5E20;
  --accent-bg:        rgba(46,125,50,0.08);
  --accent-bg-strong: rgba(46,125,50,0.15);
  --accent-text:      #1B5E20;
}

.dark[data-skin="my-skin"] {
  --accent:           #4CAF50;
  --accent-hover:     #66BB6A;
  --accent-bg:        rgba(76,175,80,0.12);
  --accent-bg-strong: rgba(76,175,80,0.20);
  --accent-text:      #A5D6A7;
}

Skins use data-skin plus CSS variables. Dark mode resolves through the .dark class. No backend changes are needed — it is pure CSS.

Common Mistakes

I made two mistakes when I first tried to customize the look:

Trying to edit Python to change appearance — the styling is pure CSS, no backend changes needed.
Confusing theme with skin — theme changes the background, skin changes the accent color. They are independent.

Summary

In this post, I showed how to customize Hermes WebUI themes and skins. The key point is that the two-axis system gives you fine-grained control over appearance without touching any code. Pick a built-in combination or define your own skin with a few CSS variables.

Final Words + More Resources

My intention with this article was to help others share my knowledge and experience. If you want to contact me, you can contact by email: Email me

Here are also the most important links from this article along with some further resources that will help you in this scope:

👨‍💻 Hermes WebUI GitHub Repository
👨‍💻 Hermes WebUI THEMES Documentation

Oh, and if you found these resources useful, don’t forget to support me by starring the repo on GitHub!