Dark and Light Mode Implemented on the ReactPlay Website

[EOEboh]

First thing, PLEASE READ THIS: ReactPlay Code Review Checklist

Description

A dark and Light mode implemented on the website, the toggle button can be found at a strategic place at the navbar just beside the ReactPlay logo.

All the user needs to do is toggle the button to switch to the preferred mode.

The react-switch library was used for the toggle component.

Fixes #424

Feature

Please delete options that are not relevant.

• [ x ] New feature (non-breaking change which adds functionality)

How Has This Been Tested?

Yes, it has been tested on Chrome and Safari browsers respectively.

It has been tested across all major screen sizes and viewports.

Checklist:

• [x] I have performed a self-review of my own code
• [x] I have commented my code, particularly in hard-to-understand areas
• [x] I have made corresponding changes to the documentation
• [x] My changes generate no new warnings
• [x] I have added tests that prove my fix is effective or that my feature works
• [ ] New and existing unit tests pass locally with my changes
• [x] Any dependent changes have been merged and published in downstream modules

[vercel[bot]]

@EOEboh is attempting to deploy a commit to a Personal Account owned by @reactplay on Vercel.

@reactplay first needs to authorize it.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
react-play	✅ Ready (Inspect)	Visit Preview	Aug 25, 2022 at 6:16PM (UTC)

[EOEboh]

Hello @EOEboh I feel the dark theme is not well optimized with the current design language. Also the switch a way off than standard practice. And its not persisting

As a traditional way of working on the aesthetic/style/structure changes, I would suggest preparing a mock and reviewing it with the community before incorporation. You can do it over discord. If the action has already been performed, just point me to the appropriate mopckup.

Hey Koustov, so please what are you saying in summary.

I can't quite understand what you mean sir

[ammaaraslam]

Hi @EOEboh, just as @koustov mentioned, the implementation can be a bit more optimized. And also, instead of a toggle, I think that an icon button (like the ideas button) to the right of the navbar is more suitable. The toggle just seems a bit odd, that's just my opinion, let's see what others think about it too.

[ammaaraslam]

Hello @EOEboh I feel the dark theme is not well optimized with the current design language. Also the switch a way off than standard practice. And its not persisting As a traditional way of working on the aesthetic/style/structure changes, I would suggest preparing a mock and reviewing it with the community before incorporation. You can do it over discord. If the action has already been performed, just point me to the appropriate mopckup.

Hey Koustov, so please what are you saying in summary.

I can't quite understand what you mean sir

I think what @koustov is trying to convey is that, try to follow the code structure and best practices of ReactPlay. (like naming conventions of variables, class names and the overall style of the codebase.).

Also that before coding out the feature, first design a mockup maybe in Figma or any other software you prefer and then share it with the community and ask for feedback. In that way, if there's any change, you can do it in the mockup and can implement the final mockup with code. If you have any doubts please let us know.

[koustov]

Hello @EOEboh , let me put the items in a bulleted way in this comments for better understanding

1. When we implement any theme we need to see every element goes well together with it from a contrast perspective. What I felt is, the dark theme here is not adjusted fro that front e.g.:

2. We might need to adjust the cards also to compete with dark theme style

3. The switch here sits at a very odd place, without any specific visual indicator to represent what the switch does

4. The tech-stack page is not honoring theme selection. Its always dark

5. The play list page also having the same issue

6. The expectation would be, that when I switch a theme it should persist for me. Like if I refresh, it should retain my selection. This is not happening

7. The Most Important item: When we make any major adjustment to UI, process-wise we should create a mockup first . The get this mockup reviewed with the community. Once its approved then we go for implementation/merge. We have done similar process in past (for example we did mock review for Twitter mention implementation)

[ammaaraslam]

@EOEboh, I think @koustov has put everything that's needed in an understandable way. Do consider those points when implementing it. So if you need any help in creating this functionality, do let us know.

[frankiefab100]

Is this issue still open? Is there an existing react play design, so I can easily implement the dark mode features.

[atapas]

It's not in plan for now.

[frankiefab100]

It's not in plan for now.

Alright

[github-actions[bot]]

There hasn't been any activity on this pull request recently, and in order to prioritize active work, it has been marked as stale. This PR will be closed and locked in 7 days if no further activity occurs. Thank you for your contributions!