@stainless-api/docs 0.1.0-beta.33 → 0.1.0-beta.34

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @stainless-api/docs
 
+## 0.1.0-beta.34
+
+### Patch Changes
+
+- f5173e9: fix: theme flickering
+
 ## 0.1.0-beta.33
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stainless-api/docs",
-  "version": "0.1.0-beta.33",
+  "version": "0.1.0-beta.34",
   "publishConfig": {
     "access": "public"
   },

package/stl-docs/components/ThemeSelect.astro

@@ -84,36 +84,36 @@ const options = [
   window.didInitThemePickers = window.didInitThemePickers ?? false;
 
   // Only run once.
-  if (window.didInitThemePickers) return;
-  window.didInitThemePickers = true;
-
-  // The stored theme will be either 'auto', 'light', 'dark' or null.
-  const storedTheme = typeof localStorage !== 'undefined' && localStorage.getItem('starlight-theme');
-
-  // This theme is either 'light' or 'dark'. It's used for setting the data-theme attribute.
-  const theme =
-    !storedTheme || storedTheme === 'auto'
-      ? window.matchMedia('(prefers-color-scheme: light)').matches
-        ? 'light'
-        : 'dark'
-      : storedTheme;
-
-  document.documentElement.dataset.theme = theme === 'light' ? 'light' : 'dark';
-
-  const themeSelects = document.querySelectorAll('[data-theme-select]');
-  const selectedThemeValue = storedTheme || 'auto';
-
-  themeSelects.forEach((select) => {
-    const tmpl = select.querySelector(`[data-value="${selectedThemeValue}"] template`);
-    const selectedSlot = select.querySelector('[data-part="trigger-selected"]');
-
-    selectedSlot.innerHTML = '';
-    if (tmpl) {
-      selectedSlot.appendChild(tmpl.content.cloneNode(true));
-      selectedSlot.removeAttribute('data-placeholder');
-      return;
-    }
-  });
+  if (!window.didInitThemePickers) {
+    window.didInitThemePickers = true;
+
+    // The stored theme will be either 'auto', 'light', 'dark' or null.
+    const storedTheme = typeof localStorage !== 'undefined' && localStorage.getItem('starlight-theme');
+
+    // This theme is either 'light' or 'dark'. It's used for setting the data-theme attribute.
+    const theme =
+      !storedTheme || storedTheme === 'auto'
+        ? window.matchMedia('(prefers-color-scheme: light)').matches
+          ? 'light'
+          : 'dark'
+        : storedTheme;
+
+    document.documentElement.dataset.theme = theme === 'light' ? 'light' : 'dark';
+
+    const themeSelects = document.querySelectorAll('[data-theme-select]');
+    const selectedThemeValue = storedTheme || 'auto';
+
+    themeSelects.forEach((select) => {
+      const tmpl = select.querySelector(`[data-value="${selectedThemeValue}"] template`);
+      const selectedSlot = select.querySelector('[data-part="trigger-selected"]');
+
+      selectedSlot.innerHTML = '';
+      if (tmpl) {
+        selectedSlot.appendChild(tmpl.content.cloneNode(true));
+        return;
+      }
+    });
+  }
 </script>
 
 <script>