From 223a23e0ce2d964a91567c61a23aadf6a520a3b0 Mon Sep 17 00:00:00 2001
From: David Maciejewski <macx@macx.io>
Date: Wed, 20 Mar 2024 15:35:07 +0100
Subject: [PATCH] Feat: Added System theme for switcher

---
 astro.config.mjs                 |   1 +
 src/components/Header.astro      |  70 ++++++++-
 src/components/Navigation.astro  |   2 +-
 src/components/ThemeButton.astro |  64 ++++++---
 src/components/ThemeSwitch.astro | 237 +++++++++++++++++--------------
 src/styles/base/_variables.scss  |   2 -
 6 files changed, 245 insertions(+), 131 deletions(-)

diff --git a/astro.config.mjs b/astro.config.mjs
index 38c1322..955d3d1 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -90,6 +90,7 @@ export default defineConfig({
         materialSymbols: [
           'menu',
           'close',
+          'monitor-outline',
           'arrow-upward-rounded',
           'keyboard-double-arrow-left',
           'keyboard-double-arrow-right',
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 03f61eb..d39e4d7 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -56,7 +56,7 @@ import { SITE_CONST } from '../const.ts'
     aria-label='Weiterführende Links'
   >
     <ul class='header-links'>
-      <li class='external'>
+      <li class='external' data-hint='Discord'>
         <a
           href={SITE_CONST.links.discord}
           target='_blank'
@@ -68,7 +68,7 @@ import { SITE_CONST } from '../const.ts'
           <span class='sr-only'>Discord</span>
         </a>
       </li>
-      <li class='external'>
+      <li class='external' data-hint='StudIP'>
         <a
           href={SITE_CONST.links.studip}
           target='_blank'
@@ -81,7 +81,7 @@ import { SITE_CONST } from '../const.ts'
           <span class='sr-only'>StudIP</span>
         </a>
       </li>
-      <li class='external'>
+      <li class='external' data-hint='GitHub'>
         <a
           href={SITE_CONST.links.github}
           target='_blank'
@@ -93,7 +93,7 @@ import { SITE_CONST } from '../const.ts'
           <span class='sr-only'>GitHub</span>
         </a>
       </li>
-      <li>
+      <li data-hint='Theme'>
         <ThemeSwitch />
       </li>
     </ul>
@@ -117,7 +117,7 @@ import { SITE_CONST } from '../const.ts'
     padding-inline: var(--sp-content);
 
     background-color: var(--clr-bg);
-    border-bottom: 1px solid var(--nav-border);
+    border-bottom: 1px solid var(--clr-line);
     box-shadow: 1.5rem 0 4rem -0.5rem var(--nav-shadow);
     transition: all var(--transition-theme);
 
@@ -147,6 +147,7 @@ import { SITE_CONST } from '../const.ts'
 
     @include mixins.respond('l') {
       display: flex;
+      align-items: center;
       flex: 0 1 auto;
     }
   }
@@ -260,4 +261,63 @@ import { SITE_CONST } from '../const.ts'
       fill: #15232d;
     }
   }
