DEV Community

Dark Mode - Unmistified! 🐱‍👤

Akhil Arjun on August 03, 2020

Disclaimer! This is going to be a long post. I will try and assimilate all the resources and information I have on a proper dark mode implementatio...

Read full post

tate shepherd • Aug 3 '20 • Edited

I don't know why, but I couldn't get your js to work exactly how you have it for the first basic "JS Implementation" in conjunction with the css in your last post . I had to do some minor tweaks. Maybe I just wasnt implmementing yours right, but this is what I ended up doing.

// app.js
const onClickHandler = () => {
  document.documentElement.setAttribute('data-theme','dark');
}

with my css being

/* style.css */
[data-theme='dark'] {
  filter: invert(1) hue-rotate(180deg);
}

(EDIT: Thought it'd be helpful to include my html button)

<button onclick="toggleTheme('dark')">Dark</button>

I could of course update with other themes and pass a variable to my JS function.

Cool posts though! I still need to work through your "Native mode" section

Akhil Arjun • Aug 3 '20

Oh, could you tell me more? Of where it went wrong. I would be happy to help or even better if there is a bug in my code. I could fix it up 😎

tate shepherd • Aug 4 '20

Sure. Here is a pen of my implementation of your code, I'm probably just messing up the syntax. codepen.io/tateshep/pen/YzqzKxb

Here is one of what I did to make it work how I'd expect
codepen.io/tateshep/pen/dyMbdZE

𒎏Wii 🏳️‍⚧️ • Aug 4 '20 • Edited

<body dark>

body {
   --lightness: .8;
}
body[dark] {
   --lightness: .2;
}
p {
   color: hsla(200, 60%, calc(1 - var(--lightness)));
   /* etc. */
}

🤷

Akhil Arjun • Aug 4 '20

Only if more people would use and understand hsla 😍😍

𒎏Wii 🏳️‍⚧️ • Aug 4 '20

I know right? It's the easiest way to write colours, yet everybody still uses hex-codes for some reason... Worst part about it is, many people apparently can't even read/write hex codes and just copy-paste them around.

tate shepherd • Aug 4 '20

I don't understand hsla, and am definitely guilty of copy pasting hex codes. You've inspired me to check it out! I'd love a more logical way of doing colors than hex codes

𒎏Wii 🏳️‍⚧️ • Aug 4 '20

Nice! I sure hope it makes your life easier :D

Trieu.iv • Aug 4 '20

it worked! but not available on firefox :)

Akhil Arjun • Aug 4 '20

Yeah the support is sketchy. But it should support all modern browser versions.

caniuse.com/#feat=prefers-color-sc...

ridbay❁ • Aug 4 '20

How can this be implemented in ReactJS

Akhil Arjun • Aug 4 '20

Since it is a native js plugin. I don't think it should in any way interfere with the React application lifecycle. Include theme.js in your index.html and make sure to call the switchTheme() method from your component's onClick handle.
I am not a React expert, but I am sure this should work. Let me know if it doesn't I will give it a try myself ✌

Marian • Oct 23 '20

Great series, will try this on my app, too.
I came here to read more about dark mode, but I stayed for the Arnold GIF.