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.

The Feature Tour

The first time you load Nightglass while signed in, a short tour opens over the dashboard — eleven stops covering the hold gesture, the keyboard systems, the filter bar and the two panels that are otherwise hard to find. Every stop demonstrates itself with live theme components rather than screenshots, so it cannot go stale when a colour token changes.

← → move between stops, Esc leaves, and the row of icons along the bottom jumps straight to any chapter. It shows once per Domoticz account; under Settings → Nightglass → Appearance → Feature Tour, Show now replays it on the spot and Reset makes it open by itself again on the next load.

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 drawn across the whole card as a background watermark — faint enough to read the value straight over, and lifting slightly when you hover the card. 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.

Live Toasts

Device changes arriving on the WebSocket feed surface as toasts in the corner of the screen. The Event Filter defaults to meaningful — switches and event-style sensors only, so a temperature probe reporting every minute does not toast — and can be widened to every device change. Duration (2–10s), corner, and a per-device suppression list are all configurable under Live Notifications in the settings panel.

Notification History

Toasts are ephemeral; the history panel is the record. A bell in the navbar accumulates the last 50 device updates with an unread badge, and clicking an entry jumps to that device's card and highlights it. Open it from the bell or with N; Esc closes it. On desktop it slides in from the right, on mobile up from the bottom. The list is scoped to the devices your Domoticz account can see.

Animated Device Icons

Icons can carry a per-device animation chosen in the Icon Studio — spin, glow, flicker and six more. The whole layer is gated on Animate Device Icons, so a dashboard on a wall panel can keep the icons still.

Dashboard 2.0 Enhancements

Domoticz's Dashboard 2.0 (dd- widgets) gets the same treatment as the classic pages: glass card surfaces, entrance animations, a right-click context menu on widgets, and a fullscreen mode for wall-mounted displays.

Ace Editor & Highcharts Theming

