DEV Community

Discussion on: Dark Mode - Unmistified! 🐱‍👤

View post
Collapse
 
tateronaut profile image
tate shepherd • • 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

Collapse
 
akhilarjun profile image
Akhil Arjun •

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 😎

Collapse
 
tateronaut profile image
tate shepherd •

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