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.

[grantlouisherman]

@peterpeterparker Ok. Since I'm new to the code base / tool, let's start with the remote routes and expand from there. How does that sound?

[peterpeterparker]

@grantlouisherman sounds like a valid approach to me, agree

ping me for any questions or support, I'm happy to help

and thx, it's really super cool 👍

[grantlouisherman]

Hey @peterpeterparker so I have a basic implementation of the dark light switch, please see images. Right now the switch sits on the remote page, but will make all other pages dark as well. I pretty much took the UI from https://codepen.io/mhartington/pen/NWKYOMK, but just made it work for this application. So do you like the way it looks? Are you okay with it being only on the remote route? Let me know your thoughts. BTW my branch name is enhancement/227-dark-light-switcher, but I still want to clean up the code. I just wanted to get 👀 on the functionality.

[peterpeterparker]

@grantlouisherman 👍

I would say don't worry to much about the design respectively it's all good to me with your proposition.

Once we have this I'll probably rework the general design of the remote (#228), the more I think about it the more I think it would be really good to do it, and therefore the toggler will probably move in any case.

P.S.: Add a really quick look, I saw that you created a component for the toggler, that's super

[grantlouisherman]

Hey sounds good @peterpeterparker I'll add the save feature soon.

[grantlouisherman]

Hey @peterpeterparker so I finished the code core functionality, do I write the tests in the remote project? When I ran npm test in the remote folder, it updated the package.json and the package-lock.json which I thought was weird.

[peterpeterparker]

@grantlouisherman it's because there are none currently in that module

[grantlouisherman]

So @peterpeterparker would you prefer me to just open a PR for remote with what I have?

[peterpeterparker]

@grantlouisherman sure go for it :)

[grantlouisherman]

hey @peterpeterparker #398

[peterpeterparker]

The PR #398 from @grantlouisherman solves this issue 👍