{"id":383345,"date":"2026-10-12T13:08:18","date_gmt":"2026-10-12T13:08:18","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/plugnest-mini-dark\/"},"modified":"2026-10-12T13:08:10","modified_gmt":"2026-10-12T13:08:10","slug":"minidarkmode","status":"publish","type":"plugin","link":"https:\/\/sw.wordpress.org\/plugins\/minidarkmode\/","author":23581769,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"1.0","stable_tag":"1.0","tested":"7.1.3","requires":"6.0","requires_php":"7.2","requires_plugins":null,"header_name":"Mini Dark Mode","header_author":"PlugNest","header_description":"A featherweight dark mode toggle: switches one class and a set of CSS variables. No image filters, no src swapping \u2014 works alongside gallery and portfolio plugins. Color controls, floating or inline toggle button, keyboard shortcut and shortcode included.","assets_banners_color":"514b54","last_updated":"2026-10-12 13:08:10","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"","header_author_uri":"https:\/\/plugnest.dev","rating":0,"author_block_rating":0,"active_installs":0,"downloads":34,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0":{"tag":"1.0","author":"plugnest","date":"2026-10-12 13:08:10","revision":3741617}},"upgrade_notice":{"1.0":"<p>Initial release.<\/p>"},"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3741622,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3741622,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3741622,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3741622,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3741622,"resolution":"1","location":"assets","locale":"","width":1440,"height":690},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3741622,"resolution":"2","location":"assets","locale":"","width":1440,"height":1780},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3741622,"resolution":"3","location":"assets","locale":"","width":1440,"height":260},"screenshot-4.png":{"filename":"screenshot-4.png","revision":3741622,"resolution":"4","location":"assets","locale":"","width":2568,"height":800}},"screenshots":{"1":"Settings \u2192 Mini Dark Mode. Toggle button placement and style, keyboard shortcut, and one-click color presets.","2":"The dark palette. Reference colors, theme colors (accent, links, headings, body text, borders) and surface colors, each with a per-field note explaining what it affects.","3":"Advanced tweaks. Pick a target, a property and a color \u2014 no CSS needed, and only whitelisted values can be saved.","4":"The same page in light and dark mode. Text, backgrounds and components recolor; images are left exactly as authored."}},"plugin_section":[],"plugin_tags":[1953,173231,24155,172542,163960],"plugin_category":[34],"plugin_contributors":[286163],"plugin_business_model":[],"class_list":["post-383345","plugin","type-plugin","status-publish","hentry","plugin_tags-accessibility","plugin_tags-dark-mode","plugin_tags-dark-theme","plugin_tags-darkmode","plugin_tags-night-mode","plugin_category-accessibility","plugin_contributors-plugnest","plugin_committers-plugnest"],"banners":{"banner":"https:\/\/ps.w.org\/minidarkmode\/assets\/banner-772x250.png?rev=3741622","banner_2x":"https:\/\/ps.w.org\/minidarkmode\/assets\/banner-1544x500.png?rev=3741622","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/minidarkmode\/assets\/icon-128x128.png?rev=3741622","icon_2x":"https:\/\/ps.w.org\/minidarkmode\/assets\/icon-256x256.png?rev=3741622","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/minidarkmode\/assets\/screenshot-1.png?rev=3741622","caption":"Settings \u2192 Mini Dark Mode. Toggle button placement and style, keyboard shortcut, and one-click color presets."},{"src":"https:\/\/ps.w.org\/minidarkmode\/assets\/screenshot-2.png?rev=3741622","caption":"The dark palette. Reference colors, theme colors (accent, links, headings, body text, borders) and surface colors, each with a per-field note explaining what it affects."},{"src":"https:\/\/ps.w.org\/minidarkmode\/assets\/screenshot-3.png?rev=3741622","caption":"Advanced tweaks. Pick a target, a property and a color \u2014 no CSS needed, and only whitelisted values can be saved."},{"src":"https:\/\/ps.w.org\/minidarkmode\/assets\/screenshot-4.png?rev=3741622","caption":"The same page in light and dark mode. Text, backgrounds and components recolor; images are left exactly as authored."}],"raw_content":"<!--section=description-->\n<p>Mini Dark Mode adds a dark mode switch to your site. Instead of running filters over every image or inverting your whole page (approaches that can break galleries, maps and photos), it toggles one class on the html element and lets a small set of CSS variables recolor text, backgrounds and components. Pages stay sharp, images stay exactly as you designed them, and your theme's own styles keep working.<\/p>\n\n<p><strong>What it does<\/strong><\/p>\n\n<ul>\n<li>Floating toggle button (bottom left or right) or a pill button with a text label \u2014 colors follow your accent color<\/li>\n<li><code>[minidarkmode]<\/code> shortcode to place the toggle anywhere (menu, footer, page builder) \u2014 turn the floating button off and use the shortcode alone if you prefer<\/li>\n<li>Remembers each visitor's choice in their browser (localStorage)<\/li>\n<li>Falls back to the operating system preference (prefers-color-scheme) for first-time visitors, and follows OS changes live until the visitor picks a side<\/li>\n<li>Applies the saved mode before first paint \u2014 no flash of light content<\/li>\n<li>Optional keyboard shortcut: Ctrl+Alt+D<\/li>\n<li>Optional transparent header in dark mode (works out of the box with Astra; includes the generic header class)<\/li>\n<li>Elementor, Spectra (UAGB), Visual Portfolio, MEC events and wpDiscuz get dedicated dark styling<\/li>\n<li>Respect for prefers-reduced-motion: transitions are disabled for visitors who ask for less motion<\/li>\n<li>No dark mode is applied to the login page or wp-admin \u2014 front end only<\/li>\n<li>Fully internationalized; translations are delivered through translate.wordpress.org<\/li>\n<\/ul>\n\n<p><strong>Color controls<\/strong><\/p>\n\n<p>Six built-in presets (Rose, Ocean Blue, Forest Green, Violet Purple, Amber Sunset, Slate Mono) fill every color control in one click, and every field stays editable afterwards \u2014 each field explains which parts of your site it affects. Full control over the dark palette from Settings \u2192 Mini Dark Mode: accent, links, headings, body text, borders, site and content backgrounds, plus a reference palette. Text that you colored inline with your accent color is kept in the accent color instead of being brightened. One option keeps in-content headings in your accent color for sites whose light theme already uses colored content headings.<\/p>\n\n<p><strong>Fine-tuning<\/strong><\/p>\n\n<p>A dedicated \"Advanced tweaks\" area for per-site fine-tuning: pick a target (site header, site footer, sidebar, post content, widgets, tables, form fields, blockquotes, code blocks, links), pick a property (background, text or border colour) and pick a colour. Every rule you add applies only while dark mode is on. Targets, properties and colours are each validated against a fixed list on save and re-checked on output, so the generated stylesheet can only ever contain the declarations the plugin itself defines.<\/p>\n\n<p><strong>Accessibility<\/strong><\/p>\n\n<p>The button is a real button element with aria-pressed state, a visible focus ring for keyboard users, and translated labels. No motion for reduced-motion users, no layout shifts, no autoplaying anything.<\/p>\n\n<h4>Credits<\/h4>\n\n<ul>\n<li>Inspired by <a href=\"https:\/\/wordpress.org\/plugins\/wp-dark-mode\/\">WP Dark Mode<\/a> by WPPOOL.<\/li>\n<\/ul>\n\n<!--section=installation-->\n<ol>\n<li>Upload the plugin to <code>\/wp-content\/plugins\/<\/code>, or install the zip via Plugins \u2192 Add New.<\/li>\n<li>Activate.<\/li>\n<li>Configure colors and the button under Settings \u2192 Mini Dark Mode. That's it \u2014 no other setup.<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"does%20it%20dim%20or%20invert%20images%3F\"><h3>Does it dim or invert images?<\/h3><\/dt>\n<dd><p>No \u2014 that is the point. Filters over images make photos muddy and break galleries and maps. Mini Dark Mode only recolors text, backgrounds and interface components through CSS variables. Your images render exactly as authored.<\/p><\/dd>\n<dt id=\"will%20there%20be%20a%20flash%20of%20light%20content%20before%20dark%20mode%20applies%3F\"><h3>Will there be a flash of light content before dark mode applies?<\/h3><\/dt>\n<dd><p>No. A tiny inline script in the page head applies the saved mode before the first paint.<\/p><\/dd>\n<dt id=\"does%20it%20work%20with%20my%20theme%3F\"><h3>Does it work with my theme?<\/h3><\/dt>\n<dd><p>The core mechanism (one class + CSS variables) works with any theme. Ships with tuned rules for Astra, Elementor, Spectra\/UAGB, Visual Portfolio, MEC and wpDiscuz. Anything else can be adjusted with the colour controls and the Advanced tweaks area.<\/p><\/dd>\n<dt id=\"can%20i%20place%20the%20toggle%20in%20my%20menu%20or%20a%20page%3F\"><h3>Can I place the toggle in my menu or a page?<\/h3><\/dt>\n<dd><p>Yes. Turn off the floating button in the settings and place the <code>[minidarkmode]<\/code> shortcode anywhere \u2014 menus, footers, Elementor shortcodes widget, etc.<\/p><\/dd>\n<dt id=\"does%20it%20remember%20the%20visitor%27s%20choice%3F\"><h3>Does it remember the visitor's choice?<\/h3><\/dt>\n<dd><p>Yes, per browser via localStorage. Visitors who never chose get their operating system's color scheme preference.<\/p><\/dd>\n<dt id=\"can%20i%20style%20things%20myself%3F\"><h3>Can I style things myself?<\/h3><\/dt>\n<dd><p>Yes. While dark mode is on, the <code>html<\/code> element carries the class <code>mdm-dark-mode<\/code> and the attribute <code>data-mdm-dark-mode=\"dark\"<\/code>. Every colour is exposed as a CSS custom property: <code>--mdm-accent<\/code>, <code>--mdm-link<\/code>, <code>--mdm-link-hover<\/code>, <code>--mdm-heading<\/code>, <code>--mdm-text<\/code>, <code>--mdm-border<\/code>, <code>--mdm-bg<\/code>, <code>--mdm-surface<\/code>, plus the reference palette values <code>--mdm-palette-*<\/code>. The toggle button itself is <code>.minidarkmode-toggle<\/code>.<\/p><\/dd>\n<dt id=\"does%20it%20affect%20wp-admin%3F\"><h3>Does it affect wp-admin?<\/h3><\/dt>\n<dd><p>No. Mini Dark Mode is front-end only.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.0<\/h4>\n\n<ul>\n<li>Initial release.<\/li>\n<li>Featherweight dark mode: toggles one class plus CSS variables \u2014 no image filters, no src swapping, so gallery and portfolio plugins keep rendering images as they always did.<\/li>\n<li>No flash of light content: the saved mode is applied in the page head before first paint; follows the OS color scheme until the visitor chooses.<\/li>\n<li>Six color presets (Rose, Ocean Blue, Forest Green, Violet Purple, Amber Sunset, Slate Mono) \u2014 each becomes the restore baseline; per-color restore (\u21ba) buttons and per-field usage notes.<\/li>\n<li>17 color controls: accent, links, headings, body text, borders, site\/content backgrounds and a reference palette; the toggle button follows your accent.<\/li>\n<li>Floating toggle (circle or pill) or [minidarkmode] shortcode placement; optional Ctrl+Alt+D shortcut.<\/li>\n<li>Dedicated dark styling for Astra, Elementor, Spectra\/UAGB, Visual Portfolio, MEC and wpDiscuz; dark-mode-only Advanced tweaks area.<\/li>\n<li>Transparent-header option, in-content accent headings option, reduced-motion support, focus ring.<\/li>\n<li>English base strings, fully internationalized for translation on translate.wordpress.org.<\/li>\n<li>Whitelist-based Advanced tweaks handling (targets, properties and colours validated on save and re-checked on output) and uninstall cleanup.<\/li>\n<\/ul>","raw_excerpt":"A featherweight dark mode toggle: one class switch plus CSS variables. No image filters \u2014 works alongside gallery and portfolio plugins.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/sw.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/383345","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sw.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/sw.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/sw.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=383345"}],"author":[{"embeddable":true,"href":"https:\/\/sw.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/plugnest"}],"wp:attachment":[{"href":"https:\/\/sw.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=383345"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/sw.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=383345"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/sw.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=383345"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/sw.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=383345"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/sw.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=383345"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/sw.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=383345"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}