diff --git a/_includes/fixed.html b/_includes/fixed.html
index f62ebb4..8ad8b52 100644
--- a/_includes/fixed.html
+++ b/_includes/fixed.html
@@ -1,4 +1,14 @@
 <a href="/">
   <img id="logo" src="/assets/images/radicle.svg" width="32" height="32" />
 </a>
-<button class="toggle" id="toggle-theme"><!-- Set by script --></button>
+
+<fieldset id="theme" aria-label="Theme">
+  <label for="light" id="light-label">
+    <input type="radio" id="light" name="theme" value="light" onchange="toggleTheme('light')">
+    <img src="/assets/images/moon.svg" width="32" height="32" />
+  </label>
+  <label for="dark" id="dark-label">
+    <input type="radio" id="dark" name="theme" value="dark" onchange="toggleTheme('dark')">
+    <img src="/assets/images/sun.svg" width="32" height="32" />
+  </label>
+</fieldset>
\ No newline at end of file
diff --git a/_layouts/blog.html b/_layouts/blog.html
index 807b7d8..3d0b793 100644
--- a/_layouts/blog.html
+++ b/_layouts/blog.html
@@ -15,7 +15,6 @@
       </div>
       <nav>
       </nav>
-      <button class="toggle" id="toggle-theme"><!-- Set by script --></button>
     </header>
     <main>
       <h1>{{ page.title }}</h1>
diff --git a/_layouts/guide.html b/_layouts/guide.html
index c740968..f727705 100644
--- a/_layouts/guide.html
+++ b/_layouts/guide.html
@@ -14,7 +14,6 @@
       </div>
       <nav>
       </nav>
-      <button class="toggle" id="toggle-theme"><!-- Set by script --></button>
     </header>
     <main>
       <h1>{{ page.title }}</h1>
