[ magikh0e: A Terminal-Style OPNsense Theme ]

magikh0e is a theme for the OPNsense web UI that makes the firewall look like
this site: grey text on near-black, the same olive green, JetBrains Mono for
everything and VT323 for the big headings. I run it on my own OPNsense box,
and I've proposed it for OPNsense's official plugin repository. Until it
lands there, if it does, this is where to get it.

  Download 1.0         theme-magikh0e-1.0.tar.gz, 261 KB
  Upstream proposal    opnsense/plugins#5912

  SHA-256  83f06a96187d541696f6211d6cc19b9edbc8b135c266e6b8c768b04ec10fa48b

It's tested on OPNsense 26.7. The theme is BSD 2-Clause, and the two bundled
fonts are under the SIL Open Font License.

These come from a test page built from OPNsense's own page and menu markup,
filled with made-up data, so none of it is my network.

Most of it is lifted straight from this site's stylesheet:

  - Page titles in VT323 with a soft green glow and the blinking block
    cursor from the terminal on the home page.
  - Sidebar submenus drawn as a tree, ├── and └──. The branches light up on
    hover, and the page you're on gets a green dot.
  - Tabs that work like the site's tab bar: a boxed green tab with a ●.
  - Content boxes that look like the cards here, a dark panel with a green
    left edge. Inputs copy the site's search box.
  - Buttons as tinted outlines that glow on hover and invert when pressed.
  - Status colors kept apart from the accent: prompt green for OK, cyan for
    info, gold for warnings and red for errors. Text and its background
    meet WCAG AA.
  - Faint scanlines, square corners and thin scrollbars.

The logo is the OPNsense wordmark redrawn in VT323 with the same block
cursor, and the favicon is a green prompt. Both are SVG with the text
turned into outlines, so they look right without the font installed.

The download holds the theme and a small install script. Copy it to the
firewall. SSH has to be on for this, under System > Settings > Administration:

  scp theme-magikh0e-1.0.tar.gz [email protected]:/tmp/

Then on the firewall, as root:

  cd /tmp && tar xzf theme-magikh0e-1.0.tar.gz
  sh theme-magikh0e-1.0/install.sh

It copies the theme to /usr/local/opnsense/www/themes/magikh0e. Pick
magikh0e under System > Settings > General > Theme, save, and do a hard
refresh with Ctrl+Shift+R.

To update, install the newer tarball the same way and hard-refresh again.
That refresh matters. OPNsense's cache-buster on theme files follows the
OPNsense version, not the theme, so a plain reload keeps showing the old CSS.

To remove it, switch to another theme first, then:

  rm -rf /usr/local/opnsense/www/themes/magikh0e

The colors are CSS variables at the top of the theme layer, the same values
magik.css uses here:

  --mk-bg      #0a0a0a   the page background
  --mk-green   #8fb65f   the accent
  --mk-text    #b0b0b0   body text

Change them in build/css/main.css on the firewall, or in
assets/stylesheets/_magikh0e.scss and recompile with Sass. A few things you
can switch off by deleting one rule:

  - The scanlines: body::after. They're already off for print and for
    anyone who asks their system for more contrast.
  - The blinking cursor: .page-content-head h1::after. It already stops
    for anyone with reduced motion turned on.
  - The tree lines: the rules under "the tree" in section 5.

It sits on Rebellion, the dark theme that already ships as an OPNsense
plugin, so every page and widget is covered: bootgrid and tabulator grids,
bootstrap-select, dialogs, charts and the dashboard. A script re-mapped every
color in Rebellion's stylesheet by its role, background, text or border, so
contrast survives the move to the new palette. On top of that sits the theme
layer with the fonts, the variables and this site's components.

The fiddly part was load order. OPNsense loads a few of its own stylesheets
after the theme's (grid, token field, dialog and dropdown styles), and where
they use the same selectors, they win. That's how the first build ended up
with 15px grid text, which is fine in Source Sans and far too wide in a
monospace font, plus a red page button and grey dialog titles. The fix is
boring: the theme's rules carry tag names, so they're just specific enough
to win. Plain inputs on the older PHP pages needed the same treatment,
because they don't use the class the newer pages do.

The fonts ship with the theme, so the firewall never fetches anything from a
CDN. JetBrains Mono and VT323 are both under the SIL Open Font License, and
the theme itself is BSD 2-Clause like the rest of OPNsense's plugins.

The one thing it can't touch is the dashboard's charts. Their colors come
from JavaScript, not CSS, so they keep OPNsense's own.

OPNsense asks for an issue before a new plugin's pull request, so I opened
one: opnsense/plugins#5912. If it's accepted, the theme will install like
the other themes, from System > Firmware > Plugins, and this page will point
there. Until then, the tarball above holds the same code I've lined up for
the pull request, with the install script added.