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.

Read the full description on the official page →