fix img src path, add theme toggle button

styleguide/assets/script/styleguide.js

@@ -1,3 +1,27 @@
 document.querySelector('nav > button').addEventListener('click', (e) => {
     document.querySelector('nav').classList.toggle('visible');
 })
+
+function applyTheme(theme){
+    const html = document.querySelector('html')
+    document.cookie = `theme=${theme}; expires=; SameSite=Strict; Secure`
+    html.classList.remove('dark', 'light')
+    html.classList.add(theme)
+}
+
+document.querySelectorAll('.toggleTheme').forEach(
+    element => element.addEventListener('click', (e) => {
+            const newTheme = element.dataset.theme;
+            applyTheme(newTheme);
+        }
+    )
+);
+
+const themeFromCookie = document.cookie
+    .split("; ")
+    .find((row) => row.startsWith("theme="))
+    ?.split("=")[1];
+
+if (themeFromCookie) {
+    applyTheme(themeFromCookie)
+}

styleguide/assets/style/icons.scss

@@ -0,0 +1,52 @@
+
+i[data-icon] {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+  position: relative;
+  box-sizing: content-box;
+
+  &::before {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 100%;
+    mask-size: contain;
+    mask-position: center;
+    mask-repeat: no-repeat;
+    background-color: currentColor;
+  }
+
+  &[data-icon='arrow-left']::before {
+    mask-image: url('../icon/arrow_left.svg');
+  }
+
+  &[data-icon='arrow-up']::before {
+    mask-image: url('../icon/arrow_up.svg');
+  }
+
+  &[data-icon='arrow-right']::before {
+    mask-image: url('../icon/arrow_right.svg');
+  }
+
+  &[data-icon='arrow-down']::before {
+    mask-image: url('../icon/arrow_down.svg');
+  }
+
+  &[data-icon='info']::before {
+    mask-image: url('../icon/info.svg');
+  }
+
+  &[data-icon='home']::before {
+    mask-image: url('../icon/home.svg');
+  }
+
+  &[data-icon='menu-small']::before {
+    mask-image: url('../icon/menu_small.svg');
+  }
+
+  &[data-icon='light']::before {
+    mask-image: url('../icon/lightbulb.svg');
+  }
+}

styleguide/assets/style/styleguide.css

@@ -491,6 +491,49 @@ img.glitch {
   filter: url("glitch.svg#glitch");
 }
 
+i[data-icon] {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+  position: relative;
+  box-sizing: content-box;
+}
+i[data-icon]::before {
+  content: "";
+  display: block;
+  width: 100%;
+  height: 100%;
+  mask-size: contain;
+  mask-position: center;
+  mask-repeat: no-repeat;
+  background-color: currentColor;
+}
+i[data-icon][data-icon=arrow-left]::before {
+  mask-image: url("../icon/arrow_left.svg");
+}
+i[data-icon][data-icon=arrow-up]::before {
+  mask-image: url("../icon/arrow_up.svg");
+}
+i[data-icon][data-icon=arrow-right]::before {
+  mask-image: url("../icon/arrow_right.svg");
+}
+i[data-icon][data-icon=arrow-down]::before {
+  mask-image: url("../icon/arrow_down.svg");
+}
+i[data-icon][data-icon=info]::before {
+  mask-image: url("../icon/info.svg");
+}
+i[data-icon][data-icon=home]::before {
+  mask-image: url("../icon/home.svg");
+}
+i[data-icon][data-icon=menu-small]::before {
+  mask-image: url("../icon/menu_small.svg");
+}
+i[data-icon][data-icon=light]::before {
+  mask-image: url("../icon/lightbulb.svg");
+}
+
 * {
   box-sizing: border-box;
 }
