Initial design based off original website, some things still to do

src/components/ThemeSelect.astro

@@ -0,0 +1,35 @@
+---
+const { class: providedClasses, selectClass, optionClass } = Astro.props;
+---
+
+<theme-selector class:list={[providedClasses]}></theme-selector>
+<script is:inline define:vars={{ selectClass, optionClass }}>
+  if (!customElements.get("theme-selector")) {
+    customElements.define(
+      "theme-selector",
+      class extends HTMLElement {
+        connectedCallback() {
+          this.innerHTML = `
+            <select name="theme-select" class=${selectClass}>
+              <option value="auto" class=${optionClass}>Auto</option>
+              <option value="light" class=${optionClass}>Light</option>
+              <option value="dark" class=${optionClass}>Dark</option>
+            </select>
+          `;
+          this.querySelector("select").onchange = (event) =>
+            theme.setTheme(event.target.value);
+          this.setAttribute("aria-label", "Select Theme");
+          this.updateSelectedTheme();
+
+          document.addEventListener("theme-changed", (event) => {
+            this.updateSelectedTheme(event.detail.theme);
+          });
+        }
+
+        updateSelectedTheme(newTheme = theme.getTheme()) {
+          this.querySelector("select").value = newTheme;
+        }
+      }
+    );
+  }
+</script>