dark mode

src/app.css

@@ -15,9 +15,19 @@
   --clr-primary: hsl(219, 90%, 80%);
   --clr-secondary: hsl(64, 93%, 51%);
   --clr-error: hsl(0, 73.9%, 65.5%);
+  --clr-transparent-0: hsla(0, 0%, 0%, 0.1);
   --animation: all 250ms ease;
 }
 
+@media (prefers-color-scheme: dark) {
+  :root {
+    --clr-light: #010101;
+    --clr-dark: #ffffff;
+    --clr-primary: hsl(219, 90%, 30%);
+    --clr-transparent-0: hsla(0, 0%, 100%, 0.1);
+  }
+}
+
 body {
   margin: 0;
   overflow: hidden;

src/lib/components/WPAdapter.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import 'highlight.js/styles/github.css'
   import hljs from 'highlight.js/lib/core'
   import javascript from 'highlight.js/lib/languages/javascript'
   import python from 'highlight.js/lib/languages/python'
@@ -32,9 +31,10 @@
       .replace(' ', '-')
   }
 
-  onMount(() => {
+  onMount(async () => {
     hljs.highlightAll()
 
+    // Add anchor links to headers
     const selector = [1, 2, 3, 4, 5, 6].map((i) => `div.adapter h${i}`).join(', ')
     const elements = window.document.querySelectorAll(selector)
     elements.forEach((el) => {
@@ -43,6 +43,14 @@
         el.innerHTML = `<a class="target-link" name="${hash}" href="${window.location.pathname}#${hash}">${el.innerHTML}</a>`
       }
     })
+
+    async function update(isDark: boolean) {
+      isDark ? await import('highlight.js/styles/github-dark.css') : await import('highlight.js/styles/github.css')
+    }
+
+    const match = window.matchMedia('(prefers-color-scheme: dark)')
+    match.addEventListener('change', (e) => update(e.matches))
+    update(match.matches)
   })
 </script>
 
@@ -89,12 +97,12 @@
 
   div :global(pre) {
     padding: 1em;
-    background: #0000000d;
+    background: var(--clr-transparent-0);
     overflow: auto;
   }
 
   div :global(code) {
-    background: #00000012;
+    background: var(--clr-transparent-0);
     padding: 0.25em;
     font-size: 0.8em;
   }