Implement dark mode on website

[LucianPetri]

Dark Mode Implementation

Reasons

• Night Owl users like me would like to have a way to switch the websites appearance to something more dark for the protection of our eyes.
• With this implementation we inevitably also have the possibility to more easily theme the website.
• Also while doing this we should create a suite of components to be reused
• This will also speed up development for others that only implement logic and expect the theming to work properly

Description

• dark mode is a theme complete with a color scheme and Context Provider
• all components in Chakra-UI are tied to the Chakra ThemeProvider inside ChakraProvider
• to switch between light and dark mode a basic switch should be placed in the Header
• a light theme and dark theme has to be created and placed inside the styles folder ( naturally )
• Chakra components must be added to the page layout and checked that backgrounds and foreground change correctly
• any custom components should be wrapped with Chakra Components and be made reusable
• the dark mode switch should look like a sun in light mode and a half moon in dark mode
• the color mode should be initially taken from system and kept afterwards in LocalStorage
• check for any SSR Issues that might arrise from hold the color mode value

Prerequisites

Components that need to be switched to Chakra-UI

Pages

• [x] Assistant Reply
• [x] User Reply
• [x] Grade Output
• [ ] Score Leaderboard
• [x] Summarize Story
• [x] 404
• [x] Index
• [x] Sign Up
• [x] Verify

Components

• [x] UserMenu
• TBD

Reusable Components that need to be implemented

• TBD

Tasks

• [ ] Discuss color scheme for Light and dark Themes
• [x] create Light & Dark Theme to styles folder
• [x] add basic mode switch on header
• [x] style the switch to look pretty
• [x] add Color Mode
• TBD

Contributing in this Issue

• This Issue is too large to be kept in just 1 PR so we need to break this in multiple PR's
• anyone working on any of these, Link this issue in the PR so we don't do double work
• avoid changing too many files in each PR so we don't merge conflict ourselves
• to color everything use the variant prop in components, these variants are affected by the selected theme

[AbdBarho]

pages from #32 #33 and #34 should also follow this configuration.

That being said, if we create re-usable components (as mentioned above), everything should just work out of the box.

[fozziethebeat]

I'm pretty sure this is doable using Chakra themes. It would require touching and cleaning up a bunch of the pure tailwind classes however.

Can we approach this with small focused PRs that step towards dark model rather than any massive changes/

[LucianPetri]

I'm pretty sure this is doable using Chakra themes. It would require touching and cleaning up a bunch of the pure tailwind classes however.

Can we approach this with small focused PRs that step towards dark model rather than any massive changes/

Exactly my thought as well. Each task can easly be a simple PR.