Home › Forums › WoodMart support forum › Dynamic Dark Theme Activation (Time-Based or Toggle)

Dynamic Dark Theme Activation (Time-Based or Toggle)

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • October 22, 2025 at 4:15 am #692125

    la.xtemos.acc
    Participant

    Hello!

    We’d like to implement dynamic activation of the dark theme in Woodmart — either by:

    Adding a visible toggle (button/switch) on the site or

    Automatically enabling the dark theme based on time (e.g., between 22:00 and 07:00)

    We’ve already enabled the dark theme via Theme Settings → Styles and Colors → Styles → Dark Theme, but we’re looking for a way to switch it dynamically.

    Is there a recommended method to toggle the dark theme programmatically — for example, using WP-CLI, a custom JavaScript toggle, or any other approach that works well with how Woodmart handles theme styles?

    Thanks in advance for your help!

    October 22, 2025 at 10:48 am #692169

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Unfortunately, there is no such option by default. You need to find a third-party plugin to achieve more functionality that best suits you: https://wordpress.org/plugins/wp-dark-mode/

    Best Regards,

    October 22, 2025 at 1:29 pm #692208

    la.xtemos.acc
    Participant

    Hello!

    We could also trigger the change to the dark mode via wp cli or somehow using a custom script. However, just need to know how to do it.

    If we do a basic WP CLI command like:
    wp option get xts-woodmart-options | grep -i dark
    ‘age_verify_color_scheme’ => ‘dark’,
    ‘popup_color_scheme’ => ‘dark’,
    ‘dark_version’ => ‘0’,
    ‘btns_default_color_scheme’ => ‘dark’,
    ‘btns_default_color_scheme_hover’ => ‘dark’,
    ‘btns_shop_color_scheme’ => ‘dark’,
    ‘preloader_color_scheme’ => ‘dark’,
    ‘dark_version’ => ‘1’,
    ‘products_color_scheme’ => ‘dark’,
    ‘fields_to_save’ => ‘default_header,disable_footer,footer_content_type,footer-bar-bg,footer-style,prefooter_content_type,prefooter_area,dark_version,primary-color,shop-background,btns_shop_typography,btns_shop_bg,products_hover,products_color_scheme,products_with_background,products_background,stretch_product_desktop’,

    we clearly see that there is:
    ‘dark_version’ => ‘0’,

    Question would be just how to set it to 1

    we tried:
    abc@a73e662e6981:/$ wp eval ‘$o = get_option(“xts-woodmart-options”); echo “dark_version: ” . ($o[“dark_version”] ?? “not set”) . “\n”;’ –path=/config/www
    dark_version: 0
    abc@a73e662e6981:/$ wp eval ‘$o = get_option(“xts-woodmart-options”); $o[“dark_version”] = “1”; update_option(“xts-woodmart-options”, $o); echo “dark_version updated to: ” . $o[“dark_version”] . “\n”;’
    –path=/config/www
    dark_version updated to: 1
    abc@a73e662e6981:/$
    abc@a73e662e6981:/$ wp eval ‘$o = get_option(“xts-woodmart-options”); echo “dark_version: ” . ($o[“dark_version”] ?? “not set”) . “\n”;’ –path=/config/www

    so we can switch the dark mode using wp cli.

    However, it would useful to understand how to customize the dark_mode: to set the proper logo for dark mode, to check the styles and etc. Basically how to check what are the settings of the dark mode?

    October 22, 2025 at 3:25 pm #692241

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Sorry to say, it requires customization and is beyond our support policy. Additional code customizations out of our theme support scope.

    Hope you can understand!

    Best Regards,

    October 24, 2025 at 3:46 pm #692638

    la.xtemos.acc
    Participant

    Hello,

    Thank you for your support.

    We do not require customization in the conventional sense. At this stage, we are able to toggle the dark theme using a basic WP-CLI command:

    `bash
    wp eval ‘$o = get_option(“xts-woodmart-options”); $o[“dark_version”] = “1”; update_option(“xts-woodmart-options”, $o); echo “dark_version updated to: ” . $o[“dark_version”] . “\n”;’
    `

    We were wondering if there is any documentation available that outlines how the dark theme is implemented—specifically, which CSS files are involved. This would help us make targeted style adjustments if needed.

    We appreciate any guidance you can provide.

    Thank you and look forward to hearing from you

    October 27, 2025 at 12:25 pm #692942

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    After consulting with our developers, we recommend creating a preset where you configure all the necessary settings for the Dark Theme — including enabling the “Dark Theme” option itself.

    Regarding the header logo setup — in this case, you’ll need to create a separate header specifically for the Dark Theme. Then, in the Dark Theme preset settings, assign that header to be used with this preset.

    To make this preset activate automatically, please use the following custom code. Be sure to replace the preset ID with the correct one for your Dark Theme preset:

    add_action( 'xts_active_options_presets', function ( $active_presets, $all_presets ) {
	$current_hour = (int) date('G');
	if ( $current_hour >= 22 || $current_hour < 7 ) {
		$active_presets[] = 67; // Replace with your Dark Theme preset ID
	}
	return $active_presets;
}, 10, 2 );

    This code will automatically activate your Dark Theme preset between 22:00 and 07:00.

    Best Regards,

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)