Custom the dark mode storageKey.

[sgalcheung]

What version of starlight are you using?

0.34.0

What is your idea?

When I used <StarlightPage>, I also wanted to sync the dark mode in the main website and Starlight Page.

Why is this feature necessary?

Add a custom point to manage the key, so that we won't have redundant local keys.

Here is an example:
https://github.com/sgalcheung/ScrewFast/blob/main/src/components/ui/starlight/ThemeSelect.astro
https://github.com/sgalcheung/ScrewFast/blob/main/src/components/ui/starlight/MobileMenuFooter.astro

To sync the theme storage key, we have to replace two components.

Do you have examples of this feature in other projects?

• https://github.com/pacocoursey/next-themes/blob/main/next-themes/__tests__/index.test.tsx#L192
• https://github.com/donavon/use-dark-mode/blob/29590271bb3a74f08975181c5ed68bd5a210ef83/__tests__/index.test.js#L187

Participation

• I am willing to submit a pull request for this feature.

Here is an implementation example:
Add a zod field themStorageKey to user-config.ts

// ThemeSelect.astro
<script>
import config from 'virtual:starlight/user-config';

-const storageKey = 'starlight-theme';
+const storageKey = config.themStorageKey;

</script>

// astro.config.mjs
starlight({
      themStorageKey: "Custom key",
}),