Added a JS-less theme-toggle

Tech-Tac · Apr 26, 2024 · 51e0acb · 51e0acb
1 parent c77366a
commit 51e0acb
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -20,6 +20,7 @@
   </head>
   <body>
     <header id="header">
+      <input type="checkbox" id="theme-toggle" />
       <img src="avatar.png" alt="Avatar" height="128pt" />
       <h1 style="margin-block: 0">I'm&nbsp;<span class="tech-tac">Tech-Tac</span>.</h1>
       <p>An avid JavaScript enjoyer.</p>

diff --git a/style.css b/style.css
@@ -70,6 +70,7 @@ main {
 button {
   appearance: none;
   border: none;
+  outline: none;
   background-color: #8886;
   border-radius: 4pt;
   font-size: 12pt;
@@ -107,6 +108,10 @@ button:active {
   box-shadow: none;
 }
 
+button:focus-visible {
+  box-shadow: inset 0 1pt 0 #fff2, 0 1pt 2pt #0002, #888f 0 0 0 4pt;
+}
+
 button:disabled {
   opacity: 0.75;
   pointer-events: none;
@@ -119,6 +124,15 @@ button:disabled {
   padding-top: 8pt;
 }
 
+/* This is to prevent the parent anchor from recieving focus,
+redirecting it to the button directly instead */
+a:has(button) {
+  visibility: hidden;
+}
+a:has(button) * {
+  visibility: initial;
+}
+
 .wrapper {
   width: fit-content;
   display: flex;
@@ -164,6 +178,40 @@ section > .button-group:last-child {
   margin-top: auto;
 }
 
+#theme-toggle {
+  appearance: none;
+  position: absolute;
+  right: 16pt;
+  top: 16pt;
+  width: 32pt;
+  height: 32pt;
+  background-color: transparent;
+  outline: none;
+  font-size: 24pt;
+  border-radius: 50%;
+  text-align: center;
+}
+
+#theme-toggle:is(:hover, :focus-visible) {
+  background-color: #8888;
+}
+
+#theme-toggle::after {
+  content: "☀";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  line-height: 100%;
+}
+
+/* Magic */
+:root:has(#theme-toggle:checked) {
+  color-scheme: dark;
+  background-color: #222;
+  color: #fff;
+}
+
 @media (prefers-color-scheme: dark) {
   :root {
     color-scheme: dark;
@@ -175,4 +223,10 @@ section > .button-group:last-child {
     background-color: #ddd;
     color: #000;
   }
+
+  :root:has(#theme-toggle:checked) {
+    color-scheme: light;
+    background-color: #fff;
+    color: #000;
+  }
 }