implement dark theme

2022-02-22 16:33:37 -05:00 · 2022-02-22 16:33:37 -05:00 · e395d37d28
parent 4aaa112822
commit e395d37d28
28 changed files with 184 additions and 41 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/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(--light-text);
  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(--light-text);
  font-style: normal;
  text-align: center;
 }
--- 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,12 @@
  box-sizing: border-box;
  position: relative;
  padding: calc(20rem / 16);
+  color: var(--mini-event-card-text);
 }

 .card:nth-child(odd) {
-  background-color: var(--secondary-accent-light);
+  background-color: var(--sectioning-light);
+  color: var(--primary-subtitle);
 }

 .name {
@ -19,10 +21,14 @@
 }

 .info {
-  color: var(--primary-heading);
+  color: var(--info-text);
  margin-bottom: calc(12rem / 16);
 }

+.card:nth-child(odd) .info {
+  color: var(--primary-subtitle);
+}
+
 .details {
  position: absolute;
  top: 0;
@ -33,6 +39,10 @@
  font-size: calc(14rem / 16);
 }

+.card:nth-child(odd) .details {
+  color: var(--primary-subtitle);
+}
+
 .card[open] .shortDescription {
  display: none;
 }
@ -57,6 +67,10 @@
  fill: var(--primary-accent);
 }

+.card:nth-child(odd) .dropDownIcon {
+  fill: var(--primary-subtitle);
+}
+
 .card h1,
 .card h2,
 .card h3,
@ -64,6 +78,14 @@
  font-size: calc(16rem / 16);
  margin-top: calc(24rem / 16);
  margin-bottom: calc(8rem / 16);
+  color: var(--mini-event-card-text);
+}
+
+.card:nth-child(odd) h1,
+.card:nth-child(odd) h2,
+.card:nth-child(odd) h3,
+.card:nth-child(odd) h4 {
+  color: var(--primary-subtitle);
 }

@media only screen and (max-width: calc(768rem / 16)) {
--- 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;
 }

--- 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);
 }

@ -9,15 +9,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
@ -69,7 +69,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(--light-text);
 }
--- 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 {
--- a/components/Theme.tsx
+++ b/components/Theme.tsx
@ -31,7 +31,16 @@ export const PALETTE_NAMES = [
  "--primary-heading",
  "--secondary-heading",

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

  "--form-invalid",

@ -40,8 +49,20 @@ export const PALETTE_NAMES = [
  "--input-text",

  "--code-background",
+  "--button-background",
+  "--footer-background",
+  "--card-background",
+  "--sectioning-light",
+  "--table-header",

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

 export const emptyPalette = PALETTE_NAMES.reduce(
@ -105,7 +126,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 {
+        setThemeName("light");
+      }
    } else {
      setTheme(customPalette);
      setThemeName("custom");
--- a/pages/_app.css
+++ b/pages/_app.css
@ -19,17 +19,37 @@ body {
  --primary-heading: #2a2a62;
  --secondary-heading: #525284;

+  --primary-text: #2a2a62;
  --text: #000000;
+  --light-text: #FFFFFF;
+  --info-text: #2a2a62;
+  --author-text: #525284;
+  --mini-event-card-text: #000000;
+
+  --primary-title: #2a2a62;
+  --primary-subtitle: #2a2a62;
+  --secondary-subtitle: #2a2a62;

  --form-invalid: #9f616a;

+  --link: #1482e3;
+  --link-hover: #4ed3b2;
+
  --input-background: #f0f0f0;
  --input-placeholder-text: #bbbbbb;
  --input-text: #6b6b6b;

  --code-background: #f0f0f0;

-  --navbar-page-overlay: #787878b2;
+  --button-background: #1482e3;
+  --footer-background: #2a2a62;
+  --card-background: #ffffff;
+  --sectioning-light: #dcf6f0;
+  --table-header: #4ed4b2;
+
+  --blue-gradient: #1481E3;
+  --border: #2a2a62;
+  --marker: #1482e3;

  background-color: var(--primary-background);
  color: var(--text);
@ -47,6 +67,45 @@ input {

 .dark {
  /* FIXME: Implement dark theme */
+  --primary-background: #171729;
+  --secondary-background: #252542;
+
+  --primary-accent: #5CAFF9;
+  --primary-accent-soft: #5cb0f9;
+  --primary-accent-light: #252542;
+  --primary-accent-lightest: #525284;
+
+  --secondary-accent: #4ed3b2;
+  --secondary-accent-light: #525284;
+
+  --primary-heading: #fcf7f4;
+  --secondary-heading: #525284;
+
+  --link: #4ED4B2;
+  --link-hover: #C1F0E4;
+
+  --primary-text: #ffffff;
+  --text: #AFAFD3;
+  --light-text: #FFFFFF;
+  --info-text: #5CAFF9;
+  --author-text: #ABABF2;
+  --mini-event-card-text: #5CAFF9;
+
+  --primary-title: #5CAFF9;
+  --primary-subtitle: #C5C5F0;
+  --secondary-subtitle: #ABABF2;
+
+  --code-background: #3d3d68;
+
+  --button-background: #1482e3;
+  --footer-background: #525284;
+  --card-background: #3A3A61;
+  --sectioning-light: rgba(82, 82, 132, 0.2);
+  --table-header: #252542;
+
+  --blue-gradient: #5CAFF9;
+  --border: #2A2A62;
+  --marker: #C5C5F0;
 }

 h1,
--- 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]/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>