fix(site-kit): respect system theme preference

[theetrain]

Relates to #703.

Problem

system preference isn't respected when the user's system preference changes before returning to the site.

Issue reproduction:

1. Set system theme preference to 'light'
2. Ensure svelte.dev site theme is set to light (which gets stored as system)
3. Leave site, or open a different site
4. Set system theme preference to 'dark'
5. Return to svelte.dev
6. Observe site theme is still 'light'

This is a common occurrence for me since my system preference is 'auto', and when I return to the site in the evening (system theme is 'dark'), svelte.dev renders in light mode.

Solution

When loading the site with system as the set theme, ensure the appropriate system theme gets applied at startup.

Unfortunately, there is a flash during the system theme toggle recovery. I tried this alternative approach, but it's not any faster:

let query: MediaQueryList

if (browser && $theme.preference === 'system') {
  query = window.matchMedia('(prefers-color-scheme: dark)');
  setTheme(query);
}

$effect(() => {
  if ($theme.preference === 'system') {
    setTheme(query);

    return on(query, 'change', setTheme);
  }
});

I suppose replacing JS-based class-switching logic to CSS-based media queries or light-dark() would be an enhancement for another day.

A note on documentation PRs

If this is a documentation PR (i.e. changing content within apps/svelte.dev/content/docs), then this is the wrong repository to make those changes. The content in this folder is synced from other repositories. Therefore, these changes should be made in their respective repositories (at https://github.com/sveltejs/svelte or https://github.com/sveltejs/kit, or example).

Before submitting the PR, please make sure you do the following

• It's really useful if your PR references an issue where it is discussed ahead of time.
• Prefix your PR title with feat:, fix:, chore:, or docs:.
• This message body should clearly illustrate what problems it solves.