Feat: Added System theme for switcher

macx · Mar 20, 2024 · 223a23e · 223a23e
1 parent 805efc3
commit 223a23e
Show file tree

Hide file tree

Showing 6 changed files with 245 additions and 131 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>