Cybersteel for Brave
The Cybersteel design system as a Chromium browser theme. Colors only — a
single manifest.json, no images.
Install
- Put this folder somewhere permanent (not Downloads — Brave reads it from disk every launch, so moving or deleting it breaks the theme).
- Open
brave://extensions - Turn on Developer mode (top right)
- Click Load unpacked and select this folder
Token mapping
Every value is lifted from colors_and_type.css, matched to the role the
token comments already describe.
| Chromium key | Token | Hex | Token's stated role |
|---|---|---|---|
frame |
--bg-shell |
#1d2021 |
topbar, sidebar, nav chrome |
background_tab |
--bg-shell |
#1d2021 |
unselected nav items sit on it |
toolbar |
--bg-page |
#313131 |
default canvas, main content |
omnibox_background |
--bg-surface |
#3c3836 |
input fields, panels, cards |
tab_text |
--fg-heading |
#fbf1c7 |
headings — the focused thing |
tab_background_text |
--fg-secondary |
#e0d0a8 |
labels, secondary descriptions |
toolbar_text |
--fg-body |
#f2e2ba |
primary readable content |
bookmark_text |
--fg-secondary |
#e0d0a8 |
labels |
toolbar_button_icon |
--gold-bright |
#fabd2f |
primary interactive, focus |
ntp_link |
--color-link |
#83a598 |
--blue-bright |
The toolbar's active-tab surface is --bg-page, so the browser reads as a
window frame (--bg-shell) wrapped around a canvas — the same shell/page
relationship the system uses on a web page.
Contrast
Measured WCAG ratios, all AAA:
active tab text 11.47:1
inactive tab text 10.74:1
inactive tab, unfocused 8.90:1
toolbar text 10.14:1
toolbar icons 7.67:1
bookmark text 8.52:1
omnibox text 9.04:1
Tweaks
Quieter toolbar icons — gold on every button is the loudest choice here.
For a neutral toolbar set toolbar_button_icon to [242, 226, 186]
(--fg-body); for something between, [215, 153, 33] (--gold-dim).
Visible tab edges — inactive tabs currently sit at --bg-shell so they
blend into the strip. Set the four background_tab* values to
[60, 56, 54] (--bg-surface) to give them a raised edge.
Darker toolbar — swap toolbar to [60, 56, 54] (--bg-surface) and
omnibox_background to [80, 73, 69] (--bg-active).
The tints are all [-1, -1, -1], meaning "no HSL shift". That stops
Chromium auto-darkening the frame when the window loses focus, since the
inactive colors are set explicitly instead.
What doesn't carry over
Roughly half of colors_and_type.css is the type system — IBM Plex
Sans/Mono, the 1.25 modular scale, the Art Deco tracking and uppercase
treatments. None of it can reach the browser: Chromium themes accept only
images, colors, tints, and properties. There is no font capability,
and no userChrome.css equivalent in Chromium.
The closest you can get is brave://settings/fonts — set the standard face
to IBM Plex Sans and the fixed-width face to IBM Plex Mono. That styles web
pages that don't specify their own fonts. It will not touch the tab strip,
toolbar, or menus, which follow the OS UI font.
Also note: Brave's New Tab page uses its own renderer, so the ntp_* values
mostly don't show. Set that wallpaper via the gear icon on the new tab page.