This is more of a general question as I am starting to look at Ease. Has anyone implemented dark mode with Ease and if so, how? Would appreciate some insight.

@thebear.dev try the below… I have this working in Casper… In the Site Header Injection: <style> .switch { position: relative; overflow: hidden; width: 8rem; height: 4.5rem; transform: scale(0.7); display: inline-block; padding: .25rem; border-radius: 20px; } .switch input { …

AFAIK, dark mode is just a set of CSS variables that switch when a button is pressed.

So you would just add a button/toggle somewhere and change the root CSS variables with Javascript when it’s toggle, no?

Yes. But it needs to remember that setting (cookie) and I don’t know what files to copy and edit. I am not asking the “how to” behind it, I’m asking if anyone else have made it and if so, what files etc that I need to fix. Guess I should have been clearer.

This post appears to address the cookie as it relates to dark mode toggle: [image] Add Dark Mode toggle + Automatic Dark Mode based on prefs + Set Cookie for Casper v4 Using Ghost I created a tutorial on my Ghost blog on how to create the ultimate dark mode experience for…

Yep, reading it now and working my way “around” it for Ease. Thanks for posting.

Got the code in (hardcoded). Now it’s just a matter of styling the dark theme since there’s nothing to toggle in Ease. Or maybe there is and I don’t know the correct class.

Here’s how I’d do this: I probably wouldn’t hardcode it in case there’s an update to the theme. I’d inject the button via Javascript. I’d use the button to toggle the CSS custom props. You can redefine the properties (e.g., --white-color: #000) and set them with a custom data attribute to overrid…

In case it might help someone as a copy-and-paste starting point using local storage… here is the most simple way I found to do this which is also not hard-coded so won’t break on theme updates… In the Site Header Code Injection: <style> .dark-mode-toggle { position: absolute; top: 15px; …

That’s awesome – thank you! I’ll continue to customize it. Any idea on how to change the icon to represent dark / light mode?

Dark Mode for Ease: Has Anyone Done it?

Themes

denvergeeks April 18, 2021, 10:04pm 6

This post appears to address the cookie as it relates to dark mode toggle:

Topic		Replies	Views
Casper - The dark mode enabled version - Free Marketplace	24	9229	October 10, 2022
Add Dark Mode toggle + Automatic Dark Mode based on prefs + Set Cookie for Casper v4 Using Ghost	4	1880	April 26, 2021
Casper night mode not working Themes	13	1158	August 14, 2021
Casper dark theme is gone in Ghost 4.0? Themes	12	3186	September 10, 2021
How to enable dark mode in Casper 3.0? Themes	15	10815	May 28, 2023

Dark Mode for Ease: Has Anyone Done it?

Related topics