feat: turns theme selector into a button instead of a dropdown (#2256)

src/components/overrides/Header.astro

@@ -4,7 +4,7 @@ import LanguageSelect from '@astrojs/starlight/components/LanguageSelect.astro';
 import Search from '@astrojs/starlight/components/Search.astro';
 import SiteTitle from './SiteTitle.astro';
 import SocialIcons from '@astrojs/starlight/components/SocialIcons.astro';
-import ThemeSelect from '@astrojs/starlight/components/ThemeSelect.astro';
+import ThemeSelect from './ThemeSelect.astro';
 
 const curLocale = Astro.props.locale;
 
@@ -59,8 +59,8 @@ const links: Link[] = [
 		<div class="sl-flex social-icons">
 			<SocialIcons {...Astro.props} />
 		</div>
-		<ThemeSelect {...Astro.props} />
 		<LanguageSelect {...Astro.props} />
+		<ThemeSelect {...Astro.props} />
 	</div>
 </div>
 

src/components/overrides/ThemeSelect.astro

@@ -1,6 +1,73 @@
 ---
 import type { Props } from '@astrojs/starlight/props';
-import Default from '@astrojs/starlight/components/ThemeSelect.astro';
+import { Icon } from '@astrojs/starlight/components';
 ---
 
-<Default {...Astro.props}><slot /></Default>
+<script>
+  class ThemeSwitcher extends HTMLElement {
+    constructor() {
+      super();
+      const storedTheme =
+        typeof localStorage !== 'undefined' && localStorage.getItem('starlight-theme');
+      const theme =
+        storedTheme ||
+        (window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
+      document.documentElement.dataset.theme = theme === 'light' ? 'light' : 'dark';
+      this.handleMouseDown = this.handleMouseDown.bind(this);
+    }
+    connectedCallback() {
+      this.addEventListener('click', this.handleMouseDown);
+    }
+    disconnectedCallback() {
+      this.removeEventListener('click', this.handleMouseDown);
+    }
+    private handleMouseDown(e: MouseEvent) {
+      const theme = document.documentElement.dataset.theme === 'light' ? 'dark' : 'light';
+      document.documentElement.dataset.theme = theme;
+      localStorage.setItem('starlight-theme', theme);
+    }
+  }
+  customElements.define('theme-switcher', ThemeSwitcher);
+</script>
+
+<theme-switcher class="sl-flex">
+  <Icon name="sun" class="theme-selector-light" />
+  <Icon name="moon" class="theme-selector-dark" />
+</theme-switcher>
+
+<style>
+  theme-switcher {
+    align-items: center;
+  }
+  .theme-selector-light,
+  .theme-selector-dark {
+    user-select: none;
+    z-index: 999999;
+    position: relative;
+    cursor: pointer;
+  }
+  .theme-selector-light:hover,
+  .theme-selector-dark:hover {
+    color: var(--sl-color-accent-high);
+  }
+  :root {
+    .theme-selector-light {
+      display: none;
+    }
+    .theme-selector-dark {
+      display: inline-block;
+    }
+  }
+  :root[data-theme='light'] {
+    .theme-selector-light {
+      display: inline-block;
+    }
+    .theme-selector-dark {
+      display: none;
+    }
+    .theme-selector-light:hover,
+    .theme-selector-dark:hover {
+      color: var(--sl-color-accent);
+    }
+  }
+</style>