CalvinBackup/tauri-plugins-workspace
1
0
Fork 0
mirror of https://github.com/tauri-apps/plugins-workspace.git synced 2026-07-16 16:47:21 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore(example): set color-cheme (#3493)

Browse Source 
This allows the unstyled user agent elements (like the checkbox) match the selected theme colors
This commit is contained in:
Tony
2026-07-16 21:31:40 +08:00
committed by GitHub
parent d6e0b6bbb1
commit cdfd462955
3 changed files with 19 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/api/index.html
+3 -2
View File
@@ -1,12 +1,13 @@
<!doctype html>
<html lang="en" theme="dark">
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=0"
/>
<title>Svelte + Vite App</title>
<meta name="color-scheme" content="dark light" />
<title>API Example App</title>
</head>
<body>
examples/api/src/App.svelte
+9 -7
View File
@@ -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}
<span class="i-codicon-close animate-duration-300ms animate-fade-in"></span>
@@ -397,9 +401,7 @@
<br />
<div class="bg-white/5 h-2px"></div>
<br />
<div
class="flex flex-col overflow-y-auto children-flex-none gap-1"
>
<div class="flex flex-col overflow-y-auto children-flex-none gap-1">
{#each views as view}
<a
href="##"
examples/api/src/app.css
+7
View File
@@ -2,6 +2,13 @@
line-height: 1.5;
}
:root.dark {
color-scheme: dark;
}
:root.light {
color-scheme: light;
}
*:not(h1, h2, h3, h4, h5, h6) {
margin: 0;
padding: 0;