The Events page Ace editor automatically applies and persists your chosen theme (in localStorage, under dz-ace-theme — it follows whatever you pick in Domoticz's own theme dropdown). 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

Light & Colour Control

Every place Domoticz asks for a colour is rebuilt: the device popup, and the in-page control on the device, scene, group and timer edit pages. Both drive Domoticz's own colour pipeline, so protected devices still prompt for a passcode and staged values (timers) still stage rather than send.

Hold to Switch

A click on a card icon does not always switch the device. Domoticz sends colour lights straight to the picker, so turning one off meant opening it and finding a preset. Press and hold the icon frame instead — about half a second — and the device switches on or off. A fill grows out of the centre of the frame while you hold, so you can see how much longer to keep pressing, and the frame blooms once the command is away. On a phone it buzzes too.

The gesture is offered on on/off switches, dimmers and colour lights — anything with a plain on and off. Devices without one stay as they are: a push button, a selector, a door lock, blinds and read-only sensors show no fill and keep their click. The click itself is untouched everywhere, so a colour light still opens the picker on a tap and protected devices still prompt for their passcode. Turn it off under Settings → Nightglass → Appearance → Hold to Switch.

The Device Popup

• Colour wheel — canvas hue/saturation wheel with a live preview swatch
• Warmth bar — cool-to-warm gradient for white and tunable-white lights
• Brightness — slider plus a typed percentage, whichever is quicker
• Presets — On and Off as one-press buttons, plus Full and Night on colour lights
• Instant apply — every control acts as you use it; there is no "Set Colour" step, and switching tabs deliberately does not send, so browsing the White tab can't turn an off light on

The popup adapts to the light: an RGB device gets the wheel only, RGBW/RGBWW gain a White tab, and WW/CW devices open straight onto the warmth bar.

Typing an Exact Colour or White

The preview field is editable. On the colour side it takes a hex value — type or paste #ff8800 instead of hunting for it on the wheel. On the warmth side it takes kelvin (2700–6500 K), which is the unit lamps are actually sold in; Domoticz's underlying warmth axis is a unitless 0–255, so an exact white was previously something you could drag to but never reproduce.

Recently Used Colours & Whites

Every picker in the theme feeds one shared strip of the last five colours you committed to — the popup, the in-page picker, the settings panel, per-device icon colours, and Domoticz's own colour fields (bar and gauge ranges, Dashboard 2.0 widget settings). Match two devices without copying a hex code around.

Colour temperatures keep a second, separate strip, shown beside the warmth bar and labelled in kelvin on hover. A white is not a hue: it drives a different control and can't stand in for a colour, so the two lists never crowd each other out. Setting the same 3200 K across a row of WW lamps is one click each.

Keyboard Shortcuts

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

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

Notification History — N

Toggles the notification panel — the last 50 device updates, so a change you missed is still there to read. Esc closes it. Like the number keys and /, it is ignored while an input is focused.

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 five 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.

Saving Your Own

Once you have the colours where you want them, Save current colors as preset adds them to the same grid alongside the sixteen built-ins, so you can jump back after experimenting — or keep one palette for the wall tablet and another for the desktop. Your presets are stored server-side with the rest of your settings and travel with them through export and import.

The built-in palettes ship as one JSON file each in the theme's themes/ directory and are fetched when the presets grid opens — which is why that directory has to come along with the rest of the repository.

Color Editor

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

Every role is edited as a pair — the dark value and the light value sit side by side in the same row, under Dark and Light headers, so a role can never be updated in one mode and forgotten in the other.

Each picker carries the shared recently used colours strip, so a colour used on a device is one click away here too.

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, go to Device Icons → Per-Device Icons, search for your device by name or idx, then pick any Font Awesome 7 icon from the Icon Studio and choose its colours and animation. Overrides are stored with the rest of your settings, server-side, so they follow you between browsers.

• Visual icon picker with live search across all Font Awesome icons, plus any extra libraries installed in Domoticz
• Separate on-state and off-state colours with live preview
• A per-device animation — spin, glow, flicker and six more
• Overrides take effect immediately without a page reload
• Remove any override to revert to the automatic icon from DEVICE_MAP

Extra Icon Libraries

Extra icon fonts are installed in Domoticz itself, under Setup → Custom Icons: give it a source URL and a class prefix and Domoticz downloads, stores and serves the library for every browser on the server.

• Nothing to configure in Nightglass — installed libraries appear in the Icon Studio on their own
• Each one gets its own group in the picker, searchable alongside Font Awesome
• Adding, refreshing and removing a library all happen on Domoticz's own page

Sync & Export

Nightglass settings live on the Domoticz server rather than in the browser, so your theme automatically follows you to any browser or device signed in to the same server.

Where Settings Are Stored

On current Domoticz builds the theme uses Domoticz's own per-user theme settings API — settings are attached to your Domoticz account, so two people sharing a server can each have their own palette. On older builds without that API, the theme falls back to user variables (ngTheme_settings, plus ngTheme_presets for saved palettes, which are kept separate to stay under the user-variable size cap). If the server cannot be reached at all, changes are held in localStorage for the session so the interface still behaves — they just don't sync anywhere.

Import / Export

The settings panel footer has one-click Export and Import buttons. Export saves your full colour theme, feature flags, saved presets and per-device icon overrides as a single JSON file to share or back up.

Settings Reference

All settings are accessible at Setup → Settings → Nightglass. The headings below are the panel's own sections, in the order they appear. Colour roles are covered separately under Color Editor.

Icons

Appearance

Effects & Animations

Live Notifications

Device Icons

Developer

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 [Spark] log lines.

No theme presets in the panel

The presets grid is built from the JSON files in the theme's themes/ directory, fetched when you open it. If that directory did not come along with the rest of the install, the fetches fail silently and the grid stays empty — copy the whole repository, or git pull in place, and reload.

Settings not saving

Settings are written to the Domoticz server for your user account. Make sure the account you are signed in with has write access, and that the session hasn't expired. If the server can't be reached, changes are kept in localStorage for the current session so the interface still responds — but they won't sync to other browsers, and a hard refresh may lose them.

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.