Features

๐ŸŒ™ Core Dark Mode Features

  • Frontend Dark Mode โ€“ Instantly enable dark mode across your WordPress site with one click โ€” no coding required.
  • Default Dark Mode โ€“ Start your site in dark mode by default for all visitors while still letting them switch to light mode.
  • OS-Aware Dark Mode โ€“ Automatically match each visitorโ€™s operating system theme for a seamless, personalized experience.
  • Keyboard Shortcut Toggle โ€“ Users can press Ctrl + Alt + D (Windows) or Control + Option + D (macOS) to switch modes instantly.
  • Time-Based Auto Dark Mode โ€“ Automatically switch to dark mode based on the userโ€™s local time for a day-to-night experience.
  • Admin Panel Dark Mode โ€“ Reduce eye strain with a beautifully styled dark interface in the WordPress dashboard.

๐Ÿ•‘ Advanced Controls

  • Hide Dark Mode Switch on Mobile โ€“ Decide how and where the toggle appears on mobile devices.
  • Show Switch in Menu โ€“ Add the dark mode toggle directly to your main navigation.
  • Shortcode for Menus โ€“ Place the toggle anywhere inside menus with an easy shortcode.
  • Disallowed Pages โ€“ Keep selected backend pages in light mode for full control over your workspace.

๐ŸŽจ Switch Customization

  • Switch Toggler Designs โ€“ Choose from 12 beautifully designed togglers to fit your siteโ€™s aesthetic.
  • Switch Background & Size โ€“ Customize background color, width, and height for a perfect fit.
  • Switch Border Controls โ€“ Fine-tune border width, color, and radius for a polished finish.
  • Switch Icon Color & Size โ€“ Adjust icon colors and size separately for light and dark modes.
  • Switch Positioning โ€“ Choose from four default screen positions: bottom right, bottom left, top right, or top left.
  • Margin Control โ€“ Set precise margins from the selected position for a refined layout.
  • Different Switch Position on Mobile โ€“ Use separate positioning for mobile devices.
  • Absolute or Fixed Position โ€“ Make the switch scroll with the page or keep it fixed.
  • Draggable Position โ€“ Allow users to drag and reposition the switch anywhere.
  • Switcher Shortcode โ€“ Embed a fully customizable dark mode switch anywhere on your site.
  • Alternative Dark Mode Switch โ€“ Turn any existing button or element into a dark mode toggle using CSS selectors.

๐Ÿ’ฌ Tooltips & Guidance

  • Floating Switch Tooltips โ€“ Add helpful messages or fun text to your floating switch.
  • Flexible Tooltip Positioning โ€“ Place tooltips on the left, right, top, or bottom.
  • Custom Tooltip Text โ€“ Write your own messages to match your brandโ€™s tone.
  • Branded Tooltip Styling โ€“ Set background and text colors for consistent branding.

๐ŸŽจ Color Customization

  • Pre-Designed Presets โ€“ Instantly apply a professionally crafted dark mode palette (5 free / 11 Pro).
  • Custom Background Colors โ€“ Define primary and secondary backgrounds to match your brand.
  • Text Color Control โ€“ Adjust body, link, and hover colors for maximum readability.
  • Input Field Styling โ€“ Customize input backgrounds, text, and placeholders.
  • Border Color Management โ€“ Fine-tune border colors across your site.
  • Button Color Customization โ€“ Match button backgrounds and text colors to your theme.
  • Scrollbar Dark Mode โ€“ Apply dark styling to scrollbars for a unified appearance.
  • Scrollbar Track & Thumb Colors โ€“ Precisely style both track and thumb for branded scrollbars.

๐Ÿ–ผ Image Handling

  • Low Brightness Images โ€“ Reduce image brightness in dark mode for comfortable viewing.
  • Adjustable Brightness Levels โ€“ Fine-tune brightness from 0% to 100%.
  • Exclude Specific Images โ€“ Leave selected images untouched by brightness controls.
  • Grayscale Images โ€“ Apply a grayscale filter to images for a sleek look.
  • Adjustable Grayscale Levels โ€“ Set grayscale intensity to match your style.
  • Invert Inline SVG โ€“ Automatically invert inline SVG graphics.
  • Invert Specific Images โ€“ Target and invert only certain images.
  • Replace Images in Dark Mode โ€“ Upload alternate image versions for dark mode.

๐ŸŽฅ Video Handling

  • Low Brightness Videos โ€“ Reduce glare on embedded videos in dark mode.
  • Adjustable Brightness Levels โ€“ Control video brightness from 0% to 100%.
  • Grayscale Videos โ€“ Convert videos to grayscale for a distraction-free look.
  • Adjustable Grayscale Levels โ€“ Balance aesthetics and readability for each video.
  • Replace Videos in Dark Mode โ€“ Swap videos with dark-mode-specific versions.
  • Flexible Video Sources โ€“ Works with local files and external platforms like YouTube, Vimeo, and Dailymotion.

โš™๏ธ Advanced Targeting

  • Allow Only Elements โ€“ Apply dark mode only to selected tags, classes, or IDs.
  • Force to Correct Allowed Elements โ€“ Ensure chosen elements always display properly.
  • Disallowed Elements โ€“ Exclude specific elements from dark mode styling.
  • Force to Correct Disallowed Elements โ€“ Override conflicting styles for readability.
  • Allow Only Pages โ€“ Restrict dark mode to selected pages.
  • Disallowed Pages โ€“ Exclude pages where dark mode isnโ€™t appropriate.
  • Allow Only Posts โ€“ Enable dark mode on chosen posts.
  • Disallowed Posts โ€“ Prevent dark mode on posts needing unique visuals.

๐Ÿ“ Custom CSS & Developer Tools

  • Dark Mode CSS โ€“ Add custom CSS rules that apply only in dark mode.
  • Child Element Styling โ€“ Automatically apply styles to nested elements.
  • Smart Selector Handling โ€“ Use advanced selectors and filters for precise control.
  • Normal Mode CSS โ€“ Define global styles for both dark and light modes.

๐Ÿ”„ Import / Export & Cleanup

  • Import / Export Settings โ€“ Transfer your dark mode configurations between sites easily.
  • Download Backup Files โ€“ Save and restore all custom settings and switch styles.
  • Clean Up on Deletion โ€“ Automatically remove stored settings when uninstalling to keep your database clean.
Toggle Dark Mode