apps: dark and light mode switcher

[peterpeterparker]

Description

All the DeckDeckGo apps, respectively remote, docs and studio support "dark mode" using the CSS option @media (prefers-color-scheme: dark) {}.

Even if I do like dark mode, I like to have the ability to switch between dark or light. For example like Twitter does.

The goal of this task would be to implement a "dark/light" switcher in all our apps.

Tech info

• We rely on idb-keyval to save local data, the users' preferences could be saved that way.

• DeckDeckGo is meant to be as much as possible agnostic, therefore the solution should preferably be implemented without any extra dependencies

Get started

Interested to get involved and to try to implement this feature? Ping me if you have any questions or need help to get started, David (@peterpeterparker or twitter.com/daviddalbusco) 😃

[peterpeterparker]

A solution as be enumerated in GoogleChromeLabs/dark-mode-toggle#5

Concretely: https://glitch.com/edit/#!/dark-mode-class-toggle?path=script.js:1:0

[peterpeterparker]

Another solution from Ionic: https://codepen.io/mhartington/pen/NWKYOMK

[grantlouisherman]

hey @peterpeterparker do you mind if I take a crack at this?

[peterpeterparker]

@grantlouisherman That would be freaking awesome 👏

We have got three PWAs currently in the project.

Remote control: https://deckdeckgo.com / https://github.com/deckgo/deckdeckgo/tree/master/remote

Docs: https://docs.deckdeckgo.com / https://github.com/deckgo/deckdeckgo/tree/master/docs

Studio (the editor): https://reallysoon.... / https://github.com/deckgo/deckdeckgo/tree/master/studio

Maybe the easiest path is to try to implement it first in the remote or in the docs? These two are a bit smaller projects than the editor which also need some config...

What do you think?

Let me know how I could help too!

Super cool 👍

P.S.: Also note, the remote control will undergo a UX and design refresh, so right now, no need to improve the css in sense of making it more beautiful #228

[grantlouisherman]

Hey @peterpeterparker thanks for all of that. I apologize for my ignorance but wouldn't the best solution be to create a component that is used by all three of those projects? From the code examples you put it seems like we are just updating the DOM with either dark or light background. Let me know if that makes sense for this project. Like I said, I still need to poke around a bit more.

[grantlouisherman]

Hey @peterpeterparker for the dark mode toggle would you want it to be a global ability or individual. In remote for example, you have a bunch of different routes. Would you want the

• dark/light toggle to be present only on the header and it makes all of the routes

• have the toggle in each routes as well, but the switch affects the whole project

• Or have the toggle in each component but have local control. So if I have dark mode on the remote page, it wouldn't affect timer route

[peterpeterparker]

@grantlouisherman yes we could create a reusable component to handle the function but what I meant is that moreover than that, the styles of the apps has to be touched

Maybe I would begin with an app as POC and then refactor the code we could use across all of these, what u think?

[peterpeterparker]

@grantlouisherman I missed your second messages, thx for the cool ideas 👍

I'm open to idea and discussion but I would say a global dark/light toggle, what do you think?

Moreover, the current idea of the design refactoring is to add a left menu pane, so maybe we could add in the future a "setting" page where we could add such switch

[grantlouisherman]

Hey @peterpeterparker so right now I am speaking solely about the remote project because it is a good POC ( proof of concept) start. So we could add the switch at the top of the screen where the settings bar is ( per the imagine) or we could add the switch to the settings page that already exists.

I think that the global nature of the light / dark switch means it should be available for all pages, while currently the settings icon is only available in the remote route. So I think we could add a toggle like the imagine below and we can always move it if need be. Let me know your thoughts.

[peterpeterparker]

I like the idea to have it in the toolbar (the "settings" is actually more an experimental page to activate the detection of the behavior, you could swipe your slide kind of like a Jedi or like playing tennis 🤣).

The remote is definitely a good POC.

I'm all in!

[grantlouisherman]

Hey @peterpeterparker one more thing did you want the dark/light mode to affect the slides as well as the landing pages or just the landing pages?

[peterpeterparker]

I think it's cool if the slides follows the dark/light too. Good point.

Currently deckgo-deck is set to --background: transparent and color is inherited (

deckdeckgo/remote/src/app/pages/app-remote/app-remote.scss

Line 4 in 547a245

--background: transparent;

) so I guess it will follow. If not --background and --color could be use.