Implement dark theme (Closes #287) #407

The website will have a dark theme or a light theme depending on your OS preferences. You can still customize in the themer page to override some properties.
Added a "Reset to dark mode" button in the themer page.

Staging link: https://csclub.uwaterloo.ca/~a3thakra/csc/dark-theme/

mobile navbar in dark mode has some problems

Screenshot_20220305-123522_Brave.jpg

229 KiB

Screenshot_20220305-123524_Brave.jpg

383 KiB

table rows look a little intense compared to light theme

Screenshot_20220305-124009_Brave.jpg

398 KiB

Screenshot_20220305-124107_Brave.jpg

430 KiB

mobile organized content is unthemed

Screenshot_20220305-124206_Brave.jpg

298 KiB

good job overall! 🎉

i think more people should take passes on this. perhaps you should share the staging link with the design team and ask them to take a look.

other internal members could also help with reviewing once you announce this at all hands. make sure to share a link to the staging website.

let everyone know that they can easily toggle between light and dark using the button in the footer.

talk to the design team to figure out bright blue color
Font size of the heading is not consistent

image.png

404 KiB

image.png

404 KiB

"View details" color
wrong background color

image.png

619 KiB

Non blocker for PR: Create another issue for bad scrollbar color

image.png

63 KiB

Chat with the design team to figure out a better color for this because this stands out too much

image.png

65 KiB

Wow! This is big, great work Emily! There just a few things I noticed while going through the staging site that we should address before shipping this:

Bubble component: Border radius (see Adi's comment)
Table component (Members page, Services page > SSH Key Fingerprints): In dark mode, the vertical lines are same colour as header background, maybe we can consider changing that?
Table component: In light mode, the header is now bright green instead of the nice pale green we currently have on the website, could we please keep the pale green? (Adi also commented on this)
Events page: "View details" arrow on odd-numbered cards (secondary colour cards) is not flipping (Oh wait Adi commented on this as well)
Events page: In light mode, all cards are white instead of alternating green/white (Same Adi comment as above)
Mobile, Events page: In both colour themes, the spacing above "View details" on odd-numbered (secondary colour) cards looks off? (maybe this will be fixed by merging in main, idk)

I also left some nitpicky comments about code style, those are less important than these user-facing visual bugs though. 🙂

table-head-dark.png

27 KiB

table-head-light.png

24 KiB

events-arrow.png

129 KiB

events-background-colour.png

85 KiB

mobile-events-spacing.png

37 KiB

The most recent push should fix all of @a258wang 's comments and suggestions! Note: I believe point #1 (border-radius) was already resolved.

News archive just looks like a wall of text compared to the light theme.
It might need brighter headlines.

https://csclub.uwaterloo.ca/~a3thakra/csc/dark-theme/news/2022/spring/

image.png

369 KiB

News archive just looks like a wall of text compared to the light theme.
It might need brighter headlines.

https://csclub.uwaterloo.ca/~a3thakra/csc/dark-theme/news/2022/spring/

@a3thakra Do you think adding space between each news item would make the page look less like a wall of text? I think it would make each news item more distinguishable since currently, the spacing is not very consistent: there is more spacing between the paragraphs of the news item than the one between the news items themselves.
It would also follow the Gestalt proximity principle of linking items together when they are closer to each other.

Do you think adding space between each news item would make the page look less like a wall of text? I think it would make each news item more distinguishable since currently, the spacing is not very consistent: there is more spacing between the paragraphs of the news item than the one between the news items themselves.
It would also follow the Gestalt proximity principle of linking items together when they are closer to each other.

+1, I think the news items on the news archive page need more space between each other (regardless of light vs. dark mode). We can make a ticket to take a closer look at this later.

Thanks for working on this @e26chiu! I'd say let's get this PR merged sooner rather than later, then we can address the remaining details and any small bugs that arise in follow-up tickets. 🚢

@a3thakra Do you think adding space between each news item would make the page look less like a wall of text? I think it would make each news item more distinguishable since currently, the spacing is not very consistent: there is more spacing between the paragraphs of the news item than the one between the news items themselves.
It would also follow the Gestalt proximity principle of linking items together when they are closer to each other.

Yes I think that should do it! :)

Sorry for the late response, I haven't been checking mattermost or my csc emails too often in the past couple weeks :'(

         <Button
           size="small"
           onClick={() =>
             themeContext?.theme.name == "dark"

 .card:nth-child(odd) h2,
 .card:nth-child(odd) h3,
 .card:nth-child(odd) h4 {
   color: var(--primary-subtitle);

   online: boolean;
   location: string;
   date: Date;
   background: string;

   /* Default is light theme */
   --primary-background: #ffffff;
   --secondary-background: #fdf8f5;
   --light-primary-background: #ffffff;

         document.body.classList.add("light");
       } else if (input === "dark") {
         document.body.classList.add("dark");
         document.body.classList.remove("light");

 .bubble {
   --border-radius: calc(5000rem / 16);
   border-radius: calc(5000rem / 16);

     if (customPalette == null) {
       setThemeName("light");
       const prefersDark = window.matchMedia(

   box-sizing: border-box;
   position: relative;
   padding: calc(20rem / 16);
   background-color: var(--card-background);

 .name {
   display: flex;
   font-size: calc(18rem / 16);
   font-size: 18px;

   list-style: none;
 }
 .darkBg > summary {

           onClick={() => dispatch({ type: "open", route: router.pathname })}
         >
           <Image src="/images/hamburger.svg" alt="Menu" />
           <svg

           )}
           <div className={styles.miniEventCards}>
             {props.pastEvents.map(({ content, metadata }) => (
             {props.pastEvents.map((event, key) => (

 }
 .adviceBarContainer a:hover {
   color: var(--link-hover);

 .table tbody tr:nth-child(odd) {
   background: var(--primary-accent-lightest);
 .table tbody tr:nth-child(even) {

   --light--button-background: #1482e3;
   --light--footer-background: #2a2a62;
   --light--card-background: #DCF6F0;

Implement dark theme (Closes #287) #407

Reviewers