Web Vault Dark Mode

[dchrismas (Danny Chrismas)]

Feature name:

• Web Vault Dark Mode

Feature Description

• Dark Mode for the Vault with options between Light, Dark and Default (browser theme)

Clients / Repos Affected:

• Web

Timeline to completion (estimate):

ETA: Q2/2021

[dchrismas (Danny Chrismas)]

I’ve copied the way the Browser extension does dark mode with a variables.scss sheet with the mixin at the bottom. I’ve gone through the styles.scss and added some variables in to get the theme working. Screenshots at the bottom for what I’ve done so far

For the options, I’ve carried on some work that was already present in the code for theme and themeKey. The dropdown checks themeOptions for the themes we’ve set (currently on Dark and Light, Nord and Solarized can be added).

Options Page

Dropdown menu

Full Options Page in Dark Mode

Vault Page in Dark Mode

Add Item in Dark Mode

Everything is readable to myself, I’ve created a Draft Pull Request for people to review my code - Whilst functional I’m sure there are better ways of doing it for the options section

[dchrismas (Danny Chrismas)]

New Pull Request after a git issue on my PC

[djsmith85 (Daniel James Smith)]

@dchrismas Thank you for your great work on this Danny. We all love the dark theme. I know it turned out to be a lot more work than initially thought of.

Closing this topic.