Onyx Dark Mode Switcher

A lightweight WordPress plugin that lets your visitors switch between light and dark mode in one click.

Install it, activate it, and you are done. Onyx reads the colors your theme actually renders and works out a matching dark palette on its own, so there is no stylesheet to write and no theme to configure. It works with any WordPress theme.

Dark mode is applied before the page paints, so visitors never see a flash of white before the page turns dark. Their choice is remembered on their next visit.

Everything below is optional. Onyx is useful the moment you activate it, and every setting is there for the day you want to fine tune it.

Ways to Turn Dark Mode On

Dark mode does not have to be a button your visitors go looking for. Choose whichever of these suit your audience, or use them together.

• One click switch – a floating toggle button on every page
• OS Aware Dark Mode – follows the visitor’s own system setting, from their very first visit
• Scheduled Dark Mode – turns on automatically between two times, for example 20:00 to 06:00. Times follow each visitor’s own clock, not your server’s, and windows that run past midnight are handled properly
• Dark Mode on Start – open the site in dark mode by default
• Keyboard shortcut – visitors press Ctrl+Shift+D
• Your own button – point Onyx at any CSS selector on your site and that element becomes the switch
• Switch in the menu – add the toggle to any WordPress navigation menu, with its own size and margins

Whichever route a visitor takes, their choice is remembered on their next visit.

A Switch Button You Can Style

The floating button is meant to look like part of your design, not like a plugin.

• 12 light icons and 14 dark icons – suns, moons, sunrise and sunset, cloud and bulb variants
• 4 shapes – square, round, rounded square and an animating blob
• 8 screen positions, each with its own offset in pixels
• Button size and icon size
• Separate background and icon colors for light mode and dark mode
• Adjustable drop shadow – horizontal, vertical, blur and color
• Optional tooltip with your own wording

13 Color Presets, or Your Own

Pick a ready made dark palette or build one yourself. The Colors tab previews your choice live, before you save.

• 13 presets, from neutral charcoal through deep blue, violet, forest, amber and true black
• A full custom palette – background, secondary background, text, links and link hover, inputs and placeholders, borders, and buttons including their hover state
• Live preview that updates as you pick a preset or edit a color
• Per selector color overrides – for the occasional element the automatic pass gets wrong, give it a CSS selector and set its background, text and border colors directly

Images, Video and SVG

The parts of a page that most often look wrong in dark mode are the ones that carry their own colors. Onyx gives each of them a control.

• Replace images – serve a different image file in dark mode, one for one. Ideal for a dark version of your logo
• Invert images – flip specific images so line art and diagrams stay readable
• Invert SVGs – smart inversion for inline SVG icons and graphics
• Image grayscale – soften photography in dark mode
• Video grayscale – the same treatment for embedded video
• Darken background images – dim CSS background images, with the level under your control

Decide Where Dark Mode Applies

Some pages should never go dark. A checkout, a photo gallery, a landing page built in brand colors.

• Skip selectors – list HTML tags, classes or IDs that dark mode should leave alone
• Apply button styles to classes – name the classes your theme uses for buttons so they recolor correctly
• Disable per post type – switch dark mode off for single entries of any post type
• Disable per page – tick one box in the Onyx Dark Mode panel in the editor sidebar and that entry always renders in its normal colors

Custom Code

For when you want the last word.

• Custom CSS – loaded alongside the generated dark mode styles
• Before and after toggle JavaScript – run your own code every time a visitor switches, on both sides of the toggle

Tools

• Export every setting to a JSON file as a backup
• Import that file on another site to set it up in one step
• Reset everything back to the defaults it shipped with

Built to Stay Out of the Way

• No flash of light content – the mode is resolved before the browser paints
• Admin styles and scripts load only on the plugin’s own settings screen, never across your dashboard
• No third party libraries, no tracking, no bloat
• Translation ready