- This topic has 9 replies, 2 voices, and was last updated 3 years, 4 months ago by
.
-
Posts
-
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
Customer Support
Hi there,
Would this filter help?
https://docs.generatepress.com/article/generate_logo/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; } );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.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?
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/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.
Sounds good.
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.
No problem 🙂
- You must be logged in to reply to this topic.