Add theme initialization to all pages

Initially just a swap between light and dark, but can optionally have more later

astro/src/js/theme.ts

@@ -0,0 +1,37 @@
+import { writable } from 'svelte/store';
+
+/**
+ * Creates a writable store for the theme
+ * @return {WritableStore<'dark' | 'light'>} Returns a writable store
+ */
+function createThemeStore() {
+ const { subscribe, set } = writable();
+
+ return {
+ subscribe,
+ set(theme: 'dark' | 'light') {
+ if ('localStorage' in window) {
+ localStorage.setItem('theme', theme);
+ }
+ set(theme);
+ },
+ init() {
+ let theme;
+ if ('localStorage' in window) {
+ theme = localStorage.getItem('theme') || null;
+ }
+
+ if (theme === null) {
+ theme =
+ window.matchMedia &&
+ window.matchMedia('(prefers-color-scheme: dark)').matches
+ ? 'dark'
+ : 'light';
+ }
+
+ set(theme);
+ },
+ };
+}
+
+export const theme = createThemeStore();

astro/src/layouts/wrapper.astro

@@ -87,6 +87,11 @@ const microcopy = getMicrocopy(locale.code);
  <SubscribeFooter lang={locale.code} />
  <Footer lang={locale.code} />
 
+ <script>
+ import { theme } from '$js/theme';
+ theme.init();
+ </script>
+
  <!-- Cookie Disclaimer -->
 
  <!-- Global site tag (gtag.js) - Google Analytics -->