+
+  @media (hover: hover) {
+    [data-hint] {
+      position: relative;
+      z-index: 500;
+      cursor: pointer;
+
+      &::before,
+      &::after {
+        position: absolute;
+        left: 50%;
+        bottom: 0.25rem;
+        transition:
+          opacity 0.2s,
+          transform 0.2s;
+
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      &::before {
+        padding: 0.5em 1em 0.7em;
+        border-radius: var(--radius);
+        color: var(--clr-text);
+        background-color: var(--clr-bg-card);
+        border: 1px solid var(--clr-line);
+        content: attr(data-hint);
+
+        font-size: var(--fs-s);
+        line-height: 1.2em;
+        white-space: nowrap;
+        text-align: center;
+        box-shadow: 0 0.5rem 0.5rem -0.5rem rgb(0 0 0 / 0.2);
+        transform: translate(-50%, 0%);
+      }
+
+      &::after {
+        width: 0;
+        border: 5px solid transparent;
+        border-bottom-color: var(--clr-line);
+        content: '';
+        font-size: 0;
+        line-height: 0;
+        transform: translate(-50%, -100%);
+      }
+
+      &:hover {
+        &::before {
+          opacity: 1;
+          transform: translate(-50%, 100%);
+        }
+
+        &::after {
+          opacity: 1;
+          transform: translate(-50%, 0);
+        }
+      }
+    }
+  }
 </style>
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
index 8c65cee..d26a67e 100644
--- a/src/components/Navigation.astro
+++ b/src/components/Navigation.astro
@@ -178,7 +178,7 @@ const filteredPages = pages
       text-decoration: none;
 
       &:hover,
-      &:focus {
+      &:focus-visible {
         background-color: transparent;
         color: var(--clr-primary);
       }
diff --git a/src/components/ThemeButton.astro b/src/components/ThemeButton.astro
index 800aaf1..d0a5a3b 100644
--- a/src/components/ThemeButton.astro
+++ b/src/components/ThemeButton.astro
@@ -23,9 +23,14 @@
       fill-rule='evenodd'
       d='M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z'
     ></path>
+    <path
+      class='system'
+      fill-rule='evenodd'
+      d='M6 21v-2l1-1H4q-.825 0-1.412-.587T2 16V5q0-.825.588-1.412T4 3h16q.825 0 1.413.588T22 5v11q0 .825-.587 1.413T20 18h-3l1 1v2zm-2-5h16V5H4zm0 0V5z'
+    ></path>
   </svg>
-  <span id='theme-toggle-button' class='sr-only'>Themen umschalten</span>
 </button>
+<span id='theme-toggle-button' class='sr-only'>Themen umschalten</span>
 
 <style lang='scss'>
   button {
@@ -46,32 +51,57 @@
       fill: var(--clr-text);
       transition: fill var(--transition);
 
-      .sun {
-        fill: currentColor;
-      }
-
-      .moon {
+      path {
         fill: transparent;
       }
-    }
 
-    :global(html[data-theme='dark']) & .sun {
-      fill: transparent;
-    }
-
-    :global(html[data-theme='dark']) & .moon {
-      fill: white;
+      &[data-env='light'] path.sun,
+      &[data-env='dark'] path.moon,
+      &[data-env='system'] path.system {
+        fill: currentColor;
+      }
     }
   }
 </style>
 
 <script is:inline>
-  const themeToggle = document.getElementById('themeToggle')
+  const themeToggleButton = document.getElementById('themeToggle')
+  const svg = themeToggleButton.querySelector('svg')
   const html = document.documentElement
+  const prefersScheme = window.matchMedia('(prefers-color-scheme: dark)')
+    .matches
+    ? 'dark'
+    : 'light'
 
-  themeToggle.addEventListener('click', () => {
-    html.dataset.theme = html.dataset.theme === 'dark' ? 'light' : 'dark'
+  if (!localStorage.getItem('theme')) {
+    svg.dataset.env = prefersScheme
+  } else {
+    svg.dataset.env =
+      localStorage.getItem('theme') === 'system'
+        ? 'system'
+        : localStorage.getItem('theme')
+  }
 
-    localStorage.setItem('theme', html.dataset.theme)
+  themeToggleButton.addEventListener('click', (e) => {
+    const prefersScheme = window.matchMedia('(prefers-color-scheme: dark)')
+      .matches
+      ? 'dark'
+      : 'light'
+
+    if (localStorage.getItem('theme') === 'system') {
+      localStorage.setItem('theme', 'light')
+      html.dataset.theme = 'light'
+      svg.dataset.env = 'light'
+    } else {
+      if (html.dataset.theme === 'light') {
+        localStorage.setItem('theme', 'dark')
+        html.dataset.theme = 'dark'
+        svg.dataset.env = 'dark'
+      } else if (html.dataset.theme === 'dark') {
+        localStorage.setItem('theme', 'system')
+        html.dataset.theme = prefersScheme
+        svg.dataset.env = 'system'
+      }
+    }
   })
 </script>
diff --git a/src/components/ThemeSwitch.astro b/src/components/ThemeSwitch.astro
index 9a5da9d..eb37058 100644
--- a/src/components/ThemeSwitch.astro
+++ b/src/components/ThemeSwitch.astro
@@ -3,112 +3,105 @@ import { Icon } from 'astro-icon/components'
 ---
 
 <theme-switch>
-  <label class='theme-switch' for='theme-switch'>
-    <div class='theme-switch__button'>
-      <input
-        type='checkbox'
-        id='theme-switch'
-        class='theme-switch__input'
-        data-theme-switch
-        aria-label='Ändere das Theme'
-      />
-
-      <span class='theme-switch__slider'>
-        <span class='theme-switch__icon theme-switch__icon--on'>
+  <div class='theme-switch' title='Theme'>
+    <div class='theme-switch__control'>
+      <span class='theme-switch__inputs'>
+        <input
+          type='radio'
+          id='theme-switch-light'
+          class='theme-switch__input'
+          data-theme-switch
+          value='light'
+        />
+        <label for='theme-switch-light' aria-label='Light theme'>
           <Icon name='theme-light' aria-hidden='true' />
-        </span>
-
-        <span class='theme-switch__icon theme-switch__icon--off'>
+        </label>
+
+        <input
+          type='radio'
+          id='theme-switch-dark'
+          class='theme-switch__input'
+          data-theme-switch
+          value='dark'
+        />
+        <label for='theme-switch-dark' aria-label='Dark theme'>
           <Icon name='theme-dark' aria-hidden='true' />
-        </span>
+        </label>
+
+        <input
+          type='radio'
+          id='theme-switch-system'
+          class='theme-switch__input'
+          data-theme-switch
+          value='system'
+        />
+        <label for='theme-switch-system' aria-label='System theme'>
+          <Icon name='material-symbols:monitor-outline' aria-hidden='true' />
+        </label>
       </span>
     </div>
-  </label>
+  </div>
 </theme-switch>
 
 <style lang='scss'>
   @use '../styles/base/mixins';
 
   .theme-switch {
-    $this: &;
-
-    position: relative;
-    user-select: none;
-    block-size: var(--header-height);
+    --inputs-padding: 0.125rem;
+    --icon-radius: 0.5rem;
+    --icon-padding-block: 0.25rem;
+    --icon-padding-inline: 0.5rem;
 
+    $this: &;
     display: flex;
     align-items: center;
-    cursor: pointer;
-    transition: background-color var(--transition);
-
-    &__input {
-      clip: rect(0 0 0 0);
-      clip-path: inset(100%);
-      height: 1px;
-      overflow: hidden;
-      position: absolute;
-      white-space: nowrap;
-      width: 1px;
 
-      &:checked + #{$this}__slider {
-        &::after {
-          left: calc(100% - 1.4rem - 0.2rem);
-        }
-      }
-    }
-
-    &__button {
-      border: 2px solid var(--clr-text);
-      border-radius: 4rem;
-    }
+    padding-inline-start: var(--sp-xs);
+    block-size: var(--header-height);
 
-    &__slider {
+    &__inputs {
       position: relative;
       display: flex;
-      justify-content: space-between;
       align-items: center;
-      width: 4rem;
-      padding: 0.3rem 0.6rem;
-
-      &::after {
-        content: '';
-        position: absolute;
-        top: 0.1rem;
-        width: 1.4rem;
-        height: 1.4rem;
-        border-radius: 50%;
-        background-color: var(--clr-text);
-        transition:
-          left var(--transition-theme),
-          background-color var(--transition-button);
-      }
-
-      :global([data-theme='dark']) &::after {
-        left: 0.2rem;
-      }
+      padding: var(--inputs-padding);
 
-      :global([data-theme='light']) &::after {
-        left: calc(100% - 1.4rem - 0.2rem);
-      }
+      background-color: var(--clr-bg-card);
+      border: 1px solid var(--clr-line);
+      border-radius: calc(var(--icon-radius) + var(--icon-padding-block));
     }
 
-    &__icon {
+    label {
       display: block;
-      width: 1rem;
-      height: 1rem;
-      fill: var(--clr-text);
+      font-size: var(--icon-size-header);
+      color: var(--clr-text);
+      background-color: transparent;
+      padding-block: var(--icon-padding-block);
+      padding-inline: var(--icon-padding-inline);
+      border-radius: var(--icon-radius);
+      cursor: pointer;
+      transition: background-color var(--transition);
+
+      &:hover,
+      &:focus {
+        color: var(--clr-primary);
+      }
     }
 
-    &:hover,
-    &:focus-visible {
-      #{$this}__slider::after {
+    &__input {
+      position: absolute;
+      inset: 0 0 auto auto;
+      width: 1px;
+      height: 1px;
+      clip: rect(0, 0, 0, 0);
+      clip-path: inset(100%);
+      border: 0;
+      white-space: nowrap;
+
+      &:checked + label {
         background-color: var(--clr-primary);
+        color: var(--clr-inverse);
       }
     }
-
-    @include mixins.respond('l') {
-      padding-inline-start: var(--sp-xs);
-    }
   }
 </style>
 
@@ -117,57 +110,89 @@ import { Icon } from 'astro-icon/components'
     constructor() {
       super()
 
-      const inputEl = this.querySelector<HTMLInputElement>(
+      const inputElements = this.querySelectorAll<HTMLInputElement>(
         '[data-theme-switch]'
       )
 
-      if (inputEl) {
-        const getThemePreference = (): string => {
-          if (localStorage.getItem('theme')) {
-            return localStorage.getItem('theme')!
-          } else {
-            return window.matchMedia('(prefers-color-scheme: dark)').matches
-              ? 'dark'
-              : 'light'
-          }
-        }
+      if (inputElements.length > 0) {
+        const setThemePreference = (newTheme: string): void => {
+          const prefersScheme = window.matchMedia(
+            '(prefers-color-scheme: dark)'
+          ).matches
+            ? 'dark'
+            : 'light'
 
-        const setThemePreference = (): void => {
-          localStorage.setItem('theme', theme.value)
-          applyThemeAttributes()
+          theme.scheme =
+            newTheme === 'system' ? prefersScheme : (newTheme as ThemeSchmemes)
+          theme.name = newTheme
+
+          localStorage.setItem('theme', theme.name)
         }
 
         const applyThemeAttributes = (): void => {
-          document.documentElement.setAttribute('data-theme', theme.value)
-
-          inputEl.checked = theme.value === 'dark' ? false : true
+          document.documentElement.setAttribute('data-theme', theme.scheme)
+
+          inputElements.forEach((el) => {
+            if (theme.name === 'system') {
+              el.checked = el.value === 'system' ? true : false
+            } else {
+              if (el.value === theme.scheme) {
+                el.checked = true
+              } else {
+                el.checked = false
+              }
+            }
+          })
         }
 
+        type ThemeSchmemes = 'light' | 'dark'
+
         interface Theme {
-          value: string
+          name: string
+          scheme: ThemeSchmemes
         }
 
         const theme: Theme = {
-          value: getThemePreference()
+          name: localStorage.getItem('theme') || 'system',
+          scheme:
+            (localStorage
+              .getItem('theme')
+              ?.match(/light|dark/)?.[0] as ThemeSchmemes) ||
+            (window.matchMedia('(prefers-color-scheme: dark)').matches
+              ? 'dark'
+              : 'light')
         }
 
-        applyThemeAttributes()
-
         window.onload = () => {
           applyThemeAttributes()
 
-          inputEl.addEventListener('change', () => {
-            theme.value = theme.value === 'light' ? 'dark' : 'light'
-            applyThemeAttributes()
-            setThemePreference()
+          inputElements.forEach((el) => {
+            if (el.value === theme.name) {
+              el.checked = true
+            } else {
+              el.checked = false
+            }
+
+            el.addEventListener('change', () => {
+              setThemePreference(el.value)
+              applyThemeAttributes()
+            })
           })
         }
 
         window
           .matchMedia('(prefers-color-scheme: dark)')
           .addEventListener('change', () => {
-            theme.value = theme.value === 'dark' ? 'dark' : 'light'
-            setThemePreference()
+            if (theme.name !== 'system') return
+
+            const prefersScheme = window.matchMedia(
+              '(prefers-color-scheme: dark)'
+            ).matches
+              ? 'dark'
+              : 'light'
+
+            theme.scheme = prefersScheme as ThemeSchmemes
+            applyThemeAttributes()
           })
       }
     }
diff --git a/src/styles/base/_variables.scss b/src/styles/base/_variables.scss
index bd77772..29ffb37 100644
--- a/src/styles/base/_variables.scss
+++ b/src/styles/base/_variables.scss
@@ -53,7 +53,6 @@
   --clr-selection: rgb(0 79 205 / 0.15);
 
   --nav-shadow: rgba(109, 62, 62, 0.2);
-  --nav-border: rgba(0, 0, 0, 0.1);
 
   --icon-size: 1.5rem;
   --icon-size-header: 1.25rem;
@@ -127,7 +126,6 @@
 
     --clr-primary: #2f81f7;
     --clr-marker: hsl(60 100% 70% / 0.2);
-    --nav-border: rgb(255 255 255 / 0.15);
 
     --footer-bg: linear-gradient(
       to bottom,