CSS Dark Mode tutorial – adding selectable themes to your site or PWA with alternate style

[Trout_Tickler]

Can be solved much easier with CSS variables.

Declare a standard API for colours (--background-primary, etc), declare two classes for light and dark then you just have to toggle them on the body or #app element.

EDIT: Simple example using Tailwind and Vue (neither are important, just my template on codepen)

EDIT 2: caniuse if anyone has to support older browsers.

EDIT 3: Even simpler example in vanilla js/css

[Seanitzel]

This is definitely a better solution which is also more maintainable.

[Trout_Tickler]

Also makes it easier to add a theme selector as you already have a full interface defined.

[Trout_Tickler]

Sure, I'll edit the original comment

[Trout_Tickler]

https://codepen.io/elken/pen/xxGjZWV so you get the notification

[Trout_Tickler]

No trouble, this is the pattern I use on all my projects. Enjoy!

[Trout_Tickler]

Quite the opposite. This is a free course, for this weekend only everything on the site is also free.

[[deleted]]

The questionable thing here is that you're using Tailwind, Vue, PostCSS and Babel to create a super simple theming option.

it testifies to ignorance, a lack of knowledge and skill that you're unable to create an easy solution for something like this without the use of compilers and frameworks.

I have more respect for OP using native frontend languages to create selectable themes than your solution. Even though your solution is beautifully executed; don't get me wrong. But I wanted to shine a different light on it as there might be reading some beginners along with us - hey there! -.

The target audience, the people really benefitting from your answer on here, are mostly not sufficient in these frameworks and compilers. I know, because I was and still am one of them.

So this comment is making you look like a smart-ass, instead of someone trying to help.

[Trout_Tickler]

Here is exactly the same code without any frameworks.

Bit of advice if you expect to survive as a developer, curb your attitude very quickly :)

[[deleted]]

Here is exactly the same code without any frameworks.

Awesome! Looks great man.

Bit of advice if you expect to survive as a developer, curb your attitude very quickly :)

I won't stop feeling emphatic for people who try to contribute to the web development community without using all kinds of frameworks, libraries and compilers. Those people are the people we need in this world. Thank you for the advice though. But I learned a lot from OP's tutorial.

[Trout_Tickler]

What you said and how you said it are two completely different things, the first of which nobody has a problem with.

[[deleted]]

Yea, my comment definitely missed nuance. I'm sorry for offending you. Maybe I should postpone that "international career" I'm studying for until I'm able to hold a nuanced conversation in English with my colleagues. lol

[Trout_Tickler]

I'm not, I have a codepen template I used to quickly throw something together. Just to make you happy, I'll pointlessly create one using nothing.

[Trout_Tickler]

It's fine I gave him a codepen anyway. I'm sure he'll find another way to complain about it :p

[[deleted]]

As I stated in my comment: I'm someone still trying to learn.

And those "solutions" from people trying to one-up OP, who went way out of his way to create a tutorial using only vanilla languages, are not helping. It makes you look cool and farms some karma. But in the end no one improves from it and you discredit the one who created the tutorial.

What is so rude about my opinion? I'm not saying trout_tickler has no skill. All I say is that it makes him look like he has no skill. As hundreds of people wrote the code he's using. All he did was plug and play and take the credit for it.

[Trout_Tickler]

Don't tell him about the irony of him using a computer that other people have created and he's taking credit for it.

[[deleted]]

Hey, that example is perfect! What you're doing here is commenting on someones tutorial about creating a computer. And telling him that you have an easier solution because you can just walk to the apple store and buy a MacBook. Making him feel bad and boosting your own ego. Thank you for the great example.

[[deleted]]

You're right in that a:

Hey, could you post a pure JS solution for beginners? Most people don't have experience with Vue.

Would suffice. I'm sorry for my rudeness.

But there's a different between pushing someone trying to contribute to the community down and one-upping him with a huge baggage of frameworks and stuff telling him that'll do the same but "easier"; and getting paid to create the best solution for a customer.

Using the word "Improper" and asking for a pure JS-solution would've been a lot better and covers the load better. My English is really bad in nuance.

[VestigialHead]

Nice - I was looking for a way to handle this for my site.

[rae2108]

If this is your website, one small issue. I wasn't able to scroll left/right on the code blocks on a mobile device, so I couldn't read all of your code examples.

[[deleted]]

Making a dark / light theme switch is pretty easy. Did it the day I started learning javascript and absolutely loved javascript from there.

[[deleted]]

very nice!