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> <!doctype html>
<html lang="en" theme="dark"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta <meta
name="viewport" name="viewport"
content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=0" 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> </head>
<body> <body>
examples/api/src/App.svelte
+9 -7
View File
@@ -186,9 +186,13 @@
function applyTheme() { function applyTheme() {
const isDark = theme === 'auto' ? preferDark.current : theme === 'dark' const isDark = theme === 'auto' ? preferDark.current : theme === 'dark'
isDark if (isDark) {
? document.documentElement.classList.add('dark') document.documentElement.classList.add('dark')
: document.documentElement.classList.remove('dark') document.documentElement.classList.remove('light')
} else {
document.documentElement.classList.remove('dark')
document.documentElement.classList.add('light')
}
setTheme(theme === 'auto' ? null : theme) setTheme(theme === 'auto' ? null : theme)
localStorage.setItem('theme', theme) localStorage.setItem('theme', theme)
} }
@@ -331,7 +335,7 @@
id="sidebarToggle" id="sidebarToggle"
bind:this={sidebarToggle} bind:this={sidebarToggle}
class="z-2000 hidden lt-sm:flex justify-center absolute items-center w-8 h-8 rd-8 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} {#if isSideBarOpen}
<span class="i-codicon-close animate-duration-300ms animate-fade-in"></span> <span class="i-codicon-close animate-duration-300ms animate-fade-in"></span>
@@ -397,9 +401,7 @@
<br /> <br />
<div class="bg-white/5 h-2px"></div> <div class="bg-white/5 h-2px"></div>
<br /> <br />
<div <div class="flex flex-col overflow-y-auto children-flex-none gap-1">
class="flex flex-col overflow-y-auto children-flex-none gap-1"
>
{#each views as view} {#each views as view}
<a <a
href="##" href="##"
examples/api/src/app.css
+7
View File
@@ -2,6 +2,13 @@
line-height: 1.5; line-height: 1.5;
} }
:root.dark {
color-scheme: dark;
}
:root.light {
color-scheme: light;
}
*:not(h1, h2, h3, h4, h5, h6) { *:not(h1, h2, h3, h4, h5, h6) {
margin: 0; margin: 0;
padding: 0; padding: 0;