[Resolved] Change Logo in Dark Mode

Home Forums Support [Resolved] Change Logo in Dark Mode

Home Forums Support Change Logo in Dark Mode

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1571959
    Thomas

    Hi guys!

    I’m playing around a bit with creating a dark mode on a website.

    Works fine so far.

    What I did:

    Created CSS variables:

    /* Light Mode */
    
    :root {
        --primary-color: #688e23;
        --secondary-color: #ff8c00;
        --font-color: #2b2b2b;
        --bg-color: #fff;
        --heading-color: #2b2b2b;
    }
    
    /* Dark Mode */
    
    [data-theme="dark"] {
        --primary-color: #9acd32;
        --secondary-color: #ff8c00;
        --font-color: #ffffff;
        --bg-color: #000000;
        --heading-color: #ffffff;
    }

    Added the dark mode toogle-button as hook (generate_after_navigation):

    <div class="theme-switch-wrapper">
        <label class="theme-switch" for="checkbox">
            <input type="checkbox" id="checkbox" />
            <div class="slider round"></div>
      </label>
      <em>Dark Mode</em>
    </div>

    Added some Js as Hook (wp_footer):

    <script>
    
    	const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
    const currentTheme = localStorage.getItem('theme');
    
    if (currentTheme) {
        document.documentElement.setAttribute('data-theme', currentTheme);
      
        if (currentTheme === 'dark') {
            toggleSwitch.checked = true;
        }
    }
    
    function switchTheme(e) {
        if (e.target.checked) {
            document.documentElement.setAttribute('data-theme', 'dark');
            localStorage.setItem('theme', 'dark');
        }
        else {        document.documentElement.setAttribute('data-theme', 'light');
              localStorage.setItem('theme', 'light');
        }    
    }
    
    toggleSwitch.addEventListener('change', switchTheme, false);
    
    </script>

    Now I want to change the logo as well when dark mode is toggled on. Do you have an idea how to realize this?

    Homepage and the logo file I want to use in dark mode is in private info.

    Thanks and greetings

    Thomas

    #1571973
    Leo
    Staff
    Customer Support
    #1571989
    Thomas

    Tried this in Snippets, but it’s not working:

    add_filter( 'generate_logo', function( $logo ) {
        if ( currentTheme == 'dark' ) {
            return 'https://papaya.dj-whizzad.de/wp-content/uploads/2020/12/runningpapaya-logo-hell.svg';
        }
    
        return $logo;
    } );
    #1572125
    Leo
    Staff
    Customer Support

    That just means if ( currentTheme == 'dark' ) is not a valid conditional tag.

    Where did you get the solution from? Can you check with the solution author to see if there is a conditional tag we can use the target dark mode only?

    I’m not seeing anything special in the <body> tag when the site is in dark mode unfortunately.

    #1572160
    Thomas

    I got the code from dev.to:

    https://dev.to/ananyaneogi/create-a-dark-light-mode-switch-with-css-variables-34l8

    It’s quite an old post, so I guess it won’t be possible to get the needed info from the author :/

    Do you have another idea? Or maybe you have a clue to realize the darkmode better?

    #1572202
    Leo
    Staff
    Customer Support

    I don’t unfortunately.

    Since there is no extra body class added or conditional tag, the JS you’ve added would need to be modified to switch out the logo.

    I wonder if a plugin like this would work better though?
    https://wordpress.org/plugins/wp-dark-mode/
    https://wordpress.org/plugins/wp-night-mode/

    #1579819
    Thomas

    Hi Leo,

    thanks for your help so far.

    Unfortunately I was too busy the last days but I’m gonna try the plugins tomorrow and tell you hiw it worked.

    #1580337
    Leo
    Staff
    Customer Support
    #1584152
    Thomas

    Hi Leo,

    I guess wp-night-mode could do the trick. The other plugin is much prettier, but i’ll go with the open source one.

    Thanks again for your help.

    #1584930
    Leo
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.