Darkmode: Fixed initial flash of light 📸

src/lib/components/events/event-item.svelte

@@ -293,6 +293,7 @@
     .action-item {
       --size: 40px;
 
+      color: var(--highlights);
       width: var(--size);
       height: var(--size);
       padding: calc(var(--size) * 0.15);

src/lib/components/index/acm-paths.svelte

@@ -17,7 +17,7 @@
     {#each pinnedPaths as { title, slug, picture, color } (slug)}
       <a class="path-item" target="_self" href={`/paths#${slug}`}>
         <img src={picture} alt={`${slug}-logo`} />
-        <p class="size-md headers">
+        <p class="size-md brand-dark headers">
           acm<span class="brand-em" style={`--brand-color: ${color}`}>
             {title}
           </span>

src/lib/components/sections/navbar.svelte

@@ -92,12 +92,14 @@
   nav .full-logomark .logo-text {
     font-size: 24px;
     padding-left: 8px;
+    color: var(--acm-dark);
   }
 
   nav .pages a {
     font-size: 18px;
     margin-left: 64px;
     transition: color 0.25s ease-in-out;
+    color: var(--acm-dark);
   }
 
   nav .page-about:hover,

src/lib/stores/theme.ts

@@ -20,10 +20,12 @@ function save(value: AcmTheme) {
   switch (value) {
     case AcmTheme.Dark: {
       document.body.classList.add(AcmTheme.Dark);
+      document.body.classList.remove(AcmTheme.Light);
       return;
     }
     default: {
       document.body.classList.remove(AcmTheme.Dark);
+      document.body.classList.add(AcmTheme.Light);
       return;
     }
   }

src/routes/about/index.svelte

@@ -23,7 +23,12 @@
   <h2 slot="headline" class="size-lg">Who are we?</h2>
   <p slot="text" class="size-xs">
     acmCSUF is a student chapter of the
-    <a href="https://acm.org" class="brand-med" target="_blank" rel="noopener noreferrer">
+    <a
+      href="https://acm.org"
+      class="brand-dark brand-med"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
       Association for Computing Machinery</a
     >, an international organization based in New York that advocates for the advancement of
     computer science as a science and profession. Our chapter based in California State University,

static/global.css

@@ -9,28 +9,17 @@ body {
 html,
 body,
 #svelte {
-  color: var(--acm-dark);
   font-family: 'Poppins', sans-serif;
   padding: 0;
   margin: 0;
 }
 
+html,
 body {
+  color: var(--acm-dark);
   background: var(--acm-light);
 }
 
-.dark {
-  --acm-dark: #dddddd;
-  --acm-light: #101315;
-  --navbar-bg: var(--acm-gray);
-  --footer-bg: var(--acm-gray);
-}
-
-.info-screen {
-  display: block;
-  height: 100vh;
-}
-
 :root {
   --acm-blue: #2c91c6;
   --acm-bluer: #1e6cff;
@@ -39,37 +28,12 @@ body {
   --acm-red: #d41153;
   --acm-sky: #38b6ff;
   --acm-gray: #292c2f;
-  --acm-dark: #101315;
-  --acm-light: #f8f8f8;
 
   --acm-general-rgb: 44, 145, 198;
   --acm-algo-rgb: 157, 53, 231;
   --acm-create-rgb: 255, 67, 101;
   --acm-dev-rgb: 30, 108, 255;
 
-  --desktop-breakpoint: 768px;
-  --navbar-height: 82px;
-  --navbar-bg: var(--acm-light);
-  --footer-bg: var(--acm-dark);
-
-  /* Fluid font size is the magical numbers for fluid font sizing. It should be
-   * put into parent containers. */
-  --fluid-font-size: clamp(1vw, 0.7em, 3vw);
-
-  --p-font-size: 2em;
-  --h-font-size-med: 3em;
-
-  --min-p-font-size: 18px;
-  --max-p-font-size: 36px;
-  --min-h-font-size: 22px;
-  --max-h-font-size: 86px;
-  --max-h-font-size-med: 64px;
-
-  --heading-font-size: 48px;
-  --subheading-font-size: 24px;
-  --body-font-size: 18px;
-  --margin-text-font-size: 12px;
-
   --size-xs: 16px;
   --size-sm: 18px;
   --size-md: 24px;
@@ -163,3 +127,35 @@ body {
 .brand-sky {
   color: var(--acm-sky);
 }
+
+.light {
+  --acm-dark: #101315;
+  --acm-light: #f8f8f8;
+  --navbar-bg: var(--acm-light);
+  --footer-bg: var(--acm-dark);
+}
+
+.dark {
+  --acm-dark: #dddddd;
+  --acm-light: #101315;
+  --navbar-bg: var(--acm-gray);
+  --footer-bg: var(--acm-gray);
+}
+
+@media (prefers-color-scheme: light) {
+  body:not(.dark) {
+    --acm-dark: #101315;
+    --acm-light: #f8f8f8;
+    --navbar-bg: var(--acm-light);
+    --footer-bg: var(--acm-dark);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  body:not(.light) {
+    --acm-dark: #dddddd;
+    --acm-light: #101315;
+    --navbar-bg: var(--acm-gray);
+    --footer-bg: var(--acm-gray);
+  }
+}