Nightglass Premium Dark Theme for Domoticz

What is Nightglass?

Nightglass is a drop-in theme for Domoticz. Clone the repository into Domoticz's www/styles/ directory — custom.css and custom.js are thin loaders that pull in the full theme from the src/css/ and src/js/ modules — and your dashboard is transformed.

The CSS layer handles all visual styling: color tokens, card layout, glassmorphism login, responsive navbar, and full dark/light mode support via a single body.dz-light class toggle. The JS layer adds intelligence: automatic Font Awesome icon replacement for every device type, live sparkline micro-charts, a command palette, keyboard shortcuts, cloud-synced settings, and more.

Installation

Nightglass is a drop-in theme. No build step, no Node, no dependencies — clone it once and activate in Domoticz settings.

cd /home/pi/domoticz/www/styles/

git clone https://github.com/galadril/Domoticz-Nightglass-Theme.git nightglass

cd nightglass && git pull

sudo systemctl restart domoticz

Visual Design

Nightglass uses a deep navy color palette with a single cool-blue accent that carries all interactive meaning — links, focus rings, active borders, and on-state icon color. Surface depth is created by stepping through surface-container levels, not by varying hue.

Color Token Reference

All colors are CSS custom properties defined in :root (dark) and overridden in body.dz-light (light). Never hardcode hex values.

Smart Features

The JS layer adds a layer of intelligence on top of the Domoticz AngularJS application without modifying any Domoticz files.

Live WebSocket Updates

Real-time card updates via Angular's device_update events — device values, icons, and timestamps update without any page refresh. State changes trigger a brief flash animation to draw your eye to what just changed.

Sparkline Micro-Charts

Every sensor card that supports history (temperature, humidity, rain, wind speed, counters, UV index) gets an inline SVG area chart injected beneath the value. Data is fetched from the Domoticz JSON API and rendered as a 24-hour trend.

Timestamp Formatting

Raw Domoticz timestamps are reformatted to human-readable relative labels: today 3:42 pm, yesterday 10:15 am, Apr 3, 2:00 pm. Each card gets a pinned footer bar with the formatted timestamp.

Ace Editor & Highcharts Theming

The Events page Ace editor automatically applies and persists your chosen theme. Highcharts panels (device history, reports) get a full dark or light palette applied globally — no chart looks out of place.

Icon System

Every Domoticz PNG device image is automatically replaced with a Font Awesome 7 icon using a two-pass replacement strategy: initial scan on load, then delta updates via MutationObserver watching image src attribute changes.

Device Map

90+ device types are mapped in DEVICE_MAP inside src/js/icons.js. Each entry specifies an icon class, an on-state color, and an off-state color:

// Add a new device type to DEVICE_MAP:
"ChargingStation48": {
    icon:     "fa-solid fa-charging-station",
    colorOn:  "#4e9af1",
    colorOff: "#6c757d"
}

Per-Device Overrides

Individual devices can override their icon and color from the Nightglass Settings panel in Domoticz — no code changes needed. See Per-Device Overrides.

Special Behaviors

Keyboard Shortcuts

Nightglass turns your keyboard into a dashboard remote. Three distinct shortcut systems cover navigation, search, and device control.

Quick Navigation — Number Keys

Press a number key (when no input is focused) to instantly jump to a section:

Page Filter — /

Quickly find a device on the current page. Type to filter, navigate with ↑ ↓, press Enter to scroll to and flash-highlight the device. Press Esc to close.

Command Palette — Ctrl + K

A Spotlight-style overlay for global device control from any page. Press Ctrl + K (or ⌘K on Mac) anywhere to open it.

Command Palette Features

• Fuzzy search — type lvng lght to find "Living Room Light"
• Favorites first — shows starred devices by default
• Live state — current on/off/level/temp with color coding
• Dimmer slider — inline 0–100% brightness control
• Smart routing — auto-navigates to the correct page for each device type

Filter Bar

A multi-dimensional filter panel that replaces Domoticz's native room selector on every device page — pure client-side, zero page reloads.

