diff --git a/assets/main.css b/assets/main.css
index 62c4614..d3c7259 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -2,47 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-html {
-  font-family: theme("fontFamily.main");
-  font-size: theme("fontSize.2xl");
-}
-
-body {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-/* Color scheme */
-
-.color-scheme--sync .color-scheme--light-icon {
-  display: none;
-}
-
-.color-scheme--sync .color-scheme--dark-icon {
-  display: block;
-}
-
-@media (prefers-color-scheme: dark) {
-  .color-scheme--sync .color-scheme--light-icon {
-    display: block;
-  }
-
-  .color-scheme--sync .color-scheme--dark-icon {
-    display: none;
-  }
-}
-
-.color-scheme--dark .color-scheme--dark-icon,
-.color-scheme--light .color-scheme--light-icon {
-  display: none;
-}
-
-.color-scheme--dark .color-scheme--light-icon,
-.color-scheme--light .color-scheme--dark-icon {
-  display: block;
-}
-
 /* Typography */
 
 .prose :is(p, h1, h2, h3, h4, h5, h6, ul, ol, li, pre) {
@@ -55,25 +14,10 @@ body {
 
 .link,
 .prose a {
-  @apply text-red-900 border-b-4 border-red-500/25;
+  @apply text-red-900 hover:text-red-600 dark:text-red-200 dark:hover:text-red-400 border-b-4 border-red-500/25 dark:border-red-200/25;
   transition: color 200ms;
 }
 
-.link:hover,
-.prose a:hover {
-  @apply text-red-600;
-}
-
-.dark .link,
-.dark .prose a {
-  @apply text-red-200 border-red-200/25;
-}
-
-.dark .link:hover,
-.dark .prose a:hover {
-  color: theme("colors.red.400");
-}
-
 :is(.list, .prose ul) li {
   position: relative;
   margin-left: 1.5em;
@@ -89,8 +33,7 @@ body {
 
 .subheading,
 .prose h3 {
-  @apply text-sm font-bold;
-  color: theme("colors.red.800");
+  @apply text-sm font-bold text-red-800 dark:text-red-300;
 }
 
 :is(.subheading, .prose h3)::before {
@@ -107,7 +50,7 @@ body {
 
 .code-block,
 pre {
-  @apply bg-gray-100;
+  @apply bg-gray-100 dark:bg-gray-800;
   border-radius: 0.25em;
   overflow-x: auto;
   padding: 1em;
@@ -116,7 +59,7 @@ pre {
 
 .code-inline,
 code {
-  @apply bg-gray-100;
+  @apply bg-gray-100 dark:bg-gray-800;
   padding: 0.125em 0.25em;
   border-radius: 0.25em;
   font-size: 0.875em;
@@ -148,6 +91,16 @@ code {
   border-radius: 100px;
 }
 
-.button:hover {
-  background-color: theme("colors.gray.200");
+.button--opaque {
+  @apply bg-white dark:bg-gray-900;
+}
+
+.button:hover {
+  background-color: theme(colors.gray.400 / 25%);
+}
+
+/* Utils */
+
+html:not(.dark) .light\:hidden {
+  display: none;
 }
diff --git a/assets/main.js b/assets/main.js
index c900c6b..16dd75d 100644
--- a/assets/main.js
+++ b/assets/main.js
@@ -1,15 +1,13 @@
 import Alpine from "alpinejs";
-import persist from "@alpinejs/persist";
 
 window.Alpine = Alpine;
 
-Alpine.plugin(persist);
 Alpine.start();
 
 /* Copy button component */
 
-const copyIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M7 4V2h10v2h3.007c.548 0 .993.445.993.993v16.014a.994.994 0 0 1-.993.993H3.993A.994.994 0 0 1 3 21.007V4.993C3 4.445 3.445 4 3.993 4H7zm0 2H5v14h14V6h-2v2H7V6zm2-2v2h6V4H9z"/></svg>`;
-const checkIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"/></svg>`;
+const copyIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M7 4V2h10v2h3.007c.548 0 .993.445.993.993v16.014a.994.994 0 0 1-.993.993H3.993A.994.994 0 0 1 3 21.007V4.993C3 4.445 3.445 4 3.993 4H7zm0 2H5v14h14V6h-2v2H7V6zm2-2v2h6V4H9z"/></svg>`;
+const checkIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"/></svg>`;
 const defaultButtonLabel = `Zkopírovat text do schránky`;
 const copiedButtonLabel = `Text zkopírován`;
 const revertTimeout = 5_000;
@@ -32,7 +30,7 @@ navigator.permissions
       .forEach((codeBlock) => {
         const button = document.createElement("button");
         button.innerHTML = defaultButtonContent;
-        button.className = "button absolute top-3 right-3 bg-white";
+        button.className = "button button--opaque absolute top-3 right-3";
 
         button.addEventListener("click", () => {
           navigator.clipboard.writeText(codeBlock.innerHTML).then(() => {
diff --git a/assets/style.css b/assets/style.css
index 14d93d0..b96eea7 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -16,7 +16,7 @@
   /* 2 */
   border-style: solid;
   /* 2 */
-  border-color: #e5e7eb;
+  border-color: #e4e4e7;
   /* 2 */
 }
 
@@ -351,7 +351,7 @@ textarea {
 input::-moz-placeholder, textarea::-moz-placeholder {
   opacity: 1;
   /* 1 */
-  color: #9ca3af;
+  color: #a1a1aa;
   /* 2 */
 }
 
@@ -359,7 +359,7 @@ input::placeholder,
 textarea::placeholder {
   opacity: 1;
   /* 1 */
-  color: #9ca3af;
+  color: #a1a1aa;
   /* 2 */
 }
 
@@ -704,6 +704,10 @@ video {
   display: none;
 }
 
+.min-h-screen {
+  min-height: 100vh;
+}
+
 .max-w-screen-md {
   max-width: 768px;
 }
@@ -782,14 +786,29 @@ video {
   background-color: rgb(185 28 28 / var(--tw-bg-opacity));
 }
 
-.bg-gray-100 {
+.bg-gray-50 {
   --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+  background-color: rgb(250 250 250 / var(--tw-bg-opacity));
 }
 
-.bg-white {
+.bg-gray-100 {
   --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  background-color: rgb(244 244 245 / var(--tw-bg-opacity));
+}
+
+.bg-red-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(153 27 27 / var(--tw-bg-opacity));
+}
+
+.bg-red-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(127 29 29 / var(--tw-bg-opacity));
+}
+
+.bg-gray-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(39 39 42 / var(--tw-bg-opacity));
 }
 
 .px-6 {
@@ -812,6 +831,10 @@ video {
   padding-bottom: 1.5rem;
 }
 
+.pt-6 {
+  padding-top: 1.5rem;
+}
+
 .pt-4 {
   padding-top: 1rem;
 }
@@ -824,6 +847,15 @@ video {
   padding-bottom: 3rem;
 }
 
+.font-main {
+  font-family: Spline Sans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -847,14 +879,22 @@ video {
   font-weight: 500;
 }
 
+.leading-normal {
+  line-height: 1.5;
+}
+
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.text-gray-500 {
+.text-gray-900 {
   --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity));
+  color: rgb(24 24 27 / var(--tw-text-opacity));
+}
+
+.text-gray-900\/50 {
+  color: rgb(24 24 27 / 0.5);
 }
 
 .transition-transform {
@@ -863,47 +903,6 @@ video {
   transition-duration: 150ms;
 }
 
-html {
-  font-family: Spline Sans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  font-size: 1.5rem;
-}
-
-body {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-/* Color scheme */
-
-.color-scheme--sync .color-scheme--light-icon {
-  display: none;
-}
-
-.color-scheme--sync .color-scheme--dark-icon {
-  display: block;
-}
-
-@media (prefers-color-scheme: dark) {
-  .color-scheme--sync .color-scheme--light-icon {
-    display: block;
-  }
-
-  .color-scheme--sync .color-scheme--dark-icon {
-    display: none;
-  }
-}
-
-.color-scheme--dark .color-scheme--dark-icon,
-.color-scheme--light .color-scheme--light-icon {
-  display: none;
-}
-
-.color-scheme--dark .color-scheme--light-icon,
-.color-scheme--light .color-scheme--dark-icon {
-  display: block;
-}
-
 /* Typography */
 
 .prose :is(p, h1, h2, h3, h4, h5, h6, ul, ol, li, pre) {
@@ -920,7 +919,6 @@ body {
   border-color: rgb(239 68 68 / 0.25);
   --tw-text-opacity: 1;
   color: rgb(127 29 29 / var(--tw-text-opacity));
-  transition: color 200ms;
 }
 
 .link:hover,
@@ -929,16 +927,22 @@ body {
   color: rgb(220 38 38 / var(--tw-text-opacity));
 }
 
-.dark .link,
-.dark .prose a {
+.dark .link,.dark 
+.prose a {
   border-color: rgb(254 202 202 / 0.25);
   --tw-text-opacity: 1;
   color: rgb(254 202 202 / var(--tw-text-opacity));
 }
 
-.dark .link:hover,
-.dark .prose a:hover {
-  color: #f87171;
+.dark .link:hover,.dark 
+.prose a:hover {
+  --tw-text-opacity: 1;
+  color: rgb(248 113 113 / var(--tw-text-opacity));
+}
+
+.link,
+.prose a {
+  transition: color 200ms;
 }
 
 :is(.list, .prose ul) li {
@@ -959,7 +963,14 @@ body {
   font-size: 0.875rem;
   line-height: 1.25rem;
   font-weight: 700;
-  color: #991b1b;
+  --tw-text-opacity: 1;
+  color: rgb(153 27 27 / var(--tw-text-opacity));
+}
+
+.dark .subheading,.dark 
+.prose h3 {
+  --tw-text-opacity: 1;
+  color: rgb(252 165 165 / var(--tw-text-opacity));
 }
 
 :is(.subheading, .prose h3)::before {
@@ -978,7 +989,17 @@ body {
 .code-block,
 pre {
   --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+  background-color: rgb(244 244 245 / var(--tw-bg-opacity));
+}
+
+.dark .code-block,.dark 
+pre {
+  --tw-bg-opacity: 1;
+  background-color: rgb(39 39 42 / var(--tw-bg-opacity));
+}
+
+.code-block,
+pre {
   border-radius: 0.25em;
   overflow-x: auto;
   padding: 1em;
@@ -988,7 +1009,17 @@ pre {
 .code-inline,
 code {
   --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+  background-color: rgb(244 244 245 / var(--tw-bg-opacity));
+}
+
+.dark .code-inline,.dark 
+code {
+  --tw-bg-opacity: 1;
+  background-color: rgb(39 39 42 / var(--tw-bg-opacity));
+}
+
+.code-inline,
+code {
   padding: 0.125em 0.25em;
   border-radius: 0.25em;
   font-size: 0.875em;
@@ -1008,7 +1039,7 @@ code {
   }
 }
 
-@media (min-width: 1280px) {
+@media (min-width: 1024px) {
   .clip-wedge {
     --wedge-skew: 5vw;
   }
@@ -1021,8 +1052,52 @@ code {
   border-radius: 100px;
 }
 
+.button--opaque {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
+.dark .button--opaque {
+  --tw-bg-opacity: 1;
+  background-color: rgb(24 24 27 / var(--tw-bg-opacity));
+}
+
 .button:hover {
-  background-color: #e5e7eb;
+  background-color: rgb(161 161 170 / 25%);
+}
+
+/* Utils */
+
+html:not(.dark) .light\:hidden {
+  display: none;
+}
+
+.dark .dark\:hidden {
+  display: none;
+}
+
+.dark .dark\:border-gray-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(39 39 42 / var(--tw-border-opacity));
+}
+
+.dark .dark\:bg-gray-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(24 24 27 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-gray-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(39 39 42 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:text-gray-50 {
+  --tw-text-opacity: 1;
+  color: rgb(250 250 250 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-gray-50\/50 {
+  color: rgb(250 250 250 / 0.5);
 }
 
 @media not all and (min-width: 1024px) {
@@ -1109,4 +1184,8 @@ code {
   .lg\:pb-2 {
     padding-bottom: 0.5rem;
   }
+
+  .dark .dark\:lg\:bg-transparent {
+    background-color: transparent;
+  }
 }
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index cb1b474..809a7da 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="nojs" lang="{{ site.LanguageCode | default site.Language.Lang }}" dir="{{ site.Language.LanguageDirection | default "ltr" }}">
+<html class="font-main leading-normal text-2xl" lang="{{ site.LanguageCode | default site.Language.Lang }}" dir="{{ site.Language.LanguageDirection | default "ltr" }}">
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width" />
@@ -13,9 +13,9 @@
 </head>
 
 <body
-  class="overflow-x-hidden"
-  x-data="{ colorScheme: $persist('sync'), menuOpen: false }"
-  x-bind:class="`color-scheme--${colorScheme} ${menuOpen ? 'overflow-hidden' : ''}`"
+  class="overflow-x-hidden min-h-screen flex flex-col bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-50"
+  x-data="{ menuOpen: false }"
+  x-bind:class="`${menuOpen ? 'overflow-hidden' : ''}`"
 >
   <header class="py-4">
     <div class="container mx-auto px-6 flex items-center lg:mb-4 gap-6">
@@ -28,7 +28,7 @@
         <button class="button lg:hidden" x-on:click="menuOpen = true">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32">
             <path fill="none" d="M0 0h24v24H0z"/>
-            <path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"/>
+            <path fill="currentColor" d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"/>
           </svg>
         </button>
       </div>
@@ -38,7 +38,7 @@
 
   {{ block "main" . }}{{ end }}
 
-  <footer class="mt-6 text-gray-500 mt-auto">
+  <footer class="pt-6 text-gray-900/50 dark:text-gray-50/50 mt-auto">
     <div class="container mx-auto px-6 py-6">
       {{ if $.Param "feedlinks" }}
         {{ partial "feedlinks.html" . }}
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index f464282..12b2a98 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,5 +1,5 @@
 {{ define "main" -}}
-  <main class="border-t pt-4">
+  <main class="border-t dark:border-gray-800 pt-4">
     <header class="container mx-auto px-6 mb-6">
       <h1 class="font-bold">{{ .Title }}</h1>
     </header>
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index d85e096..19cdfb3 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,6 +1,6 @@
 {{ define "main" -}}
 <main>
-  <article class="border-t pt-4">
+  <article class="border-t dark:border-gray-800 pt-4">
     <header class="container mx-auto px-6 mb-6">
       <h1 class="font-bold {{ if $.Param "submitted" | default false }}title-submitted{{ end }}">{{ .Title }}</h1>
       {{ if $.Param "submitted" | default false }}{{ partial "submitted.html" . }}{{ end -}}
diff --git a/layouts/index.html b/layouts/index.html
index 7210295..59383cd 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -11,7 +11,7 @@
     </div>
   </section>
 
-  <section class="py-24 clip-wedge bg-red-700 text-white dark">
+  <section class="py-24 clip-wedge bg-red-800 text-white dark">
     <div class="container mx-auto px-6">
       {{ partial "services.html" }}
     </div>
diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html
index 783fd70..6161cd2 100644
--- a/layouts/partials/menu.html
+++ b/layouts/partials/menu.html
@@ -1,9 +1,9 @@
 <nav
-  class="bg-gray-100 lg:bg-transparent fixed lg:static inset-0 z-10 overflow-y-auto transition-transform lg:container lg:mx-auto px-6 pt-12 pb-12 lg:pt-0 lg:pb-2"
+  class="bg-gray-100 dark:bg-gray-800 lg:bg-transparent dark:lg:bg-transparent fixed lg:static inset-0 z-10 overflow-y-auto transition-transform lg:container lg:mx-auto px-6 pt-12 pb-12 lg:pt-0 lg:pb-2"
   x-bind:class="menuOpen ? 'translate-x-0' : 'translate-x-full lg:translate-x-0'">
   <h2 class="sr-only">{{ i18n "menu_title" }}</h2>
   <button class="button block mb-6 lg:hidden absolute top-4 right-6" x-on:click="menuOpen = false">
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
   </button>
   <ul class="flex gap-x-6 gap-y-4 flex-col lg:flex-row">
   {{ range site.Menus.main }}
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
index 4f47824..2c0b253 100644
--- a/layouts/partials/scripts.html
+++ b/layouts/partials/scripts.html
@@ -1,2 +1,12 @@
+<script>
+  const themeChoice = localStorage.getItem("theme")
+  document.documentElement.classList.toggle(
+    "dark",
+    themeChoice !== null
+      ? themeChoice === "dark"
+      : window.matchMedia("(prefers-color-scheme: dark)").matches
+  );
+</script>
+
 {{- $js := resources.Get "main.js" | js.Build | fingerprint -}}
-<script src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}" defer></script>
+<script src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}" defer ></script>
diff --git a/layouts/partials/styles.html b/layouts/partials/styles.html
index cd513ea..aad18cb 100644
--- a/layouts/partials/styles.html
+++ b/layouts/partials/styles.html
@@ -1,6 +1,6 @@
 <link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link href="https://fonts.googleapis.com/css2?family=Spline+Sans:ital,wght@0,400;0,500;0,700;1,400;1,700&display=swap" rel="stylesheet" />
+<link href="https://fonts.googleapis.com/css2?family=Spline+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
 <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet" />
 
 {{ $style := resources.Get "style.css" }}
diff --git a/layouts/partials/theme-selector.html b/layouts/partials/theme-selector.html
index d0ad552..3b608d1 100644
--- a/layouts/partials/theme-selector.html
+++ b/layouts/partials/theme-selector.html
@@ -1,27 +1,22 @@
 <h2 class="sr-only">{{ i18n "theme_select_title" }}</h2>
 <button x-on:click="toggleColorScheme" class="button">
-  <svg class="color-scheme--icon color-scheme--light-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32">
+  <svg class="dark:hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32">
     <g>
       <path fill="none" d="M0 0h24v24H0z"/>
-      <path fill-rule="nonzero" d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/>
+      <path fill="currentColor" fill-rule="nonzero" d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/>
     </g>
   </svg>
-  <svg class="color-scheme--icon color-scheme--dark-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32">
+  <svg class="light:hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32">
     <g>
       <path fill="none" d="M0 0h24v24H0z"/>
-      <path fill-rule="nonzero" d="M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2h.1A6.979 6.979 0 0 0 10 7zm-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938 7.999 7.999 0 0 0 4 12z"/>
+      <path fill="currentColor" fill-rule="nonzero" d="M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2h.1A6.979 6.979 0 0 0 10 7zm-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938 7.999 7.999 0 0 0 4 12z"/>
     </g>
   </svg>
 </button>
 
 <script>
   function toggleColorScheme() {
-    const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
-
-    if (this.colorScheme === 'sync') {
-      this.colorScheme = prefersDarkMode ? 'light' : 'dark'
-    } else {
-      this.colorScheme = this.colorScheme === 'dark' ? 'light' : 'dark'
-    }
+    document.documentElement.classList.toggle("dark")
+    localStorage.setItem("theme", document.documentElement.classList.contains("dark") ? "dark" : "light")
   }
 </script>
diff --git a/tailwind.config.js b/tailwind.config.js
index 0ff0656..dca3a6d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,8 +1,9 @@
-const colors = require("tailwindcss/");
+const colors = require("tailwindcss/colors");
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ["content/**/*.md", "layouts/**/*.html", "assets/**/*.js"],
+  darkMode: "class",
   theme: {
     fontFamily: {
       main: [
@@ -28,7 +29,9 @@ module.exports = {
       semibold: 500,
     },
     extend: {
-      //
+      colors: {
+        gray: colors.zinc,
+      },
     },
   },
   plugins: [],