Added dark mode toggle

Author: jackreichelt

assets/theme-toggle.svg

@@ -13,6 +13,11 @@
             <h1>Python Australia Community</h1>
             <p class="intro">Python Australia Community is a community-run organisation dedicated to bringing together Python enthusiasts from across the country. We aim to connect Python-appreciators with local meetups, events, and initiatives to help grow and connect the Python community in Australia.</p>
         </div>
+        <button class="theme-toggle" type="button" title="Toggle theme" aria-label="Toggle theme" onClick="toggleTheme()">
+            <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1.5rem" height="1.5rem" fill="currentColor" viewBox="0 0 32 32">
+                <path d="M16 .5C7.4.5.5 7.4.5 16S7.4 31.5 16 31.5 31.5 24.6 31.5 16 24.6.5 16 .5zm0 28.1V3.4C23 3.4 28.6 9 28.6 16S23 28.6 16 28.6z"></path>
+            </svg>
+        </button>
     </header>
 
     <section class="discord-promo">
@@ -125,5 +130,6 @@ <h3>Gold Coast Python Meetup</h3>
             </div>
         </div>
     </main>
+    <script src="./js/theme_switcher.js"></script>
 </body>
 </html>

index.html

@@ -0,0 +1,32 @@
+// Apply a given theme/color-scheme
+function setTheme(themeName) {
+    localStorage.setItem('theme', themeName)
+    document.documentElement.className = themeName
+}
+
+// Toggle between light and dark theme
+function toggleTheme() {
+    if (localStorage.getItem('theme') === 'theme-dark') {
+        setTheme('theme-light')
+    } else {
+        setTheme('theme-dark')
+    }
+}
+
+// Set the theme on initial load
+(function () {
+    if (localStorage.getItem('theme') === 'theme-dark') {
+        setTheme('theme-dark')
+    } else {
+        setTheme('theme-light')
+    }
+})();
+
+// Listen for changes to the dark mode media query and set the theme to match
+const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)').onchange = (e) => {
+    if (e.matches) {
+        setTheme('theme-dark')
+    } else {
+        setTheme('theme-light')
+    }
+}

js/theme_switcher.js

@@ -1,5 +1,6 @@
 :root {
     color-scheme: light dark;
+    --bright-blue: color-mix(in oklab, var(--python-blue), white 50%);
     --python-blue: #3776a9;
     --dark-blue: color-mix(in oklab, var(--python-blue), black 20%);
     --darker-blue: color-mix(in oklab, var(--python-blue), black 45%);
@@ -14,6 +15,14 @@
     --dark-card: #494c51;
 }
 
+.theme-light {
+    color-scheme: light;
+}
+
+.theme-dark {
+    color-scheme: dark;
+}
+
 body {
     font-family: 'Segoe UI', Arial, sans-serif;
     margin: 0;
@@ -111,7 +120,7 @@ header {
     color: #fff;
     text-align: center;
 
-    img {
+    > img {
         padding: 20px;
         margin-left: -76px;
         margin-top: -76px;
@@ -149,6 +158,28 @@ header {
     }
 }
 
+.theme-toggle {
+    background: none;
+    border: none;
+    align-self: flex-start;
+    padding: 1rem;
+    color: light-dark(var(--light-text), var(--bright-blue));
+    cursor: pointer;
+    transition: color 0.2s ease;
+}
+
+.theme-toggle:hover {
+    color: var(--python-yellow);
+}
+
+.theme-toggle svg {
+    transition: transform 0.3s ease;
+}
+
+.theme-dark .theme-toggle>svg {
+    transform: rotate(180deg);
+}
+
 .intro {
     font-size: 1.2rem;
     max-width: 600px;