@@ -625,12 +668,6 @@ body > div nav ul li > a {
 body > div nav ul li > a:visited, body > div nav ul li > a:focus, body > div nav ul li > a:active, body > div nav ul li > a:hover {
   color: var(--color-foreground);
 }
-body > div nav ul li > a i[data-icon] {
-  padding-right: 0.5em;
-  padding-top: 0.2em;
-  padding-bottom: 0.2em;
-  border-right: solid 0.1em currentColor;
-}
 body > div nav ul li:hover, body > div nav ul li:focus-within {
   background-color: transparent;
 }
@@ -650,6 +687,20 @@ body > div nav ul li:hover.link-back a, body > div nav ul li:focus-within.link-b
 body > div nav ul li:hover.link-back a:visited, body > div nav ul li:hover.link-back a:focus, body > div nav ul li:hover.link-back a:active, body > div nav ul li:hover.link-back a:hover, body > div nav ul li:focus-within.link-back a:visited, body > div nav ul li:focus-within.link-back a:focus, body > div nav ul li:focus-within.link-back a:active, body > div nav ul li:focus-within.link-back a:hover {
   color: var(--color-glow-secondary);
 }
+body > div nav ul li:not(.toggleTheme) i[data-icon] {
+  padding-right: 0.5em;
+  padding-top: 0.2em;
+  padding-bottom: 0.2em;
+  border-right: solid 0.1em currentColor;
+}
+body > div nav ul li.toggleTheme {
+  font-size: 1.4em;
+  width: fit-content;
+}
+body > div nav ul li.toggleTheme a {
+  justify-content: center;
+  padding: 0.25em;
+}
 body > div main {
   max-width: min(var(--container-4xl), 100vw);
   width: 100%;
@@ -662,46 +713,6 @@ body > div main {
   }
 }
 
-i[data-icon] {
-  display: inline-block;
-  width: 1em;
-  height: 1em;
-  flex-shrink: 0;
-  position: relative;
-  box-sizing: content-box;
-}
-i[data-icon]::before {
-  content: '';
-  display: block;
-  width: 100%;
-  height: 100%;
-  mask-size: contain;
-  mask-position: center;
-  mask-repeat: no-repeat;
-  background-color: currentColor;
-}
-i[data-icon][data-icon='arrow-left']::before {
-  mask-image: url("../icon/arrow_left.svg");
-}
-i[data-icon][data-icon='arrow-top']::before {
-  mask-image: url("../icon/arrow_top.svg");
-}
-i[data-icon][data-icon='arrow-right']::before {
-  mask-image: url("../icon/arrow_right.svg");
-}
-i[data-icon][data-icon='arrow-down']::before {
-  mask-image: url("../icon/arrow_down.svg");
-}
-i[data-icon][data-icon='info']::before {
-  mask-image: url("../icon/info.svg");
-}
-i[data-icon][data-icon='home']::before {
-  mask-image: url("../icon/home.svg");
-}
-i[data-icon][data-icon='menu-small']::before {
-  mask-image: url("../icon/menu_small.svg");
-}
-
 a.a-regular, a.a-regular:hover, a.a-regular:active, a.a-regular:focus, a.a-regular:visited {
   color: var(--color-accent-1);
   text-decoration: underline;

styleguide/assets/style/styleguide.scss

@@ -1,4 +1,5 @@
 @import "base";
+@import "icons";
 
 * {
   box-sizing: border-box;
@@ -31,7 +32,7 @@ body {
     }
   }
 
-  >div {
+  > div {
     display: flex;
     gap: 1rem;
     flex-grow: 1;
@@ -127,7 +128,7 @@ body {
             }
           }
 
-          >a {
+          > a {
             display: flex;
             align-items: center;
             gap: 0.5rem;
@@ -149,13 +150,6 @@ body {
             &:hover {
               color: var(--color-foreground);
             }
-
-            i[data-icon] {
-              padding-right: 0.5em;
-              padding-top: 0.2em;
-              padding-bottom: 0.2em;
-              border-right: solid 0.1em currentColor;
-            }
           }
 
           &:hover,
@@ -189,6 +183,25 @@ body {
             }
           }
         }
+
+        li:not(.toggleTheme) {
+          i[data-icon] {
+            padding-right: 0.5em;
+            padding-top: 0.2em;
+            padding-bottom: 0.2em;
+            border-right: solid 0.1em currentColor;
+          }
+        }
+
+        li.toggleTheme {
+          font-size: 1.4em;
+          width: fit-content;
+
+          a {
+            justify-content: center;
+            padding: 0.25em;
+          }
+        }
       }
     }
 
@@ -205,55 +218,6 @@ body {
   }
 }
 
