Ganava Dark Mode Switcher

Leírás

Ganava Dark Mode Switcher is an easy-to-use, feature-rich plugin designed to enhance user experience by providing a premium, animated Dark Mode toggle switch on your website.

Allow your visitors to switch to a visually pleasant dark theme that matches their environment. The plugin automatically detects system preferences, remembers user preferences across sessions, and lets you customize the background, text, link, and button colors directly from the WordPress admin panel.

Built with performance and versatility in mind, the plugin works out of the box with any theme, supports WooCommerce and Elementor layouts, and allows you to exclude specific elements like logos or images using CSS selectors.

Features

  • System Preference Auto-Detection: Automatically switches to dark mode if the user’s device is configured for dark theme.
  • Smart UI States Persistence: Remembers user preferences using local storage, avoiding style flash on page load.
  • Multiple Switch Styles: Choose between an iOS-style slider switch, text button, or sun/moon SVG icons.
  • Flexible Floating Positions: Display the toggle button floating on the Top Right, Top Left, Bottom Right, or Bottom Left of the screen.
  • Shortcode Support: Place the toggle button anywhere within pages, posts, or widgets using [ganava_dms_toggle].
  • Fully Customizable Colors: Define custom colors for background, text, links, card elements, borders, and buttons.
  • Advanced Element Exclusions: Prevent dark mode styles from applying to specific classes or selectors (such as .logo or img).
  • Page Builder & WooCommerce Integration: Optimized styles for Elementor layouts and WooCommerce shops.

Képernyőmentések

Telepítés

  1. Upload the ganava-dark-mode-switcher folder to your /wp-content/plugins/ directory.
  2. Activate the plugin through the ‘Plugins’ menu in WordPress.
  3. Configure your dark mode styles and toggle display options by navigating to Settings > Ganava Dark Mode.

GYIK

How do I place the toggle inside a post or page?

You can insert the toggle switch manually anywhere in your content by using the shortcode [ganava_dms_toggle]. You can also override the default style or size via attributes, like [ganava_dms_toggle style="icon" size="large"].

Will this slow down my website?

No, the plugin is highly optimized. CSS styles and JavaScript logic are small, native files that compile quickly. Color configurations are output dynamically as CSS custom properties in the header.

How do I exclude my site logo from being styled?

Go to Settings > Ganava Dark Mode, find the Excluded CSS Selectors option under the Advanced card, and add your logo’s CSS class (e.g. .site-logo or #logo).

Vélemények

Nincsenek értékelések erről a bővítményről.

Közreműködők és fejlesztők

“Ganava Dark Mode Switcher” egy nyílt forráskódú szoftver. A bővítményhez a következő személyek járultak hozzá:

Közreműködők

“Ganava Dark Mode Switcher” fordítása a saját nyelvünkre.

Érdekeltek vagyunk a fejlesztésben?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Változási napló

1.0.0

  • Initial stable release.
  • Added settings panel under Settings menu.
  • Integrated custom CSS variable theme overrides.
  • Built shortcode support and multiple switch styles.