Title: Onyx Dark Mode Switcher Author: hashthemes Published: January 15, 2026 Last modified: October 2, 2026 --- Search plugins ![](https://ps.w.org/onyx-dark-mode-switcher/assets/banner-772x250.jpg?rev=3442657) ![](https://ps.w.org/onyx-dark-mode-switcher/assets/icon-256x256.gif?rev=3724147) # Onyx Dark Mode Switcher By [hashthemes](https://profiles.wordpress.org/hashthemes/) [Download](https://downloads.wordpress.org/plugin/onyx-dark-mode-switcher.1.1.2.zip) * [Details](https://en-ca.wordpress.org/plugins/onyx-dark-mode-switcher/#description) * [Reviews](https://en-ca.wordpress.org/plugins/onyx-dark-mode-switcher/#reviews) * [Installation](https://en-ca.wordpress.org/plugins/onyx-dark-mode-switcher/#installation) * [Development](https://en-ca.wordpress.org/plugins/onyx-dark-mode-switcher/#developers) [Support](https://wordpress.org/support/plugin/onyx-dark-mode-switcher/) ## Description 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 ## Screenshots [⌊Settings tab - enable dark mode, OS aware mode, scheduled hours, keyboard shortcut and content exclusions⌉⌊Settings tab - enable dark mode, OS aware mode, scheduled hours, keyboard shortcut and content exclusions⌉[ Settings tab – enable dark mode, OS aware mode, scheduled hours, keyboard shortcut and content exclusions [⌊Switch tab - icon, shape, position, size, colors, shadow and tooltip for the toggle button⌉⌊Switch tab - icon, shape, position, size, colors, shadow and tooltip for the toggle button⌉[ Switch tab – icon, shape, position, size, colors, shadow and tooltip for the toggle button [⌊Switch tab - adding the switch to a navigation menu, and using your own element as the switch⌉⌊Switch tab - adding the switch to a navigation menu, and using your own element as the switch⌉[ Switch tab – adding the switch to a navigation menu, and using your own element as the switch [⌊Image/Video tab - image and video grayscale, background darkening, image replacement and SVG inversion⌉⌊Image/Video tab - image and video grayscale, background darkening, image replacement and SVG inversion⌉[ Image/Video tab – image and video grayscale, background darkening, image replacement and SVG inversion [⌊Colors tab - 13 presets, the custom palette and the live preview⌉⌊Colors tab - 13 presets, the custom palette and the live preview⌉[ Colors tab – 13 presets, the custom palette and the live preview [⌊Colors tab - per selector color overrides⌉⌊Colors tab - per selector color overrides⌉[ Colors tab – per selector color overrides [⌊Custom Code tab - custom CSS and before/after toggle JavaScript⌉⌊Custom Code tab- custom CSS and before/after toggle JavaScript⌉[ Custom Code tab – custom CSS and before/after toggle JavaScript [⌊Tools tab - export, import and reset⌉⌊Tools tab - export, import and reset⌉[ Tools tab – export, import and reset [⌊Disabling dark mode on a single page from the editor sidebar⌉⌊Disabling dark mode on a single page from the editor sidebar⌉[ Disabling dark mode on a single page from the editor sidebar [⌊Front end - a page in light mode⌉⌊Front end - a page in light mode⌉[ Front end – a page in light mode [⌊Front end - the same page in dark mode⌉⌊Front end - the same page in dark mode⌉[ Front end – the same page in dark mode ## Installation The easy way to install the plugin is via WordPress.org plugin directory. 1. Go to WordPress Dashboard > Plugins > Add New 2. Search for “Onyx Dark Mode Switcher” and install the plugin. 3. Activate Plugin from “Plugins” menu in WordPress. Once activated, the settings live under **Onyx Dark Mode Switcher** in your WordPress admin menu. ## FAQ ### Do I have to configure anything? No. Dark mode is on as soon as you activate the plugin, and the switch button appears on your site straight away. Everything else is optional. ### Will it work with my theme? Yes. Onyx does not depend on your theme’s stylesheet. It reads the colors your pages actually render and works out the dark equivalents, so it works with any theme, including page builder layouts. ### One element looks wrong in dark mode. Can I fix just that? Yes, two ways. Give its CSS selector a color override on the Colors tab to set exactly the background, text and border colors you want. Or add it to “Skip Dark Mode on Selectors” on the Settings tab to leave it in its original colors. ### Is the visitor’s choice remembered? Yes. It is stored in their browser and reapplied on their next visit. If their browser blocks storage, the switch still works for that visit, it just is not remembered. ### Does Scheduled Dark Mode use my server’s time zone? No. It follows each visitor’s own clock, so a visitor’s evening is their evening wherever they are. A window that ends earlier than it starts, such as 20:00 to 06: 00, runs overnight. ### Can I keep dark mode off a specific page? Yes. Open the post or page and tick “Disable dark mode on this page” in the Onyx Dark Mode box in the sidebar. To do it for an entire post type, use “Disable on Post Types” on the Settings tab. ### Can I use my own button instead of the floating one? Yes. Enter any CSS selector under “Use Custom Switch Button” on the Switch tab and clicking that element toggles dark mode. You can also add the switch to a navigation menu, or turn the floating button off entirely. ### Is there a keyboard shortcut? Yes, Ctrl+Shift+D, once you enable it on the Settings tab. ### Will it slow my site down? No. There are no third party libraries, and the admin assets load only on the plugin’s own settings screen. On the front end the mode is resolved before the browser paints, which is what prevents the usual flash of white on load. ### Can I move my settings to another site? Yes. Export them to a JSON file from the Tools tab and import that file on the other site. ## Reviews There are no reviews for this plugin. ## Contributors & Developers “Onyx Dark Mode Switcher” is open source software. The following people have contributed to this plugin. Contributors * [ hashthemes ](https://profiles.wordpress.org/hashthemes/) [Translate “Onyx Dark Mode Switcher” into your language.](https://translate.wordpress.org/projects/wp-plugins/onyx-dark-mode-switcher) ### Interested in development? [Browse the code](https://plugins.trac.wordpress.org/browser/onyx-dark-mode-switcher/), check out the [SVN repository](https://plugins.svn.wordpress.org/onyx-dark-mode-switcher/), or subscribe to the [development log](https://plugins.trac.wordpress.org/log/onyx-dark-mode-switcher/) by [RSS](https://plugins.trac.wordpress.org/log/onyx-dark-mode-switcher/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 1.1.2 – 2 Oct 2026 * Compatibility with WordPress 7.1 * Replaced deprecated jQuery calls, ready for jQuery 4 #### 1.1.1 – 14 Aug 2026 * Color overrides written as a list, such as “.site-header, #footer”, now apply only in dark mode. Everything after the first comma was being applied in light mode too * Custom CSS no longer drops backslashes, so icon font rules like content: “\f101” survive a save * Button shadow color is now validated as a color, in line with every other color setting * An unrecognised color value is discarded cleanly instead of writing broken CSS or raising notices on PHP 8.1 and above #### 1.1.0 – 4 Aug 2026 * Live color preview on the Colors tab – see a preset before you save it * Override colors for specific CSS selectors, for the elements the automatic pass gets wrong * New Tools tab – export settings to a file, import them on another site, or reset everything to defaults * Button hover colors now actually apply. They were collected in the settings but never output * Custom palettes with blank fields no longer emit broken CSS * Fixed unclosed markup in the Colors tab * Scheduled Dark Mode – turn dark mode on automatically between two times * Disable dark mode per post type from the settings * Disable dark mode on an individual post or page from the editor sidebar * Dark mode is now applied before the page paints, removing the flash of light content on load * OS Aware Dark Mode now applies on a visitor’s first visit, not only when the system setting changes * Custom CSS and Custom JavaScript are no longer corrupted on save * Toggle events now fire on every switch instead of only the first * Fixes for the custom switch selector, button class list and settings sanitization #### 1.0.3 – 30 Jul 2026 * CSS fixes * Compatibility fixes with WordPress v 7.0 #### 1.0.2 – 13 Feb 2026 * Media upload button not working – Fixed * Added more color Schemes * Code refinements #### 1.0.1 – 17 Jan 2026 * Option for custom code added #### 1.0.0 * Release ## Meta * Version **1.1.2** * Last updated: **1 week ago** * Active installations: **300+** * WordPress Version: ** 6.3 or higher ** * Tested up to: **7.1.3** * PHP Version: ** 7.2 or higher ** * Language * [English (US)](https://wordpress.org/plugins/onyx-dark-mode-switcher/) * Tags: * [dark mode](https://en-ca.wordpress.org/plugins/tags/dark-mode/)[Night Mode](https://en-ca.wordpress.org/plugins/tags/night-mode/) * [Advanced View](https://en-ca.wordpress.org/plugins/onyx-dark-mode-switcher/advanced/) ## Ratings No reviews have been submitted yet. [Your review](https://wordpress.org/support/plugin/onyx-dark-mode-switcher/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/onyx-dark-mode-switcher/reviews/) ## Contributors * [ hashthemes ](https://profiles.wordpress.org/hashthemes/) ## Support Got something to say? Need help? [View support forum](https://wordpress.org/support/plugin/onyx-dark-mode-switcher/)