In this blog post, I will show you how to use JavaScript, and CSS to set the theme of your website based on the time of day. This can be a useful f...
For further actions, you may consider blocking this person and/or reporting abuse
Honestly don't think this is a good example.
Better to set a class to your body (or use a dataset attribute on the html or body tag) and set variables in CSS and change them when data-theme="dark" or data-theme="light" for example.
Make the default light, and when hours are before 6 or after 18... --> Set to dark.
Exactly this ☝ Using
prefers-color-scheme
this could be solved in a few lines of CSS.Thanks for the addition. This example is definitely a good approach. Please take a look at my reply.
This is just a different approach which potentially saves you a tiny bit of bandwidth by not importing the styles you don't use. More importantly it's a good example, IMO, to show how to conditionally include the styles you need.
❤️👍👍
Interesting
I really don't want to sound toxic and I hope that you won't take it to heart. Anyway, when I clicked on the link from dev.to email, my thoughts were like "wow it should be very interesting". How did they solve daylight saving time? Timezones? Different latitudes that affect day length? That shoulda be hell of an interesing, is there some new API? Well...
I happened to run into this the other day, here's some javascript to determine sunrise/sunset based on latitude and longitude: github.com/udivankin/sunrise-sunset
Sorry to disappoint, but I didn't have any bad intentions. I think you missed the beginners tag.
I use the tags accordingly so you know what you can expect from the article.
same there 🤣 😅 🥲
Just repeating the above reply:
Sorry to disappoint, but I didn't have any bad intentions. I think you missed the beginners tag.
I use the tags accordingly so you know what you can expect from the article.
Dark mode is a first-class feature of many operating systems.
The class strategy can be used to support both the user’s system preference or a manually selected mode by using the
Window.matchMedia()
API.So you want to duplicate all your color related styles?
How about using css custom properties?
I think it's a bad idea. Users can configure such things in their system settings and when they do, we should stick to the user's decisions.
Pretty sure this post is meant for beginners to learn js. I think its a good idea
You will be free to add a toggle button 😉
I ddidn't think about this, good one
But I prefer you write it in a seperate js file to keep html code clean.
Thank you for sharing