diff options
| author | Matt Kosarek <matt.kosarek@canonical.com> | 2026-03-18 08:17:44 -0400 |
|---|---|---|
| committer | Matt Kosarek <matt.kosarek@canonical.com> | 2026-03-18 08:17:44 -0400 |
| commit | ce455b41a2a3d520a2f37c2d4c69bf6ab33a65f7 (patch) | |
| tree | d5ed04d3c1ec4d4a2b18ee57faf6bad659065f2e /src/layouts/BaseLayout.astro | |
| parent | 5256e50987e8173080bb84cfe881ac0e5f089847 (diff) | |
Diffstat (limited to 'src/layouts/BaseLayout.astro')
| -rw-r--r-- | src/layouts/BaseLayout.astro | 42 |
1 files changed, 42 insertions, 0 deletions
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 76dc4cc..57077ec 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -24,6 +24,17 @@ const { <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap" rel="stylesheet"> <link rel="shortcut icon" href="/favicon/favicon.ico" type="image/x-icon"> <meta name="description" content={description}> + <script is:inline> + (function() { + var saved = localStorage.getItem('theme'); + var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; + if (saved === 'dark' || (!saved && prefersDark)) { + document.documentElement.setAttribute('data-theme', 'dark'); + } else if (saved === 'light') { + document.documentElement.setAttribute('data-theme', 'light'); + } + })(); + </script> </head> <body> <header> @@ -32,9 +43,40 @@ const { <li><a href='/'>🏡 Home</a></li> <li><a href='/resume'>📘 CV</a></li> <li><a href='/posts'>📝 Posts</a></li> + <li style="margin-left: auto"> + <button id="theme-toggle" aria-label="Toggle color theme">Dark</button> + </li> </ul> </nav> </header> <slot /> + <script is:inline> + (function() { + var btn = document.getElementById('theme-toggle'); + var root = document.documentElement; + + function getCurrentTheme() { + var explicit = root.getAttribute('data-theme'); + if (explicit) return explicit; + return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; + } + + function setTheme(theme) { + root.setAttribute('data-theme', theme); + localStorage.setItem('theme', theme); + updateButton(theme); + } + + function updateButton(theme) { + btn.textContent = theme === 'dark' ? '🌗 Light' : '🌗 Dark'; + } + + updateButton(getCurrentTheme()); + + btn.addEventListener('click', function() { + setTheme(getCurrentTheme() === 'dark' ? 'light' : 'dark'); + }); + })(); + </script> </body> </html> |