Merge branch 'main' into node-page-updates

thisisjofrank · web-flow · commit 2430a847f986 · 2025-11-05T14:39:37.000Z
diff --git a/_includes/layout.tsx b/_includes/layout.tsx
@@ -18,6 +18,7 @@ export default function Layout(data: Lume.Data) {
       <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="color-scheme" content="light dark" />
         <title>{deleteBackticks(data.title)}</title>
         {data?.description &&
           <meta name="description" content={data.description} />}
@@ -39,14 +40,14 @@ export default function Layout(data: Lume.Data) {
           href="/fonts/inter/Inter-Regular.woff2"
           as="font"
           type="font/woff2"
-          crossOrigin="true"
+          crossOrigin="anonymous"
         />
         <link
           rel="preload"
           href="/fonts/inter/Inter-SemiBold.woff2"
           as="font"
           type="font/woff2"
-          crossOrigin="true"
+          crossOrigin="anonymous"
         />
         <link rel="me" href="https://fosstodon.org/@deno_land" />
         <data.comp.OpenGraph
diff --git a/deno.lock b/deno.lock
diff --git a/styles.css b/styles.css
@@ -807,6 +807,8 @@
   :host {
     --header-height: 6rem;
     --subnav-height: 2.5rem;
+    /* Advertise support to the UA and extensions; enables form controls/scrollbar theming */
+    color-scheme: light dark;
 
     @media (min-width: 48rem) {
       --header-height: 4rem;
@@ -834,6 +836,32 @@
     }
   }
 
+  /* No-JS fallback: respect user's system preference for dark mode */
+  @media (prefers-color-scheme: dark) {
+    /* Apply only when no explicit theme class is set */
+    :root:not(.light):not(.dark),
+    :host(:not(.light):not(.dark)) {
+      --color-background-raw: var(--color-black);
+      --color-background-primary: var(--color-gray-950);
+      --color-background-secondary: var(--color-gray-900);
+      --color-background-tertiary: var(--color-gray-800);
+      --color-foreground-primary: var(--color-gray-50);
+      --color-foreground-secondary: var(--color-gray-300);
+      --color-foreground-tertiary: var(--color-gray-800);
+      --color-foreground-quaternary: var(--color-gray-900);
+      --color-runtime-background: 124deg, 100%, 3%;
+      --color-runtime-foreground: 184deg, 100%, 90%;
+      --color-note: 224deg, 64.3%, 82.9%;
+      --color-info: 224deg, 64.3%, 69%;
+      --color-caution: 45.4deg, 93.39%, 67.11%;
+      --color-primary: var(--color-runtime);
+      --color-header-highlight: var(--color-runtime);
+
+      color: var(--color-foreground-primary);
+      background-color: var(--color-background-primary);
+    }
+  }
+
   @font-face {
     font-family: "Inter";
     font-style: normal;
