Feature: Dark Mode

[chrira]

It would be nice to have a dark mode setting to switch away from the shiny white.

[lkleisa]

Started with first draft of the conception, but we need to finish emberjs upgrade and frontend dependencies first

[lkleisa]

I searched for tools, found this tool but couldn't made it running...

[MuStAgEDelta]

Concept for the Dark Mode
The Goal:
The Goal is to add a Dark Mode to Cryptopus.
Short:
First, we need to add a button or a switch to choose between Dark- and Light-Mode in the Frontend. Second the Frontend needs to be prepared and the Dark mode needs to be implemented. Then we must fix all the bugs that appear. Finally, we can start to test the frontend with frontend tests and System-Tests/End-to-End Tests.

Installation:
ember install ember-dark-mode and fix bugs if they appear.

Button:
I would suggest a switch button / toggle. The point is that a switch button gives better feedback to the user and is user friendly. If you decide on that, you should probably use this one:
<XToggle @theme="ios" @size="small" @variant="auto" @value={{@apiUser.locked}} @onToggle={{fn this.toggleApiUser @apiUser}} /> , as this is the switch used in other parts of the application.
To Implement the Button, take a look by the “Implementing your own toggle” on DarkModeEmber and familiarize yourself with the select menu and the language implementation.

---

Prepare the frontend. We work with CSS Files so we need to add a Variable for the Dark Mode. So, you also can follow the Implementing your own toggle from https://www.emberobserver.com/addons/ember-dark-mode.
Set the Default to Light-Mode, as this is what everyone is used to.
A nice feature would be to store the settings from the Users. So, he doesn’t need to switch the Mode every time. This could be done like:
Add a parameter to the user model (Front and Backend) And store in this parameter the last setting from the user.

Test:
We need Frontend Tests for the new Button. Check that the intern variable Dark_Mode changes when you switch from Dark-Mode to Light-Mode and reverse.
End to End: Here we need to test more. I would import the method that can click a button. Now you check at the beginning if the default setting works. After that you click the button and check if it switched.

• Install dark-mode from Ember
• Add switch in frontend
• Add intern variable
• Add (default) parameter to model (Front and Backend)
• Make the method for the switch
• Add Frontend Test
• Add end to end tests

[chrira]

Great, thanks