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. * A toggle button in the footer to toggle between light mode and dark mode. * Added a "Reset to dark mode" button in the `themer` page. Staging link: https://csclub.uwaterloo.ca/~a3thakra/csc/dark-theme/ Co-authored-by: Miniapple8888 <miniapple8888@gmail.com> Reviewed-on: #407 Reviewed-by: Amy <a258wang@csclub.uwaterloo.ca>
2022-06-08 08:45:28 -04:00 · 2022-06-08 08:45:28 -04:00 · f631f4013f
parent 443925190e
commit f631f4013f
37 changed files with 1675 additions and 2046 deletions
--- a/components/ArchivePage.module.css
+++ b/components/ArchivePage.module.css
@ -3,7 +3,7 @@
 }

 .page > h1 {
-  border-bottom: calc(1rem / 16) solid var(--primary-heading);
+  border-bottom: calc(1rem / 16) solid var(--border);
  padding-bottom: 1rem;
 }

--- a/components/Bubble.module.css
+++ b/components/Bubble.module.css
@ -6,7 +6,6 @@

 .bubble {
  --border-radius: calc(5000rem / 16);
-
  display: flex;
  flex-direction: row;
  position: absolute;
--- a/components/Button.module.css
+++ b/components/Button.module.css
@ -2,8 +2,8 @@
 .link {
  font-family: "Poppins", "sans-serif";
  border-radius: calc(20rem / 16);
-  background-color: var(--primary-accent);
-  color: var(--primary-background);
+  background-color: var(--button-background);
+  color: var(--text-light);
  border: none;
  outline: none;
  transition-duration: 0.3s;
--- a/components/EventDescriptionCard.module.css
+++ b/components/EventDescriptionCard.module.css
@ -4,7 +4,7 @@
  max-width: calc(540rem / 16);
  padding: calc(24rem / 16);
  border-radius: calc(20rem / 16);
-  background-color: var(--primary-background);
+  background-color: var(--card-background);
 }

 .poster {
@ -38,7 +38,7 @@

 .setting {
  margin: 0;
-  color: var(--primary-accent);
+  color: var(--link);
  font-size: calc(14rem / 16);
  font-weight: 600;
 }
--- a/components/Footer.module.css
+++ b/components/Footer.module.css
@ -1,6 +1,6 @@
 .footer {
  box-sizing: border-box;
-  background: var(--primary-heading);
+  background: var(--footer-background);
  padding: 1rem 0;
  width: 100%;
 }
@ -17,7 +17,7 @@
 }

 .text {
-  color: var(--primary-background);
+  color: var(--text-light);
  font-style: normal;
  text-align: center;
 }
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@ -1,11 +1,15 @@
 import Link from "next/link";
 import React from "react";

+import { Button } from "./Button";
 import { SocialLinks } from "./SocialLinks";
+import { useThemeContext } from "./Theme";

 import styles from "./Footer.module.css";

 export function Footer() {
+  const themeContext = useThemeContext();
+
  return (
    <footer className={styles.footer}>
      <div className={styles.container}>
@ -15,6 +19,16 @@ export function Footer() {
            <a className={styles.email}>exec@csclub.uwaterloo.ca</a>
          </Link>
        </div>
+        <Button
+          size="small"
+          onClick={() =>
+            themeContext?.theme.name === "dark"
+              ? themeContext?.setTheme("light")
+              : themeContext?.setTheme("dark")
+          }
+        >
+          Toggle Theme
+        </Button>
        <SocialLinks color="white" size="small" />
      </div>
    </footer>
--- a/components/Link.module.css
+++ b/components/Link.module.css
@ -1,5 +1,5 @@
 .link {
-  color: var(--primary-accent);
+  color: var(--link);
  transition-duration: 0.3s;
  text-decoration: none;
  white-space: normal;
@ -7,5 +7,5 @@
 }

 .link:hover {
-  color: var(--secondary-accent);
+  color: var(--link-hover);
 }
--- a/components/MiniEventCard.module.css
+++ b/components/MiniEventCard.module.css
@ -2,10 +2,11 @@
  box-sizing: border-box;
  position: relative;
  padding: calc(20rem / 16);
+  color: var(--text);
 }

-.card:nth-child(odd) {
-  background-color: var(--secondary-accent-light);
+.darkBg {
+  background-color: var(--dark-card-background);
 }

 .name {
@ -61,13 +62,15 @@
  fill: var(--primary-accent);
 }

+
 .card h1,
 .card h2,
 .card h3,
 .card h4 {
-  font-size: calc(16rem / 16);
+  font-size: calc(18rem / 16);
  margin-top: calc(24rem / 16);
  margin-bottom: calc(8rem / 16);
+  color: var(--mini-event-card-text);
 }

@media only screen and (max-width: calc(768rem / 16)) {
--- a/components/MiniEventCard.tsx
+++ b/components/MiniEventCard.tsx
@ -13,6 +13,7 @@ interface MiniEventCardProps {
  location: string;
  startDate: Date;
  endDate?: Date;
+  background: "dark-bg" | "normal-bg";
  year: string;
  term: string;
  slug: string;
@ -26,12 +27,15 @@ export const MiniEventCard: React.FC<MiniEventCardProps> = ({
  startDate,
  endDate,
  online,
+  background,
  year,
  term,
  slug,
 }) => {
+  const cardBackground =
+    background === "dark-bg" ? `${styles.darkBg} ${styles.card}` : styles.card;
  return (
-    <details className={styles.card}>
+    <details className={cardBackground}>
      <summary>
        <div onClick={(event) => event.preventDefault()}>
          <h2 className={styles.name}>
--- a/components/Navbar.module.css
+++ b/components/Navbar.module.css
@ -63,7 +63,7 @@
 }

 .navMenu a {
-  color: var(--primary-heading);
+  color: var(--primary-text);
  text-decoration: none;
 }

@ -219,6 +219,14 @@
    cursor: pointer;
  }

+  .icon line {
+    stroke: var(--icon);
+  }
+
+  .icon path {
+    fill: var(--icon);
+  }
+
  .navMobileBackground {
    position: fixed;
    visibility: hidden;
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@ -120,7 +120,7 @@ export function Navbar() {
          className={styles.hamburger}
          onClick={() => dispatch({ type: "open", route: router.pathname })}
        >
-          <Image src="/images/hamburger.svg" alt="Menu" />
+          <HamburgerSvg />
        </button>
        <div
          className={
@ -263,7 +263,7 @@ function NavItem(props: NavItemProps) {
            }
            onClick={() => props.onToggle(props.route)}
          >
-            <Image src="/images/dropdown-icon.svg" alt="Dropdown Icon" />
+            <DropdownSvg />
          </button>
          <ul
            className={
@ -348,3 +348,64 @@ function getMainRoute(route: string) {
  }
  return "/" + route.split("/")[1];
 }
+
+function HamburgerSvg() {
+  return (
+    <svg
+      width="30"
+      height="23"
+      viewBox="0 0 30 23"
+      className={styles.icon}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <line
+        x1="28"
+        y1="2"
+        x2="2"
+        y2="2"
+        stroke="#2A2A62"
+        strokeWidth="4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <line
+        x1="28"
+        y1="11.375"
+        x2="2"
+        y2="11.375"
+        stroke="#2A2A62"
+        strokeWidth="4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <line
+        x1="28"
+        y1="20.75"
+        x2="2"
+        y2="20.75"
+        stroke="#2A2A62"
+        strokeWidth="4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function DropdownSvg() {
+  return (
+    <svg
+      width="14"
+      height="9"
+      viewBox="0 0 14 9"
+      fill="none"
+      className={styles.icon}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7.75593 8.12713C7.35716 8.58759 6.64284 8.58759 6.24407 8.12713L0.638743 1.65465C0.0778675 1.00701 0.537921 0 1.39467 0L12.6053 0C13.4621 0 13.9221 1.00701 13.3613 1.65465L7.75593 8.12713Z"
+        fill="#2A2A62"
+      />
+    </svg>
+  );
+}
--- a/components/NewsCard.module.css
+++ b/components/NewsCard.module.css
@ -1,7 +1,7 @@
 .card {
  padding: calc(30rem / 16) calc(40rem / 16);
  max-width: calc(524rem / 16);
-  background-color: var(--primary-background);
+  background-color: var(--card-background);
  border-radius: calc(20rem / 16);
  margin-bottom: 1rem;
 }
@ -10,15 +10,17 @@
  max-width: unset;
  padding: unset;
  border-radius: unset;
+  background-color: var(--primary-background);
 }

 .date {
  font-size: calc(18rem / 16);
  margin: 0;
+  color: var(--primary-subtitle);
 }

 .author {
-  color: var(--secondary-heading);
+  color: var(--author-text);
  font-style: normal;
 }

--- a/components/OrganizedContent.module.css
+++ b/components/OrganizedContent.module.css
@ -30,7 +30,7 @@
  margin: calc(8rem / 16) calc(32rem / 16) calc(20rem / 16) 0;
  height: calc(100vh - (44rem / 16));

-  color: var(--primary-heading);
+  color: var(--sidebar-text);
  font-weight: 500;
 }

@ -55,10 +55,14 @@

 .selected {
  background-color: var(--primary-accent-lightest);
-  color: var(--primary-accent);
+  color: var(--primary-heading);
  font-weight: 700;
 }

+.selected div {
+  color: var(--primary-heading);
+}
+
 .readAll {
  font-weight: 700;
 }
@ -69,7 +73,7 @@

 .selected .marker {
  display: inline;
-  background-color: var(--primary-accent);
+  background-color: var(--marker);
  height: calc(24rem / 16);
  width: calc(4rem / 16);
  margin-right: 1rem;
--- a/components/OrganizedContent/Header.module.css
+++ b/components/OrganizedContent/Header.module.css
@ -8,12 +8,12 @@
  flex-direction: row;
  align-items: flex-end;
  padding-bottom: 1rem;
-  border-bottom: calc(1rem / 16) solid var(--primary-heading);
+  border-bottom: calc(1rem / 16) solid var(--border);
 }

 .header {
  line-height: 1;
-  color: var(--primary-heading);
+  color: var(--primary-title);
  font-size: calc(48rem / 16);
  margin: 0 0 0 calc(36rem / 16);
  text-align: center;
--- a/components/SocialLinks.module.css
+++ b/components/SocialLinks.module.css
@ -22,5 +22,5 @@
 }

 .white {
-  fill: var(--primary-background);
+  fill: var(--text-light);
 }
--- a/components/SocialLinks.tsx
+++ b/components/SocialLinks.tsx
@ -77,7 +77,7 @@ function InstagramSvg(color: string) {
      xmlns="http://www.w3.org/2000/svg"
    >
      <linearGradient id="bluegreen-gradient">
-        <stop offset="0%" stopColor="#1481E3" />
+        <stop offset="0%" stopColor="var(--blue-gradient)" />
        <stop offset="100%" stopColor="#4ED4B2" />
      </linearGradient>
      <path
@ -101,7 +101,7 @@ function DiscordSvg(color: string) {
      version="1.1"
    >
      <linearGradient id="bluegreen-gradient">
-        <stop offset="0%" stopColor="#1481E3" />
+        <stop offset="0%" stopColor="var(--blue-gradient)" />
        <stop offset="100%" stopColor="#4ED4B2" />
      </linearGradient>
      <g id="surface1">
@ -125,7 +125,7 @@ function TwitchSvg(color: string) {
      xmlns="http://www.w3.org/2000/svg"
    >
      <linearGradient id="bluegreen-gradient">
-        <stop offset="0%" stopColor="#1481E3" />
+        <stop offset="0%" stopColor="var(--blue-gradient)" />
        <stop offset="100%" stopColor="#4ED4B2" />
      </linearGradient>
      <g clipPath="url(#clip0)">
@ -170,7 +170,7 @@ function FacebookSvg(color: string) {
      xmlns="http://www.w3.org/2000/svg"
    >
      <linearGradient id="bluegreen-gradient">
-        <stop offset="0%" stopColor="#1481E3" />
+        <stop offset="0%" stopColor="var(--blue-gradient)" />
        <stop offset="100%" stopColor="#4ED4B2" />
      </linearGradient>
      <path
@ -194,7 +194,7 @@ function LiberaSvg(color: string) {
      xmlns="http://www.w3.org/2000/svg"
    >
      <linearGradient id="bluegreen-gradient">
-        <stop offset="0%" stopColor="#1481E3" />
+        <stop offset="0%" stopColor="var(--blue-gradient)" />
        <stop offset="100%" stopColor="#4ED4B2" />
      </linearGradient>
      <path
--- a/components/Table.module.css
+++ b/components/Table.module.css
@ -7,7 +7,7 @@
 }

 .table thead tr {
-  background: var(--secondary-accent-light);
+  background: var(--table-header);
 }

 .table tbody tr {
@ -15,8 +15,8 @@
  vertical-align: top;
 }

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

 .table th {
--- a/components/Theme.tsx
+++ b/components/Theme.tsx
@ -29,9 +29,17 @@ export const PALETTE_NAMES = [
  "--secondary-accent-light",

  "--primary-heading",
-  "--secondary-heading",

+  "--primary-title",
+  "--primary-subtitle",
+  "--secondary-subtitle",
+
+  "--primary-text",
  "--text",
+  "--text-light",
+  "--author-text",
+  "--sidebar-text",
+  "--mini-event-card-text",

  "--form-invalid",
  "--warning-background",
@ -41,9 +49,24 @@ export const PALETTE_NAMES = [
  "--input-placeholder-text",
  "--input-text",

+  "--icon",
+
  "--code-background",
+  "--button-background",
+  "--footer-background",
+  "--card-background",
+  "--dark-card-background",
+  "--table-header",
+  "--table-section",

  "--navbar-page-overlay",
+
+  "--link",
+  "--link-hover",
+
+  "--blue-gradient",
+  "--border",
+  "--marker",
 ] as const;

 export const emptyPalette = PALETTE_NAMES.reduce(
@ -77,15 +100,9 @@ export function ThemeProvider(props: Props) {
  const setTheme = (input: SetThemeInput) => {
    if (typeof input === "string") {
      PALETTE_NAMES.forEach((name) =>
-        document.body.style.setProperty(name, "")
+        document.body.style.setProperty(name, "var(--" + input + name + ")")
      );
-
-      if (input === "light") {
-        document.body.classList.remove("dark");
-      } else if (input === "dark") {
-        document.body.classList.add("dark");
-      }
-
+      savePalette(getCurrentPalette(input));
      setThemeName(input);
    } else {
      const properties = Object.keys(input) as PaletteNames[];
@ -107,7 +124,14 @@ export function ThemeProvider(props: Props) {
    const customPalette = getSavedPalette();

    if (customPalette == null) {
-      setThemeName("light");
+      const prefersDark = window.matchMedia(
+        "(prefers-color-scheme: dark)"
+      ).matches;
+      if (prefersDark) {
+        setTheme("dark");
+      } else {
+        setTheme("light");
+      }
    } else {
      setTheme(customPalette);
      setThemeName("custom");
@ -124,11 +148,11 @@ export function ThemeProvider(props: Props) {
              theme: {
                name: themeName,
                get palette() {
-                  return getCurrentPalette();
+                  return getCurrentPalette(themeName);
                },
              },
              setTheme,
-              save: () => savePalette(getCurrentPalette()),
+              save: () => savePalette(getCurrentPalette(themeName)),
              clearSaved: clearSavedPalette,
            }
      }
@ -148,13 +172,30 @@ export type Palette = {
  [key in PaletteNames]: string;
 };

-function getCurrentPalette() {
-  const styles = getComputedStyle(document.body);
+function themePropertyName(
+  name: PaletteNames,
+  themeName: BuiltInThemes
+): string {
+  return `--${themeName}${name}`;
+}

+function getCurrentPalette(themeName: string) {
+  const styles = getComputedStyle(document.body);
+  if (themeName === "light" || themeName === "dark") {
    return PALETTE_NAMES.reduce(
-    (partial, varName) => ({
+      (partial, name) => ({
        ...partial,
-      [varName]: styles.getPropertyValue(varName).trim(),
+        [name]: styles
+          .getPropertyValue(themePropertyName(name, themeName))
+          .trim(),
+      }),
+      {} as Palette
+    );
+  }
+  return PALETTE_NAMES.reduce(
+    (partial, name) => ({
+      ...partial,
+      [name]: styles.getPropertyValue(name).trim(),
    }),
    {} as Palette
  );
--- a/lib/news.ts
+++ b/lib/news.ts
@ -88,7 +88,7 @@ export async function getNewsBySlug(
    metadata: {
      ...metadata,
      date: getLocalDateFromEST(
-        parse(metadata.date, DATE_FORMAT, new Date())
+        parse(metadata.date as string, DATE_FORMAT, new Date())
      ).toString(),
      permalink: `/news/${year}/${term}/${slugDate}`,
    } as Metadata,
--- a/lib/team.ts
+++ b/lib/team.ts
@ -96,7 +96,7 @@ export async function getExec(name: string, pos: string, convert = true) {
    const raw = await readFile(path.join(EXECS_PATH, `${name}${FILETYPE}`));
    ({ content, data: metadata } = matter(raw));

-    const image = await getMemberImagePath(metadata.name);
+    const image = await getMemberImagePath(metadata.name as string);

    return {
      content: convert ? await serialize(content) : content,
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -41,14 +41,14 @@
    "@types/mdx-js__react": "^1.5.3",
    "@types/node": "^16.9.1",
    "@types/react": "^17.0.14",
-    "@typescript-eslint/eslint-plugin": "4.28.4",
-    "@typescript-eslint/parser": "4.28.4",
-    "eslint": "7.32.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.24.0",
-    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-react": "7.24.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "@typescript-eslint/eslint-plugin": "5.22.0",
+    "@typescript-eslint/parser": "5.22.0",
+    "eslint": "8.14.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "7.29.4",
+    "eslint-plugin-react-hooks": "^4.5.0",
    "gray-matter": "^4.0.3",
    "ical-generator": "^3.0.0",
    "postcss": "^8.3.0",
@ -56,6 +56,6 @@
    "postcss-flexbugs-fixes": "^5.0.2",
    "postcss-preset-env": "^7.0.0",
    "ts-node": "^10.2.1",
-    "typescript": "4.3.5"
+    "typescript": "4.6.4"
  }
 }
--- a/pages/_app.css
+++ b/pages/_app.css
@ -4,34 +4,161 @@ html {

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

-  --primary-accent: #1482e3;
-  --primary-accent-soft: #5caff9;
-  --primary-accent-light: #c4e0f8;
-  --primary-accent-lighter: #e1eefa;
-  --primary-accent-lightest: #f7fbff;
+  --light--primary-accent: #1482e3;
+  --light--primary-accent-soft: #5caff9;
+  --light--primary-accent-light: #c4e0f8;
+  --light--primary-accent-lighter: #e1eefa;
+  --light--primary-accent-lightest: #f7fbff;

-  --secondary-accent: #4ed4b2;
-  --secondary-accent-light: #dcf6f0;
+  --light--secondary-accent: #4ed4b2;
+  --light--secondary-accent-light: #dcf6f0;

-  --primary-heading: #2a2a62;
-  --secondary-heading: #525284;
+  --light--primary-heading: #2a2a62;

-  --text: #000000;
+  --light--primary-text: #2a2a62;
+  --light--text: #000000;
+  --light--text-light: #FFFFFF;
+  --light--sidebar-text: #2a2a62;
+  --light--author-text: #525284;
+  --light--mini-event-card-text: #000000;

-  --form-invalid: #9f616a;
-  --warning-background: #dd0014;
-  --warning-text: #ffffff;
+  --light--primary-title: #2a2a62;
+  --light--primary-subtitle: #2a2a62;
+  --light--secondary-subtitle: #2a2a62;

-  --input-background: #f0f0f0;
-  --input-placeholder-text: #bbbbbb;
-  --input-text: #6b6b6b;
+  --light--form-invalid: #9f616a;
+  --light--warning-background: #dd0014;
+  --light--warning-text: #ffffff;

-  --code-background: #f0f0f0;
+  --light--link: #1482e3;
+  --light--link-hover: #4ed3b2;

-  --navbar-page-overlay: #787878b2;
+  --light--input-background: #f0f0f0;
+  --light--input-placeholder-text: #bbbbbb;
+  --light--input-text: #6b6b6b;
+
+  --light--icon: #2A2A62;
+
+  --light--navbar-page-overlay: hsla(0,0%,47.1%,0.6980392156862745);
+  --light--code-background: #f0f0f0;
+
+  --light--button-background: #1482e3;
+  --light--footer-background: #2a2a62;
+  --light--card-background: #FFFFFF;
+  --light--dark-card-background: #DCF6F0;
+  --light--table-header: #DCF6F0;
+  --light--table-section: #f7fbff;
+
+  --light--blue-gradient: #1481E3;
+  --light--border: #2a2a62;
+  --light--marker: #1482e3;
+
+  --dark--primary-background: #171729;
+  --dark--secondary-background: #252542;
+
+  --dark--primary-accent: #5CAFF9;
+  --dark--primary-accent-soft: #5cb0f9;
+  --dark--primary-accent-light: #252542;
+  --dark--primary-accent-lighter: #171729;
+  --dark--primary-accent-lightest: #464671;
+
+  --dark--secondary-accent: #4ed3b2;
+  --dark--secondary-accent-light: #525284;
+
+  --dark--primary-heading: #fcf7f4;
+
+  --dark--form-invalid: #9f616a;
+  --dark--warning-background: #dd0014;
+  --dark--warning-text: #ffffff; 
+
+  --dark--link: #4ED4B2;
+  --dark--link-hover: #C1F0E4;
+
+  --dark--primary-text: #ffffff;
+  --dark--text: #AFAFD3;
+  --dark--text-light: #FFFFFF;
+  --dark--sidebar-text: #AFAFD3;
+  --dark--author-text: #ABABF2;
+  --dark--mini-event-card-text: #5CAFF9;
+
+  --dark--input-background: #C4C4C4;
+  --dark--input-placeholder-text: #bbbbbb;
+  --dark--input-text: #6b6b6b;
+
+  --dark--icon: #ffffff;
+
+  --dark--primary-title: #5CAFF9;
+  --dark--primary-subtitle: #E0E0F7;
+  --dark--secondary-subtitle: #ABABF2;
+
+  --dark--navbar-page-overlay: rgba(0, 0, 0, 0.7);
+  --dark--code-background: #3d3d68;
+
+  --dark--button-background: #1482e3;
+  --dark--footer-background: #525284;
+  --dark--card-background: #272751;
+  --dark--dark-card-background: #272751;
+  --dark--table-header: #252542;
+  --dark--table-section: #202037;
+
+  --dark--blue-gradient: #5CAFF9;
+  --dark--border: #2A2A62;
+  --dark--marker: #C5C5F0;
+
+  --primary-background: var(--light--primary-background);
+  --secondary-background: var(--light--secondary-background);
+
+  --primary-accent: var(--light--primary-accent);
+  --primary-accent-soft: var(--light--primary-accent-soft);
+  --primary-accent-light: var(--light--primary-accent-light);
+  --primary-accent-lighter: var(--light--primary-accent-lighter);
+  --primary-accent-lightest: var(--light--primary-accent-lightest);
+
+  --secondary-accent: var(--light--secondary-accent);
+  --secondary-accent-light: var(--light--secondary-accent-light);
+
+  --primary-heading: var(--light--primary-heading);
+
+  --form-invalid: var(--light--form-invalid);
+  --warning-background: var(--light--warning-background);
+  --warning-text: var(--light--warning-text);
+
+  --link: var(--light--link);
+  --link-hover: var(--light--link-hover);
+
+  --primary-text: var(--light--primary-text);
+  --text: var(--light--text);
+  --text-light: var(--light--text-light);
+  --sidebar-text: var(--light--sidebar-text);
+  --author-text: var(--light--author-text);
+  --mini-event-card-text: var(--light--mini-event-card-text);
+
+  --input-background: var(--light--input-background);
+  --input-placeholder-text: var(--light--input-placeholder-text);
+  --input-text: var(--light--input-text);
+
+  --icon: var(--light--icon);
+
+  --primary-title: var(--light--primary-title);
+  --primary-subtitle: var(--light--primary-subtitle);
+  --secondary-subtitle: var(--light--secondary-subtitle);
+
+  --navbar-page-overlay: var(--light--navbar-page-overlay);
+  --code-background: var(--light--code-background);
+
+  --button-background: var(--light--button-background);
+  --footer-background: var(--light--footer-background);
+  --card-background: var(--light--card-background);
+  --dark-card-background: var(--light--dark-card-background);
+  --table-header: var(--light--table-header);
+  --table-section: var(--light--table-section);
+
+  --blue-gradient: var(--light--blue-gradient);
+  --border: var(--light--border);
+  --marker: var(--light--marker);

  background-color: var(--primary-background);
  color: var(--text);
@ -47,10 +174,6 @@ input {
  font-family: "Poppins", "sans-serif";
 }

-.dark {
-  /* FIXME: Implement dark theme */
-}
-
 h1,
 h2,
 h3,
@ -117,3 +240,58 @@ h4 + * {
    font-weight: 600;
  }
 }
+
+@media only screen and (prefers-color-scheme: dark) {
+  body {
+    --primary-background: var(--dark--primary-background);
+    --secondary-background: var(--dark--secondary-background);
+
+    --primary-accent: var(--dark--primary-accent);
+    --primary-accent-soft: var(--dark--primary-accent-soft);
+    --primary-accent-light: var(--dark--primary-accent-light);
+    --primary-accent-lighter: var(--dark--primary-accent-lighter);
+    --primary-accent-lightest: var(--dark--primary-accent-lightest);
+
+    --secondary-accent: var(--dark--secondary-accent);
+    --secondary-accent-light: var(--dark--secondary-accent-light);
+
+    --primary-heading: var(--dark--primary-heading);
+
+    --form-invalid: var(--dark--form-invalid);
+    --warning-background: var(--dark--warning-background);
+    --warning-text: var(--dark--warning-text);
+
+    --link: var(--dark--link);
+    --link-hover: var(--dark--link-hover);
+
+    --primary-text: var(--dark--primary-text);
+    --text: var(--dark--text);
+    --text-light: var(--dark--text-light);
+    --sidebar-text: var(--dark--sidebar-text);
+    --author-text: var(--dark--author-text);
+    --mini-event-card-text: var(--dark--mini-event-card-text);
+
+    --input-background: var(--dark--input-background);
+    --input-placeholder-text: var(--dark--input-placeholder-text);
+    --input-text: var(--dark--input-text);
+
+    --icon: var(--dark--icon);
+
+    --primary-title: var(--dark--primary-title);
+    --primary-subtitle: var(--dark--primary-subtitle);
+    --secondary-subtitle: var(--dark--secondary-subtitle);
+
+    --navbar-page-overlay: var(--dark--navbar-page-overlay);
+    --code-background: var(--dark--code-background);
+
+    --button-background: var(--dark--button-background);
+    --footer-background: var(--dark--footer-background);
+    --card-background: var(--dark--card-background);
+    --table-header: var(--dark--table-header);
+    --table-section: var(--dark--table-section);
+
+    --blue-gradient: var(--dark--blue-gradient);
+    --border: var(--dark--border);
+    --marker: var(--dark--marker);
+  }
+}
--- a/pages/about/index.module.css
+++ b/pages/about/index.module.css
@ -6,6 +6,7 @@
  height: calc(80rem / 16);
  margin-top: auto;
  padding-left: calc(20rem / 16);
+  color: var(--primary-title);
 }

 .content {
--- a/pages/about/members.module.css
+++ b/pages/about/members.module.css
@ -1,6 +1,14 @@
+.title {
+  color: var(--primary-title);
+}
+
 .table {
  display: table;
  width: 100%;
  margin-top: calc(20rem / 16);
  margin-bottom:  calc(60rem / 16);
 }
+
+.table thead {
+  background-color: var(--table-header);
+}
--- a/pages/about/members.tsx
+++ b/pages/about/members.tsx
@ -20,7 +20,7 @@ export default function Members(props: Props) {
  return (
    <>
      <Title>Members</Title>
-      <h1>Members</h1>
+      <h1 className={styles.title}>Members</h1>
      <p>
        {`The members for ${capitalize(props.term)} ${
          props.year
--- a/pages/about/our-supporters.module.css
+++ b/pages/about/our-supporters.module.css
@ -7,11 +7,11 @@
  flex-direction: row;
  align-items: flex-end;
  padding-bottom: 1rem;
-  border-bottom: calc(1rem / 16) solid var(--primary-heading);
+  border-bottom: calc(1rem / 16) solid var(--border);
 }

 .header {
-  color: var(--primary-heading);
+  color: var(--primary-title);
  margin: 0 1rem 0 0;
  text-align: center;
 }
--- a/pages/about/team.module.css
+++ b/pages/about/team.module.css
@ -2,7 +2,7 @@
  display: flex;
  flex-direction: row;
  padding-bottom: calc(24rem / 16);
-  border-bottom: calc(1rem / 16) solid var(--primary-heading);
+  border-bottom: calc(1rem / 16) solid var(--border);
  margin-bottom: calc(46rem / 16);
 }

@ -15,7 +15,7 @@
 }

 .header {
-  color: var(--primary-heading);
+  color: var(--primary-title);
  font-size: calc(48rem / 16);
  margin: 0 calc(53rem / 16) 0 0;
 }
@ -25,7 +25,7 @@
  font-size: calc(36rem / 16);
  font-weight: 600;
  padding-bottom: calc(22rem / 16);
-  border-bottom: calc(1rem / 16) solid var(--primary-heading);
+  border-bottom: calc(1rem / 16) solid var(--border);
  margin-bottom: calc(46rem / 16);
  margin-top: calc(86rem / 16);
 }
--- a/pages/events/[year]/[term]/index.module.css
+++ b/pages/events/[year]/[term]/index.module.css
@ -4,8 +4,9 @@

 .main > h1,
 .main > section > h1 {
+  color: var(--primary-title);
  padding-bottom: calc(16rem / 16);
-  border-bottom: calc(1rem / 16) solid var(--primary-heading);
+  border-bottom: calc(1rem / 16) solid var(--border);
 }

 .header {
--- a/pages/events/[year]/[term]/index.tsx
+++ b/pages/events/[year]/[term]/index.tsx
@ -99,15 +99,18 @@ export default function TermPage(props: Props) {
            </h1>
          )}
          <div className={styles.miniEventCards}>
-            {props.pastEvents.map(({ content, metadata }) => (
+            {props.pastEvents.map((event, idx) => (
              <MiniEventCard
-                {...metadata}
-                startDate={new Date(metadata.startDate)}
+                {...event.metadata}
+                startDate={new Date(event.metadata.startDate)}
                endDate={
-                  metadata.endDate ? new Date(metadata.endDate) : undefined
+                  event.metadata.endDate
+                    ? new Date(event.metadata.endDate)
+                    : undefined
                }
-                description={<MDXRemote {...content} />}
-                key={metadata.name + metadata.startDate.toString()}
+                description={<MDXRemote {...event.content} />}
+                key={event.metadata.name + event.metadata.startDate.toString()}
+                background={idx % 2 === 0 ? "dark-bg" : "normal-bg"}
              />
            ))}
          </div>
--- a/pages/events/[year]/index.module.css
+++ b/pages/events/[year]/index.module.css
@ -4,7 +4,7 @@

 .main > h1 {
  padding-bottom: calc(16rem / 16);
-  border-bottom: calc(1rem / 16) solid var(--primary-heading);
+  border-bottom: calc(1rem / 16) solid var(--border);
 }

 .blue {
--- a/pages/get-involved.module.css
+++ b/pages/get-involved.module.css
@ -5,11 +5,11 @@
 .page > header {
  display: flex;
  flex-direction: row;
-  border-bottom: calc(1rem / 16) solid var(--primary-heading);
+  border-bottom: calc(1rem / 16) solid var(--border);
 }

 .headerText > h1 {
-  color: var(--primary-heading);
+  color: var(--primary-title);
  margin: 0 0 calc(8rem / 16) 0;
 }

--- a/pages/index.module.css
+++ b/pages/index.module.css
@ -56,7 +56,7 @@
 .clubDescription {
  margin-bottom: calc(50rem / 16);
  text-align: center;
-  color: var(--primary-heading);
+  color: var(--primary-text);
 }

 .clubDescription br {
--- a/pages/news/[year]/[term].module.css
+++ b/pages/news/[year]/[term].module.css
@ -4,7 +4,7 @@

 .page > h1 {
  padding-bottom: calc(16rem / 16);
-  border-bottom: calc(1rem / 16) solid var(--primary-heading);
+  border-bottom: calc(1rem / 16) solid var(--border);
 }

 .term {
--- a/pages/resources/advice/co-op.module.css
+++ b/pages/resources/advice/co-op.module.css
@ -4,11 +4,12 @@
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: calc(32rem / 16);
-  border-bottom: calc(1rem / 16) solid var(--primary-heading);
+  border-bottom: calc(1rem / 16) solid var(--border);
 }

 .title {
  padding-right: calc(40rem / 16);
+  color: var(--primary-title);
 }

 .adviceBarContainer {
@ -30,10 +31,22 @@ a.currentAdvice {
  color: var(--primary-accent);
 }

+.adviceBarContainer a:hover {
+  color: var(--link-hover);
+}
+
 .content {
  padding-bottom: calc(48rem / 16);
 }

+.content h3 {
+  color: var(--primary-subtitle);
+}
+
+.content h4 {
+  color: var(--secondary-subtitle);
+}
+
@media only screen and (max-width: calc(768rem / 16)) {
  .titleContainer {
    flex-direction: column-reverse;
--- a/pages/resources/tech-talks/index.module.css
+++ b/pages/resources/tech-talks/index.module.css
@ -8,7 +8,7 @@
  align-items: flex-end;
  padding-bottom: 1rem;
  margin-bottom: calc(40rem / 16);
-  border-bottom: calc(1rem / 16) solid var(--primary-heading);
+  border-bottom: calc(1rem / 16) solid var(--border);
 }

 .header {
@ -16,7 +16,7 @@
 }

 .header h1 {
-  color: var(--primary-heading);
+  color: var(--primary-title);
  margin: 0 1rem 0 0;
  text-align: left;
 }
--- a/pages/themer.tsx
+++ b/pages/themer.tsx
@ -26,6 +26,15 @@ export default function Themer() {
          >
            Reset to light mode
          </Button>
+          <Button
+            type="reset"
+            onClick={() => {
+              context?.clearSaved();
+              context?.setTheme("dark");
+            }}
+          >
+            Reset to dark mode
+          </Button>
          <Button type="submit" onClick={() => context?.save()}>
            Save
          </Button>