Create light mode switch

[lostdesign]

Use CSS root var to swap app theme

[SarathSantoshDamaraju]

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

[lostdesign]

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

[SarathSantoshDamaraju]

@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]

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]

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

[Shiroraven]

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.

[Shiroraven]

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]

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]

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

[Shiroraven]

also we need the webgems logo cleaned up

[Shiroraven]

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

[SarathSantoshDamaraju]

Sure

[SarathSantoshDamaraju]

@Shiroraven Let me know after pushing the component

[Hammster]

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]

<!-- 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]

@SarathSantoshDamaraju @Shiroraven any updates on this?

[mallikarjun2000]

Hello, can I work on this issue?

[nguyenphungsang]

Thanks