From cdfd462955f911f19f9dffa92c55c5b6a213ecb9 Mon Sep 17 00:00:00 2001 From: Tony <68118705+Legend-Master@users.noreply.github.com> Date: Thu, 16 Jul 2026 21:31:40 +0800 Subject: [PATCH] chore(example): set `color-cheme` (#3493) This allows the unstyled user agent elements (like the checkbox) match the selected theme colors --- examples/api/index.html | 5 +++-- examples/api/src/App.svelte | 16 +++++++++------- examples/api/src/app.css | 7 +++++++ 3 files changed, 19 insertions(+), 9 deletions(-) diff --git a/examples/api/index.html b/examples/api/index.html index 655165ea0..2cd1bfe5f 100644 --- a/examples/api/index.html +++ b/examples/api/index.html @@ -1,12 +1,13 @@ - + - Svelte + Vite App + + API Example App diff --git a/examples/api/src/App.svelte b/examples/api/src/App.svelte index 3d9f4987a..00b914810 100644 --- a/examples/api/src/App.svelte +++ b/examples/api/src/App.svelte @@ -186,9 +186,13 @@ function applyTheme() { const isDark = theme === 'auto' ? preferDark.current : theme === 'dark' - isDark - ? document.documentElement.classList.add('dark') - : document.documentElement.classList.remove('dark') + if (isDark) { + document.documentElement.classList.add('dark') + document.documentElement.classList.remove('light') + } else { + document.documentElement.classList.remove('dark') + document.documentElement.classList.add('light') + } setTheme(theme === 'auto' ? null : theme) localStorage.setItem('theme', theme) } @@ -331,7 +335,7 @@ id="sidebarToggle" bind:this={sidebarToggle} class="z-2000 hidden lt-sm:flex justify-center absolute items-center w-8 h-8 rd-8 - bg-accent dark:bg-darkAccent active:bg-accentDark dark:active:bg-darkAccentDark" + bg-accent dark:bg-darkAccent active:bg-accentDark dark:active:bg-darkAccentDark text-accentText dark:text-darkAccentText" > {#if isSideBarOpen} @@ -397,9 +401,7 @@

-
+
{#each views as view}