The filter bar appears below the top bar on all category pages (Dashboard, Switches, Temperature, etc.). It offers four filter dimensions that can be combined:

All filtering is AND-ed across dimensions and OR-ed within each dimension. The filter bar patches Angular's dashboardService.loadFavorites and livesocket.getJson to always fetch all devices (not just the current room's subset), so every device is in the DOM for instant client-side show/hide.

Theme Presets

16 built-in palettes selectable with a single click in the Nightglass settings panel. Each preset defines a complete dark and light color system.

Color Editor

Fine-tune every color role with a live preview. Changes take effect instantly on the Domoticz interface behind the settings panel.

The color editor exposes these categories independently for dark and light mode:

• Accent colors — primary accent, danger, warning, success
• Background & surfaces — page background, navbar, card fill, elevated surfaces
• Borders — card borders, divider lines
• Text — primary, secondary, and muted text hierarchy

Per-Device Icon Overrides

Assign a custom Font Awesome icon, on-color, and off-color to any individual device — no code changes required.

Open the Nightglass settings panel, navigate to Per-Device Icons, search for your device by name or idx, then pick any Font Awesome 7 icon from the visual picker and choose your colors. The override is stored as a Domoticz user variable and syncs across browsers.

• Visual icon picker with live search across all Font Awesome icons
• Color pickers for on-state and off-state colors with live preview
• Overrides take effect immediately without page reload
• Remove any override to revert to the automatic icon from DEVICE_MAP

Sync & Export

Nightglass settings are stored as Domoticz user variables (ngTheme_*) via the JSON API — your theme automatically follows you to any browser or device connected to the same Domoticz server.

Import / Export

The settings panel has one-click Export and Import buttons. Export saves your full color theme, feature flags, and icon overrides as a single JSON file that can be shared with the community or backed up.

Settings Reference

All settings are accessible at Setup → Settings → Nightglass.

Display

Card Features

Icons

Advanced

Dark / Light Mode

Nightglass ships with a full peer dark and light color system — light mode is not an afterthought, every color token has a light-mode counterpart.

The sun/moon button injected into the navbar cycles between dark → light → auto. In auto mode the OS prefers-color-scheme is respected and live OS theme changes are applied without a reload. The preference is stored in localStorage under the key dz-theme-style.

Light mode is implemented as a single body.dz-light class override — all dark-mode tokens in :root are re-declared in body.dz-light with light-palette values. This means any third-party CSS targeting Domoticz elements will also respond correctly if it uses the --dz-* variables.

Troubleshooting

Theme not showing after installation

Make sure the theme folder is directly inside www/styles/ and contains both custom.css and custom.js plus the src/ directory. Restart Domoticz once after cloning, then select the theme by folder name in Setup → Settings → Interface → Theme.

Icons not replacing / showing broken images

The icon replacement patches into Angular's rendering cycle. If icons appear as broken PNGs, check the browser console for JS errors. Make sure Font Awesome is loading — it ships with Domoticz but can be blocked by ad-blockers. Try disabling extensions.

Sparklines not appearing

Sparklines require a successful call to json.htm?type=graph. If the Domoticz API is unreachable from the client, they silently skip. Enable debug logging in the Nightglass settings panel and check the browser console for [SP] log lines.

Settings not saving

Nightglass saves settings as Domoticz user variables. Ensure the Domoticz user account has write access. If the API call fails, settings fall back to localStorage for the current session but won't sync to other browsers.

Filter bar not showing all rooms

Room pills are built from the Domoticz plans API. If a plan has no devices, it won't appear. The filter bar fetches plan data once on init — if it was loaded before plans were ready, reload the page.

Updating

To update Nightglass to the latest version:

cd /home/pi/domoticz/www/styles/nightglass
git pull

No Domoticz restart required for updates — the browser loads the new files on next page visit. Hard-refresh (Ctrl+Shift+R) if you see stale CSS or JS due to browser caching.

Support & Donate

Found a bug? Have a feature request? Open an issue on GitHub — pull requests are very welcome.

Buy me a coffee

If Nightglass has made your Domoticz experience better, a small donation is always appreciated. It keeps the project going and the coffee warm.