Add dark mode to site

lukewarlow · lukewarlow · commit 1235e64e854e · 2025-02-20T19:43:48.000Z
diff --git a/site/public/styles/global.css b/site/public/styles/global.css
@@ -2,6 +2,7 @@
   --font-size-base: 16px;
   --color-text: hsl(12, 5%, 4%);
   --color-border: hsl(17, 24%, 90%);
+  color-scheme: light dark;
 }
 
 html {
@@ -13,7 +14,7 @@ html {
 }
 
 body {
-  color: hsla(0, 0%, 0%, 0.8);
+  color: light-dark(hsla(0, 0%, 0%, 0.8), white);
   font-family: 'Source Sans Pro', 'Helvetica Neue', 'Segoe UI', 'Helvetica', 'Arial', sans-serif;
   font-weight: 400;
   word-wrap: break-word;
@@ -254,7 +255,7 @@ td:last-child {
   padding-right: 0;
 }
 a {
-  color: #007a3d;
+  color: light-dark(#007a3d, #00cd70);
 }
 
 nav {
diff --git a/site/src/components/navigation/navigation-item.astro b/site/src/components/navigation/navigation-item.astro
@@ -42,7 +42,7 @@ const relVal = shouldPrefetch ? 'prefetch' : ''
 
   a[aria-current='page'] {
     border-left-color: #00a453;
-    background-color: #f2f2f2;
+    background-color: light-dark(#f2f2f2, #2d2c2c);
   }
 
 </style>

Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,7 @@`
`2`	`2`	`--font-size-base: 16px;`
`3`	`3`	`--color-text: hsl(12, 5%, 4%);`
`4`	`4`	`--color-border: hsl(17, 24%, 90%);`
	`5`	`+ color-scheme: light dark;`
`5`	`6`	`}`
`6`	`7`
`7`	`8`	`html {`
`@@ -13,7 +14,7 @@ html {`
`13`	`14`	`}`
`14`	`15`
`15`	`16`	`body {`
`16`		`- color: hsla(0, 0%, 0%, 0.8);`
	`17`	`+ color: light-dark(hsla(0, 0%, 0%, 0.8), white);`
`17`	`18`	`font-family: 'Source Sans Pro', 'Helvetica Neue', 'Segoe UI', 'Helvetica', 'Arial', sans-serif;`
`18`	`19`	`font-weight: 400;`
`19`	`20`	`word-wrap: break-word;`
`@@ -254,7 +255,7 @@ td:last-child {`
`254`	`255`	`padding-right: 0;`
`255`	`256`	`}`
`256`	`257`	`a {`
`257`		`- color: #007a3d;`
	`258`	`+ color: light-dark(#007a3d, #00cd70);`
`258`	`259`	`}`
`259`	`260`
`260`	`261`	`nav {`
Original file line number	Diff line number	Diff line change
`@@ -42,7 +42,7 @@ const relVal = shouldPrefetch ? 'prefetch' : ''`
`42`	`42`
`43`	`43`	`a[aria-current='page'] {`
`44`	`44`	`border-left-color: #00a453;`
`45`		`- background-color: #f2f2f2;`
	`45`	`+ background-color: light-dark(#f2f2f2, #2d2c2c);`
`46`	`46`	`}`
`47`	`47`
`48`	`48`	`</style>`