Create light mode switch

lostdesign / webgems

A curated list of resources for devs and designers. Join me on devcord.com if you are up for a chit chat :)

GNU General Public License v3.0

4.65k stars 171 forks source link

Create light mode switch #43

Open lostdesign opened 5 years ago

lostdesign commented 5 years ago

Use CSS root var to swap app theme

SarathSantoshDamaraju commented 5 years ago

Hi @lostdesign if it is still in plan, Can I take this up ?

lostdesign commented 5 years ago

Hi @SarathSantoshDamaraju, you can sure take this up yeah! Maybe sync with @Shiroraven as he also proposed something on the discord server.

SarathSantoshDamaraju commented 5 years ago

@lostdesign Cant find him on devcord channel (am i checking at a wrong place?). I will start working on it till he replies here and we can cor-ordinate on this thread.

Shiroraven commented 5 years ago

Hey, @SarathSantoshDamaraju thanks for showing interest in helping out, I left devcord quite a while ago due to personal reasons. You can contact me on Discord using my tag Shiroraven#4302 or just work from this thread. 👍

SarathSantoshDamaraju commented 5 years ago

Can we use this thread ? and do you have thoughts on this theme switcher as @lostdesign mentioned?

Shiroraven commented 5 years ago

While possible, i would recommend against it because alot of developers are getting notified about every action that happens here.

For now i just created a component for the actual switch as a concept. Screenshot (19) Screenshot (20)

Shiroraven commented 5 years ago

I'm currently trying to figure out the best way to change the CSS upon switching the theme, maybe adding a class of .light or .dark to the body would work?

SarathSantoshDamaraju commented 5 years ago

Sure.

And only .light class would do as dark theme is by default. And can be accomplished with few style changes. Just for reference I made a quick edit in browser.

I assume you can complete this. let me know otherwise.

Shiroraven commented 5 years ago

looks good! We have to make sure to replace the blue parts though due to contrast

Shiroraven commented 5 years ago

also we need the webgems logo cleaned up

Shiroraven commented 5 years ago

i can push my switch component and you can tinker around with the css if you want should be done then?

SarathSantoshDamaraju commented 5 years ago

Sure

SarathSantoshDamaraju commented 5 years ago

@Shiroraven Let me know after pushing the component

Hammster commented 5 years ago

Just want to also propose to make use of the prefers-color-scheme media query.

@media (prefers-color-scheme: dark) {

}

@media (prefers-color-scheme: light) {

}

And make adjustments to the theme-color meta tag currently it's set to #FFFFFF

hsh2001 commented 5 years ago

<!-- dark mode -->
<link rel="stylesheet"
      href="dark.css"
      media="(prefers-color-scheme: dark)">

<!-- light mode -->
<link rel="stylesheet"
      href="light.css"
      media="(prefers-color-scheme: light)">

This code will help, too.

lostdesign commented 5 years ago

@SarathSantoshDamaraju @Shiroraven any updates on this?

mallikarjun2000 commented 3 years ago

Hello, can I work on this issue?

nguyenphungsang commented 3 years ago

Thanks