-i[data-icon] {
-  display: inline-block;
-  width: 1em;
-  height: 1em;
-  flex-shrink: 0;
-  position: relative;
-  box-sizing: content-box;
-
-  &::before {
-    content: '';
-    display: block;
-    width: 100%;
-    height: 100%;
-    mask-size: contain;
-    mask-position: center;
-    mask-repeat: no-repeat;
-    background-color: currentColor;
-  }
-
-  &[data-icon='arrow-left']::before {
-    mask-image: url('../icon/arrow_left.svg');
-  }
-
-  &[data-icon='arrow-top']::before {
-    mask-image: url('../icon/arrow_top.svg');
-  }
-
-  &[data-icon='arrow-right']::before {
-    mask-image: url('../icon/arrow_right.svg');
-  }
-
-  &[data-icon='arrow-down']::before {
-    mask-image: url('../icon/arrow_down.svg');
-  }
-
-  &[data-icon='info']::before {
-    mask-image: url('../icon/info.svg');
-  }
-
-  &[data-icon='home']::before {
-    mask-image: url('../icon/home.svg');
-  }
-
-  &[data-icon='menu-small']::before {
-    mask-image: url('../icon/menu_small.svg');
-  }
-}
-
-
 a {
 
   &.a-regular,
@@ -290,14 +254,14 @@ pre,
   display: flex;
   width: 100%;
 
-  &>* {
+  & > * {
     width: 100%;
   }
 
   @media (max-width: $breakpoint-mobile) {
     flex-wrap: wrap;
 
-    &>* {
+    & > * {
       width: 100%;
     }
   }
@@ -307,7 +271,7 @@ pre,
   display: flex;
   align-items: center;
 
-  &>* {
+  & > * {
     width: 100%;
   }
 
@@ -315,7 +279,7 @@ pre,
     flex-wrap: wrap;
     justify-content: center;
 
-    &>* {
+    & > * {
       width: 100%;
     }
   }
@@ -323,7 +287,7 @@ pre,
 
 
 main.generator {
-  >div {
+  > div {
     display: flex;
     flex-direction: column;
     gap: 1em;
@@ -354,7 +318,7 @@ main.generator {
     gap: 1rem;
     margin-top: 2rem;
 
-    &>span {
+    & > span {
       width: 100%;
       font-size: var(--text-xl);
     }

styleguide/colors/index.html

@@ -10,10 +10,10 @@
 
 <body>
     <header>
-        <img src="assets/image/logo_eventname_glow.svg" class="header-image dark-only" alt="Logo of Easterhegg 2025. In the style of a neon sign:
+        <img src="../assets/image/logo_eventname_glow.svg" class="header-image dark-only" alt="Logo of Easterhegg 2025. In the style of a neon sign:
      The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
      The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink." />
-        <img src="assets/image/logo_eventname_glow_off.svg" class="header-image light-only" alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
+        <img src="../assets/image/logo_eventname_glow_off.svg" class="header-image light-only" alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
      The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
      The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink." />
     </header>
@@ -27,6 +27,8 @@
                 <li><a href="../typography"><i data-icon="info"></i>Typography</a></li>
                 <li><a href="../demopage"><i data-icon="info"></i>Demopage</a></li>
                 <li><a href="../generator"><i data-icon="info"></i>Image Generator</a></li>
+                <li class="dark-only toggleTheme" data-theme="light"><a href="#" aria-label="switch to light theme"><i data-icon="light" class="glow"></i></a></li>
+                <li class="light-only toggleTheme" data-theme="dark"><a href="#" aria-label="switch to dark theme"><i data-icon="light" class="glow"></i></a></li>
             </ul>
         </nav>
         <main>

styleguide/demopage/index.html

@@ -10,10 +10,10 @@
 
 <body>
     <header>
-        <img src="assets/image/logo_eventname_glow.svg" class="header-image dark-only" alt="Logo of Easterhegg 2025. In the style of a neon sign:
+        <img src="../assets/image/logo_eventname_glow.svg" class="header-image dark-only" alt="Logo of Easterhegg 2025. In the style of a neon sign:
      The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
      The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink." />
-        <img src="assets/image/logo_eventname_glow_off.svg" class="header-image light-only" alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
+        <img src="../assets/image/logo_eventname_glow_off.svg" class="header-image light-only" alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
      The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
      The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink." />
     </header>
@@ -27,6 +27,8 @@
                 <li><a href="../typography"><i data-icon="info"></i>Typography</a></li>
                 <li class="active"><a href=""><i data-icon="info"></i>Demopage</a></li>
                 <li><a href="../generator"><i data-icon="info"></i>Image Generator</a></li>
+                <li class="dark-only toggleTheme" data-theme="light"><a href="#" aria-label="switch to light theme"><i data-icon="light" class="glow"></i></a></li>
+                <li class="light-only toggleTheme" data-theme="dark"><a href="#" aria-label="switch to dark theme"><i data-icon="light" class="glow"></i></a></li>
             </ul>
         </nav>
         <main>

styleguide/generator/index.html

@@ -10,10 +10,10 @@
 
 <body style="height: 100vh;">
     <header>
-        <img src="assets/image/logo_eventname_glow.svg" class="header-image dark-only" alt="Logo of Easterhegg 2025. In the style of a neon sign:
+        <img src="../assets/image/logo_eventname_glow.svg" class="header-image dark-only" alt="Logo of Easterhegg 2025. In the style of a neon sign:
      The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
      The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink." />
-        <img src="assets/image/logo_eventname_glow_off.svg" class="header-image light-only" alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
+        <img src="../assets/image/logo_eventname_glow_off.svg" class="header-image light-only" alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
      The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
      The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink." />
     </header>
@@ -27,6 +27,8 @@
                 <li><a href="../typography"><i data-icon="info"></i>Typography</a></li>
                 <li><a href="../demopage"><i data-icon="info"></i>Demopage</a></li>
                 <li class="active"><a href=""><i data-icon="info"></i>Image Generator</a></li>
+                <li class="dark-only toggleTheme" data-theme="light"><a href="#" aria-label="switch to light theme"><i data-icon="light" class="glow"></i></a></li>
+                <li class="light-only toggleTheme" data-theme="dark"><a href="#" aria-label="switch to dark theme"><i data-icon="light" class="glow"></i></a></li>
             </ul>
         </nav>
         <main class="generator">

styleguide/index.html

@@ -27,6 +27,8 @@
                 <li><a href="typography"><i data-icon="info"></i>Typography</a></li>
                 <li><a href="demopage"><i data-icon="info"></i>Demopage</a></li>
                 <li><a href="generator"><i data-icon="info"></i>Image Generator</a></li>
+                <li class="dark-only toggleTheme" data-theme="light"><a href="#" aria-label="switch to light theme"><i data-icon="light" class="glow"></i></a></li>
+                <li class="light-only toggleTheme" data-theme="dark"><a href="#" aria-label="switch to dark theme"><i data-icon="light" class="glow"></i></a></li>
             </ul>
         </nav>
         <main>

styleguide/typography/index.html

@@ -10,10 +10,10 @@
 
 <body>
     <header>
-        <img src="assets/image/logo_eventname_glow.svg" class="header-image dark-only" alt="Logo of Easterhegg 2025. In the style of a neon sign:
+        <img src="../assets/image/logo_eventname_glow.svg" class="header-image dark-only" alt="Logo of Easterhegg 2025. In the style of a neon sign:
      The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
      The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink." />
-        <img src="assets/image/logo_eventname_glow_off.svg" class="header-image light-only" alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
+        <img src="../assets/image/logo_eventname_glow_off.svg" class="header-image light-only" alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
      The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
      The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink." />
     </header>
@@ -27,6 +27,8 @@
                 <li class="active"><a href=""><i data-icon="info"></i>Typography</a></li>
                 <li><a href="../demopage"><i data-icon="info"></i>Demopage</a></li>
                 <li><a href="../generator"><i data-icon="info"></i>Image Generator</a></li>
+                <li class="dark-only toggleTheme" data-theme="light"><a href="#" aria-label="switch to light theme"><i data-icon="light" class="glow"></i></a></li>
+                <li class="light-only toggleTheme" data-theme="dark"><a href="#" aria-label="switch to dark theme"><i data-icon="light" class="glow"></i></a></li>
             </ul>
         </nav>
         <main>