diff --git a/assets/css/common.css b/assets/css/common.css
index f5b9d7d..f71eff5 100644
--- a/assets/css/common.css
+++ b/assets/css/common.css
@@ -1,46 +1,24 @@
 :root {
-  --color-pink: #ff55ff;
+  --color-pink: light-dark(#ff55ff, #f999f9);
   --color-yellow: #ffff99;
-  --color-secondary: #6666ff;
+  --color-secondary: light-dark(#6666ff, #9999ff);
   --color-fg-highlight: var(--color-yellow);
-  --color-fg-highlight-tertiary: #1f3f8a;
-  --color-fg-highlight-secondary: #229944;
-  --color-bg-highlight: #efefff;
-  --color-bg-default: #f5f5ff;
-  --color-fg-contrast: #232563;
-  --color-fg-low-contrast: #434583; /* TODO: tweak this */
-  --color-fg-dim: #5a5a7a;
-  --color-fg-emphasized: #7070FF;
-  --color-fg-match-background: #f5f5ff;
-  --color-fill-secondary: #7070FF;
-  --color-fill-separator: #dbdbff;
-  --color-fill-ghost: #EBEBFF;
-  --color-border-hint: #DBDBFF;
-  --color-border-focus: #8585FF;
-  --color-border-default: var(--color-fg-dim);
-  --color-selection: var(--color-fg-contrast);
-}
-
-:root[data-theme="dark"] {
-  --color-pink: #f999f9;
-  --color-yellow: #ffff99;
-  --color-secondary: #9999ff;
-  --color-fg-highlight: var(--color-yellow);
-  --color-fg-highlight-tertiary: #bbeeff;
-  --color-fg-highlight-secondary: #77dd77;
-  --color-bg-highlight: #14151a;
-  --color-bg-default: #0a0d10;
-  --color-fg-contrast: #f9f9fb;
-  --color-fg-low-contrast: #d9d9db; /* TODO: tweak this */
-  --color-fg-dim: #9b9bb1;
+  --color-fg-highlight-tertiary: light-dark(#1f3f8a,#bbeeff);
+  --color-fg-highlight-secondary: light-dark(#229944,#77dd77);
+  --color-bg-highlight: light-dark(#efefff,#14151a);
+  --color-bg-default: light-dark(#f5f5ff,#0a0d10);
+  --color-fg-contrast: light-dark(#232563,#f9f9fb);
+  --color-fg-low-contrast: light-dark(#434583,#d9d9db); /* TODO: tweak this */
+  --color-fg-dim: light-dark(#5a5a7a,#9b9bb1);
   --color-fg-emphasized: #7070ff;
-  --color-fg-match-background: #0a0d10;
+  --color-fg-match-background: light-dark(#f5f5ff,#0a0d10);
   --color-fill-secondary: #7070ff;
-  --color-fill-separator: #24252d;
-  --color-fill-ghost: #24252d;
-  --color-border-hint: #24252d;
+  --color-fill-separator: light-dark(#dbdbff,#24252d);
+  --color-fill-ghost: light-dark(#EBEBFF,#24252d);
+  --color-border-hint: light-dark(#DBDBFF,#24252d);
   --color-border-focus: #8585ff;
-  --color-selection: var(--color-bg-default);
+  --color-border-default: var(--color-fg-dim);
+  --color-selection: light-dark(var(--color-fg-contrast),var(--color-bg-default));
 }
 
 ::selection {
@@ -83,9 +61,63 @@ body, html {
   margin-top: 0.25rem;
   margin-bottom: 0.25rem;
 }
-:root[data-theme=light] #toggle-theme {
-  background-image: url(/assets/images/sun.svg);
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: dark;
+  }
+  #dark-label {
+    display: none;
+  }
 }
-:root[data-theme=dark] #toggle-theme {
-  background-image: url(/assets/images/moon.svg);
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color-scheme: light;
+  }
+  #light-label {
+    display: none;
+  }
 }
+
+:root:has(#light:checked) {
+  color-scheme: light;
+}
+
+:root:has(#dark:checked) {
+  color-scheme: dark;
+}
+
+:root:has(#dark:checked) #light-label,
+:root:has(#light:checked) #dark-label {
+  display: block;
+  margin-left: auto;
+}
+
+:root:has(#dark:checked) #dark-label,
+:root:has(#light:checked) #light-label {
+  display: none;
+}
+
+#theme {
+  gap: 0;
+  margin: 0;
+  padding: 0;
+  border: 1px solid var(--color-fg-default);
+  text-align: right;
+}
+
+#theme label:first-child {
+  margin-left: auto;
+}
+
+#theme label {
+  width: auto;
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
+#theme input {
+  display: none;
+}
\ No newline at end of file
diff --git a/assets/css/monokai.css b/assets/css/monokai.css
index 3ef6ef5..cb9ef3d 100644
--- a/assets/css/monokai.css
+++ b/assets/css/monokai.css
@@ -1,156 +1,65 @@
-:root[data-theme="dark"] .highlight .nl { color: var(--color-yellow) }
-:root[data-theme="dark"] .highlight .s2 { color: var(--color-fg-highlight-secondary) }
-
-.highlight .nl { color: var(--color-fg-contrast) }
-.highlight .s2 { color: var(--color-fg-highlight-secondary) }
-
 /* .highlight pre { background-color: #272822; } */
 .highlight .hll { background-color: #272822; }
-.highlight .c { color: #75715e } /* Comment */
-.highlight .err { color: #960050; background-color: #1e0010 } /* Error */
-.highlight .k { color: #66d9ef } /* Keyword */
-.highlight .l { color: #ae81ff } /* Literal */
-.highlight .n { color: #f8f8f2 } /* Name */
-.highlight .o { color: #f92672 } /* Operator */
-.highlight .p { color: #f8f8f2 } /* Punctuation */
-.highlight .cm { color: #75715e } /* Comment.Multiline */
-.highlight .cp { color: #75715e } /* Comment.Preproc */
-.highlight .c1 { color: #75715e } /* Comment.Single */
-.highlight .cs { color: #75715e } /* Comment.Special */
+.highlight .c { color: light-dark(#6a737d, #75715e) } /* Comment */
+.highlight .err { color: light-dark(#cb2431, #960050); background-color: light-dark(#ffeaea, #1e0010) } /* Error */
+.highlight .k { color: light-dark(#d73a49, #66d9ef) } /* Keyword */
+.highlight .l { color: light-dark(#005cc5, #ae81ff) } /* Literal */
+.highlight .n { color: light-dark(#24292e, #f8f8f2) } /* Name */
+.highlight .o { color: light-dark(#d73a49, #f92672) } /* Operator */
+.highlight .p { color: light-dark(#24292e, #f8f8f2) } /* Punctuation */
+.highlight .cm { color: light-dark(#6a737d, #75715e) } /* Comment.Multiline */
+.highlight .cp { color: light-dark(#d73a49, #75715e) } /* Comment.Preproc */
+.highlight .c1 { color: light-dark(#6a737d, #75715e) } /* Comment.Single */
+.highlight .cs { color: light-dark(#6a737d, #75715e); font-weight: light-dark(bold, inherit) } /* Comment.Special */
 .highlight .ge { font-style: italic } /* Generic.Emph */
 .highlight .gs { font-weight: bold } /* Generic.Strong */
-.highlight .kc { color: #66d9ef } /* Keyword.Constant */
-.highlight .kd { color: #66d9ef } /* Keyword.Declaration */
-.highlight .kn { color: #f92672 } /* Keyword.Namespace */
-.highlight .kp { color: #66d9ef } /* Keyword.Pseudo */
-.highlight .kr { color: #66d9ef } /* Keyword.Reserved */
-.highlight .kt { color: #66d9ef } /* Keyword.Type */
-.highlight .ld { color: #e6db74 } /* Literal.Date */
-.highlight .m { color: #ae81ff } /* Literal.Number */
-.highlight .s { color: #e6db74 } /* Literal.String */
-.highlight .na { color: #a6e22e } /* Name.Attribute */
-.highlight .nb { color: #f8f8f2 } /* Name.Builtin */
-.highlight .nc { color: #a6e22e } /* Name.Class */
-.highlight .no { color: #66d9ef } /* Name.Constant */
-.highlight .nd { color: #a6e22e } /* Name.Decorator */
-.highlight .ni { color: #f8f8f2 } /* Name.Entity */
-.highlight .ne { color: #a6e22e } /* Name.Exception */
-.highlight .nf { color: #a6e22e } /* Name.Function */
-.highlight .nl { color: #f8f8f2 } /* Name.Label */
-.highlight .nn { color: #f8f8f2 } /* Name.Namespace */
-.highlight .nx { color: #a6e22e } /* Name.Other */
-.highlight .py { color: #f8f8f2 } /* Name.Property */
-.highlight .nt { color: #f92672 } /* Name.Tag */
-.highlight .nv { color: #f8f8f2 } /* Name.Variable */
-.highlight .ow { color: #f92672 } /* Operator.Word */
-.highlight .w { color: #f8f8f2 } /* Text.Whitespace */
-.highlight .mf { color: #ae81ff } /* Literal.Number.Float */
-.highlight .mh { color: #ae81ff } /* Literal.Number.Hex */
-.highlight .mi { color: #ae81ff } /* Literal.Number.Integer */
-.highlight .mo { color: #ae81ff } /* Literal.Number.Oct */
-.highlight .sb { color: #e6db74 } /* Literal.String.Backtick */
-.highlight .sc { color: #e6db74 } /* Literal.String.Char */
-.highlight .sd { color: #e6db74 } /* Literal.String.Doc */
-.highlight .s2 { color: #e6db74 } /* Literal.String.Double */
-.highlight .se { color: #ae81ff } /* Literal.String.Escape */
-.highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */
-.highlight .si { color: #e6db74 } /* Literal.String.Interpol */
-.highlight .sx { color: #e6db74 } /* Literal.String.Other */
-.highlight .sr { color: #e6db74 } /* Literal.String.Regex */
-.highlight .s1 { color: #e6db74 } /* Literal.String.Single */
-.highlight .ss { color: #e6db74 } /* Literal.String.Symbol */
-.highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
-.highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */
-.highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */
-.highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */
-.highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */
+.highlight .kc { color: light-dark(#005cc5, #66d9ef) } /* Keyword.Constant */
+.highlight .kd { color: light-dark(#d73a49, #66d9ef) } /* Keyword.Declaration */
+.highlight .kn { color: light-dark(#d73a49, #f92672) } /* Keyword.Namespace */
+.highlight .kp { color: light-dark(#005cc5, #66d9ef) } /* Keyword.Pseudo */
+.highlight .kr { color: light-dark(#d73a49, #66d9ef) } /* Keyword.Reserved */
+.highlight .kt { color: light-dark(#d73a49, #66d9ef) } /* Keyword.Type */
+.highlight .ld { color: light-dark(#032f62, #e6db74) } /* Literal.Date */
+.highlight .m { color: light-dark(#005cc5, #ae81ff) } /* Literal.Number */
+.highlight .s { color: light-dark(#032f62, #e6db74) } /* Literal.String */
+.highlight .na { color: light-dark(#e36209, #a6e22e) } /* Name.Attribute */
+.highlight .nb { color: light-dark(#005cc5, #f8f8f2) } /* Name.Builtin */
+.highlight .nc { color: light-dark(#6f42c1, #a6e22e) } /* Name.Class */
+.highlight .no { color: light-dark(#005cc5, #66d9ef) } /* Name.Constant */
+.highlight .nd { color: light-dark(#6f42c1, #a6e22e) } /* Name.Decorator */
+.highlight .ni { color: light-dark(#24292e, #f8f8f2) } /* Name.Entity */
+.highlight .ne { color: light-dark(#6f42c1, #a6e22e) } /* Name.Exception */
+.highlight .nf { color: light-dark(#6f42c1, #a6e22e) } /* Name.Function */
+.highlight .nl { color: light-dark(#24292e, #f8f8f2) } /* Name.Label */
+.highlight .nn { color: light-dark(#24292e, #f8f8f2) } /* Name.Namespace */
+.highlight .nx { color: light-dark(#6f42c1, #a6e22e) } /* Name.Other */
+.highlight .py { color: light-dark(#24292e, #f8f8f2) } /* Name.Property */
+.highlight .nt { color: light-dark(#22863a, #f92672) } /* Name.Tag */
+.highlight .nv { color: light-dark(#e36209, #f8f8f2) } /* Name.Variable */
+.highlight .ow { color: light-dark(#d73a49, #f92672) } /* Operator.Word */
+.highlight .w { color: light-dark(#24292e, #f8f8f2) } /* Text.Whitespace */
+.highlight .mf { color: light-dark(#005cc5, #ae81ff) } /* Literal.Number.Float */
+.highlight .mh { color: light-dark(#005cc5, #ae81ff) } /* Literal.Number.Hex */
+.highlight .mi { color: light-dark(#005cc5, #ae81ff) } /* Literal.Number.Integer */
+.highlight .mo { color: light-dark(#005cc5, #ae81ff) } /* Literal.Number.Oct */
+.highlight .sb { color: light-dark(#032f62, #e6db74) } /* Literal.String.Backtick */
+.highlight .sc { color: light-dark(#032f62, #e6db74) } /* Literal.String.Char */
+.highlight .sd { color: light-dark(#6a737d, #e6db74) } /* Literal.String.Doc */
+.highlight .s2 { color: light-dark(#032f62, #e6db74) } /* Literal.String.Double */
+.highlight .se { color: light-dark(#e36209, #ae81ff) } /* Literal.String.Escape */
+.highlight .sh { color: light-dark(#032f62, #e6db74) } /* Literal.String.Heredoc */
+.highlight .si { color: light-dark(#e36209, #e6db74) } /* Literal.String.Interpol */
+.highlight .sx { color: light-dark(#032f62, #e6db74) } /* Literal.String.Other */
+.highlight .sr { color: light-dark(#22863a, #e6db74) } /* Literal.String.Regex */
+.highlight .s1 { color: light-dark(#032f62, #e6db74) } /* Literal.String.Single */
+.highlight .ss { color: light-dark(#005cc5, #e6db74) } /* Literal.String.Symbol */
+.highlight .bp { color: light-dark(#005cc5, #f8f8f2) } /* Name.Builtin.Pseudo */
+.highlight .vc { color: light-dark(#e36209, #f8f8f2) } /* Name.Variable.Class */
+.highlight .vg { color: light-dark(#e36209, #f8f8f2) } /* Name.Variable.Global */
+.highlight .vi { color: light-dark(#e36209, #f8f8f2) } /* Name.Variable.Instance */
+.highlight .il { color: light-dark(#005cc5, #ae81ff) } /* Literal.Number.Integer.Long */
 
-.highlight .gh { } /* Generic Heading & Diff Header */
-.highlight .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */
-.highlight .gd { color: #f92672; } /* Generic.Deleted & Diff Deleted */
-.highlight .gi { color: #a6e22e; } /* Generic.Inserted & Diff Inserted */
-
-/* Light Mode */
-
-/* Light mode syntax highlighting improvements */
-:root:not([data-theme="dark"]) .highlight {
-  /* Base text and background */
-  .c { color: #6a737d; } /* Comment - GitHub style gray */
-  .err { color: #cb2431; background-color: #ffeaea; } /* Error */
-  .k { color: #d73a49; } /* Keyword - GitHub red */
-  .l { color: #005cc5; } /* Literal - GitHub blue */
-  .n { color: #24292e; } /* Name - dark gray */
-  .o { color: #d73a49; } /* Operator - GitHub red */
-  .p { color: #24292e; } /* Punctuation - dark gray */
-
-  /* Comments */
-  .cm { color: #6a737d; } /* Comment.Multiline */
-  .cp { color: #d73a49; } /* Comment.Preproc - red for preprocessor */
-  .c1 { color: #6a737d; } /* Comment.Single */
-  .cs { color: #6a737d; font-weight: bold; } /* Comment.Special */
-
-  /* Keywords */
-  .kc { color: #005cc5; } /* Keyword.Constant - blue */
-  .kd { color: #d73a49; } /* Keyword.Declaration - red */
-  .kn { color: #d73a49; } /* Keyword.Namespace - red */
-  .kp { color: #005cc5; } /* Keyword.Pseudo - blue */
-  .kr { color: #d73a49; } /* Keyword.Reserved - red */
-  .kt { color: #d73a49; } /* Keyword.Type - red */
-
-  /* Literals */
-  .ld { color: #032f62; } /* Literal.Date - dark blue */
-  .m { color: #005cc5; } /* Literal.Number - blue */
-  .s { color: #032f62; } /* Literal.String - dark blue */
-
-  /* Names */
-  .na { color: #e36209; } /* Name.Attribute - orange */
-  .nb { color: #005cc5; } /* Name.Builtin - blue */
-  .nc { color: #6f42c1; } /* Name.Class - purple */
-  .no { color: #005cc5; } /* Name.Constant - blue */
-  .nd { color: #6f42c1; } /* Name.Decorator - purple */
-  .ni { color: #24292e; } /* Name.Entity - dark gray */
-  .ne { color: #6f42c1; } /* Name.Exception - purple */
-  .nf { color: #6f42c1; } /* Name.Function - purple */
-  .nl { color: #24292e; } /* Name.Label - dark gray */
-  .nn { color: #24292e; } /* Name.Namespace - dark gray */
-  .nx { color: #6f42c1; } /* Name.Other - purple */
-  .py { color: #24292e; } /* Name.Property - dark gray */
-  .nt { color: #22863a; } /* Name.Tag - green */
-  .nv { color: #e36209; } /* Name.Variable - orange */
-
-  /* Operators */
-  .ow { color: #d73a49; } /* Operator.Word - red */
-  .w { color: #24292e; } /* Text.Whitespace - dark gray */
-
-  /* Numbers */
-  .mf { color: #005cc5; } /* Literal.Number.Float - blue */
-  .mh { color: #005cc5; } /* Literal.Number.Hex - blue */
-  .mi { color: #005cc5; } /* Literal.Number.Integer - blue */
-  .mo { color: #005cc5; } /* Literal.Number.Oct - blue */
-
-  /* Strings */
-  .sb { color: #032f62; } /* Literal.String.Backtick - dark blue */
-  .sc { color: #032f62; } /* Literal.String.Char - dark blue */
-  .sd { color: #6a737d; } /* Literal.String.Doc - gray */
-  .s2 { color: #032f62; } /* Literal.String.Double - dark blue */
-  .se { color: #e36209; } /* Literal.String.Escape - orange */
-  .sh { color: #032f62; } /* Literal.String.Heredoc - dark blue */
-  .si { color: #e36209; } /* Literal.String.Interpol - orange */
-  .sx { color: #032f62; } /* Literal.String.Other - dark blue */
-  .sr { color: #22863a; } /* Literal.String.Regex - green */
-  .s1 { color: #032f62; } /* Literal.String.Single - dark blue */
-  .ss { color: #005cc5; } /* Literal.String.Symbol - blue */
-
-  /* Variables */
-  .bp { color: #005cc5; } /* Name.Builtin.Pseudo - blue */
-  .vc { color: #e36209; } /* Name.Variable.Class - orange */
-  .vg { color: #e36209; } /* Name.Variable.Global - orange */
-  .vi { color: #e36209; } /* Name.Variable.Instance - orange */
-  .il { color: #005cc5; } /* Literal.Number.Integer.Long - blue */
-
-  /* Diff colors */
-  .gh { color: #24292e; font-weight: bold; } /* Generic Heading */
-  .gu { color: #6a737d; } /* Generic.Subheading */
-  .gd { color: #cb2431; background-color: #ffeaea; } /* Generic.Deleted */
-  .gi { color: #22863a; background-color: #f0fff4; } /* Generic.Inserted */
-}
+.highlight .gh { color: light-dark(#24292e, inherit) } /* Generic Heading & Diff Header */
+.highlight .gu { color: light-dark(#6a737d, #75715e); } /* Generic.Subheading & Diff Unified/Comment? */
+.highlight .gd { color: light-dark(#cb2431, #f92672); background-color: light-dark(#ffeaea, transparent) } /* Generic.Deleted & Diff Deleted */
+.highlight .gi { color: light-dark(#22863a, #a6e22e); background-color: light-dark(#f0fff4, transparent) } /* Generic.Inserted & Diff Inserted */
diff --git a/assets/css/page.css b/assets/css/page.css
index 4fea895..5ed0cfc 100644
--- a/assets/css/page.css
+++ b/assets/css/page.css
@@ -182,29 +182,29 @@ a:hover {
 }
 .button {
   display: inline-block;
-  color: var(--color-pink);
+  color: light-dark(var(--color-bg-default), var(--color-pink));
   background: none;
+  background-color: light-dark(var(--color-pink), transparent);
   border: 1px dashed var(--color-pink);
   margin: 0.5rem 0;
   padding: 0.5rem 0.75rem;
   cursor: pointer;
 }
-.button:hover, .button.filled,
-:root[data-theme="light"] .button {
+.button:hover {
   border-color: var(--color-pink);
-  background-color: var(--color-pink);
+  background-color: light-dark(var(--color-fg-low-contrast), var(--color-pink));
   color: var(--color-bg-default);
 }
 
 .button.secondary {
-  color: var(--color-secondary);
+  color: light-dark(var(--color-bg-default), var(--color-secondary));
   border: 1px dashed var(--color-secondary);
+  background-color: light-dark(var(--color-secondary), transparent);
 }
 
-.button.secondary:hover, .button.secondary.filled,
-:root[data-theme="light"] .button.secondary {
+.button.secondary:hover {
   border-color: var(--color-secondary);
-  background-color: var(--color-secondary);
+  background-color: light-dark(var(--color-fg-low-contrast), var(--color-secondary));
   color: var(--color-bg-default);
 }
 
@@ -213,10 +213,19 @@ a:hover {
   margin: 0;
 }
 
-.button.filled, :root[data-theme="light"] .button {
+.button.filled {
   border-style: none;
+  border-color: var(--color-pink);
+  background-color: var(--color-pink);
+  color: var(--color-bg-default);
 }
-.button.filled:hover, :root[data-theme="light"] .button:hover {
+
+.button.secondary.filled {
+  border-color: var(--color-secondary);
+  background-color: var(--color-secondary);
+}
+
+.button.filled:hover {
   background-color: var(--color-fg-low-contrast) !important;
   color: var(--color-bg-default) !important;
 }
@@ -278,8 +287,6 @@ body > footer {
   white-space: nowrap;
   width: 100%;
   height: 2rem;
-  min-height: 1.5rem;
-  line-height: 1.5rem;
 }
 
 footer {
@@ -292,8 +299,12 @@ body > footer > * {
   flex: 1;
   display: flex;
   justify-content: center;
+}
+
+body > footer > span {
   align-items: center;
 }
+
 body > footer :first-child > * {
   margin-right: auto;
 }
diff --git a/assets/js/toggle-theme.js b/assets/js/toggle-theme.js
index 572a132..4eeb299 100644
--- a/assets/js/toggle-theme.js
+++ b/assets/js/toggle-theme.js
@@ -1,24 +1,12 @@
-const rootElement = document.documentElement;
-const themeToggleBtn = document.getElementById("toggle-theme");
-const storedTheme = localStorage.getItem("theme");
-const defaultTheme = window.matchMedia
-  && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-
-setTheme(storedTheme || defaultTheme);
-
-if (themeToggleBtn) {
-  themeToggleBtn.addEventListener("click", () => {
-    const currentTheme = rootElement.dataset.theme;
-
-    if (currentTheme === "dark") {
-      setTheme("light");
-    } else {
-      setTheme("dark");
-    }
-  });
+function loadTheme() {
+  const theme = localStorage.getItem("theme") || (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
+  document.documentElement.style.colorScheme = theme;
+  document.getElementById(theme).checked = true;
 }
 
-function setTheme(theme) {
-  rootElement.dataset.theme = theme;
+loadTheme();
+
+function toggleTheme(theme) {
+  document.documentElement.style.colorScheme = theme;
   localStorage.setItem("theme", theme);
-}
+}
\ No newline at end of file