Covid19india-react: Consistent Dark Mode Scheme

[SensehacK]

Is your feature request related to a problem? Please describe.
I love dark mode everything,
Describe the solution you'd like
Would like to propose a consistent dark mode color scheme / palette across the whole web app.
So that some pages would look consistent with the overall color schemes.

Relevant Issues:

1385

1416

1400

Describe alternatives you've considered
Dark Reader extension fairly does great job of dark mode, but isn't officially supported on the web.

Additional context
We could utilize SASS variables for better scalability in terms of web development in future.

[jeremyphilemon]

Go ahead! Let's try to keep discussions about the palette here. For now you can use the palettes that's currently being used and build upon it with a little research from looking at accessibility guides too :)

Resources:

• https://design.google/library/material-design-dark-theme/#hierarchy-simplify-uis-for-glanceable-information
• https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/dark-mode/

[balrajsingh9]

Go ahead! Let's try to keep discussions about the palette here. For now you can use the palettes that's currently being used and build upon it with a little research from looking at accessibility guides too :)

Resources:

• https://design.google/library/material-design-dark-theme/#hierarchy-simplify-uis-for-glanceable-information
• https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/dark-mode/

The current dark theme is great 👍 . Some minor suggestions I would like to posit.

Can we have something similar to what _twiter_ has? It shows three options to the user -

• Default (Light)
• Dim
• Lights out
  

There are some colors in the palette which are quite difficult to see. I'm comparing the visibility with the one we have in the default (light) theme. #1400

Using dev-tools I quickly changed the color of the element shown in the screenshot above and according to the _Material_ guideline, the medium emphasis text color on a darker surface should be - rgba(255,255,255,.60) or #FFFFFF with 60% alpha.

To follow the guideline, we need to maintain colors in variables and switch according to the currently applied theme vs the common colors that we have in-place right.

So I agree with @SensehacK that we need to use variables to maintain a consistent style and to have better visibility (accessibility) of texts as compared to what we have currently.

Extending the above point, I also played with the font-weight and had an instant improvement when I reduced it and didn't touch the text-color.

Old - font-weight = 900

After reducing to font-weight = 500

Let me know your thoughts @jeremyphilemon

[SensehacK]

@balrajsingh9 Nice insight on 3 options for UX.

Also font weight makes quite the difference, I'm currently swamped till next week with my final year project and thats the reason I wasn't able to put some design thinking towards this enhancement.

If you have any Color palettes in mind, you could share it using a table

1. Light

• Primary color 1: UIColor(rgb x,x,x)
• Primary color 2: UIColor(rgb x,x,x)
• Primary color 3: UIColor(rgb x,x,x)
• Primary color 4: UIColor(rgb x,x,x)
• Primary color 5: UIColor(rgb x,x,x)

1. Dark
2. Primary color 1: UIColor(rgb x,x,x)
3. Primary color 2: UIColor(rgb x,x,x)
4. Primary color 3: UIColor(rgb x,x,x)
5. Primary color 4: UIColor(rgb x,x,x)

6. Primary color 5: UIColor(rgb x,x,x)

7. Dim

8. Primary color 1: UIColor(rgb x,x,x)
9. Primary color 2: UIColor(rgb x,x,x)
10. Primary color 3: UIColor(rgb x,x,x)
11. Primary color 4: UIColor(rgb x,x,x)
12. Primary color 5: UIColor(rgb x,x,x)

So that we can all collectively agree on color scheme and have an overall consistent UX.

[balrajsingh9]

Thank you @SensehacK.
I'll read more about what color scheme is apt. for the theme variants that we're going to use and which conforms to _Google's Material Guideline_ (Twitter's scheme is good though!). I'll check the exact color values that we can use.

Let me know if you need any help with writing code for this. I can take out some time out of my job 😆

[balrajsingh9]

Twitter has 6 primary colors and they remain the same for all the theme variants. They have chosen a very nice set of primary color scheme which doesn't look odd or creates any visibility issues.

Here is a short video that I recorded demonstrating my above point - GDrive

[SensehacK]

So they have played around with opacity of every element like Basic Color (h1-h6, span, text) & just change the primary prominent feature of UI with only 5 UIColors options.

By checking your video, only thing they change of the 3 UI Modes is the background color as the basic contrast color blends well with it.
Utilizing just one of the 5 UIColor options as "Icing on the cake" personalization.

This approach is minimalist and I really appreciate it but its @jeremyphilemon decision or moderators whether we should steer in that direction.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[SensehacK]

@balrajsingh9 Which colors are we choosing for the theme?

[balrajsingh9]

@SensehacK I would recommend going with the twitter colors as they work well with all kinds of background we would want to have, _light, dim, Lights out/Pitch black_, etc...

RGBs for Primary Colors -

• rgb(29, 161, 242)
• rgb(255, 173, 31)
• rgb(224, 36, 94)
• rgb(121, 75, 196)
• rgb(244, 93, 34)
• rgb(23, 191, 99)

RGBs/Hex for Background Colors -

• Light - No change need, rgb(255, 255, 255)
• Dim - We can use the current one or rgb(21, 32, 43)
• Lights out/Pitch black - rgb(0, 0, 0)
• Graphite/Slate/Mat Grey - #222831

More work to do on font colors. Haven't finalized yet, but we can take inspiration/copy from Twitter or any other good looking website.

We may refer to these palettes as well - https://colorhunt.co/palettes/dark

[SensehacK]

@balrajsingh9 Looks great!

[balrajsingh9]

@SensehacK As you have claimed this, are you going to work on it or you want to collaborate?

[SensehacK]

@balrajsingh9 So I'm new to React - I would love to collaborate as I still haven't found time to wrap my head around React state management.

Let me know what works for you.

You can raise an PR as well, I'll also work in parallel & always wanted to try Pair programming on Github fork branches? If you're up for it.

[balrajsingh9]

@SensehacK All in.
/claim

I went through the source code to check how the current theme toggle is working and found that we are using use-dark-mode lib to toggle the theme and switch the styles. This prevents us to implement a 3rd variant of background color to choose from, as we can only have either light or a dark theme and not the three variants as we discussed.

Would have worked -
The library provides us the option to pass in the config the class name for both the variants, which is classNameDark
Leveraging that config, we can show the user a modal to select the theme, we won't touch the light variant, but for the dark-variant, we can pass the class name acc to what the user chooses.

But the only problem is that we cannot update the config object after passing it initially 😞

So all in all, we can either -

• Keep using two variants, light and dark and just change the dark theme's background-color and also fix the font styles wherever we have less visibility issue or
• Rewrite the logic of theme toggling for using 3 background variants

[balrajsingh9]

Got a workaround. NVM 😀

[balrajsingh9]

Sneakpeak 💯 Almost ready.
Lots of lots of color modifications and easy on eyes.

[SensehacK]

@balrajsingh9 Looks nice & where is the code base, I visited your fork didn't seem that you have pushed the code.

[balrajsingh9]

@balrajsingh9 Looks nice & where is the code base, I visited your fork didn't seem that you have pushed the code.

Fixing lint issues.
Pre-commit hook prevents me to commit before I fix the lint issues.

@SensehacK https://github.com/balrajsingh9/covid19india-react/tree/feat/theme-overhaul

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.