Skip to content

Commit 7380ae7

Browse files
PuruVJPuruVJ
authored
User theme aware iframe (sveltejs#379)
1 parent 7ea6eed commit 7380ae7

File tree

6 files changed

+487
-399
lines changed

6 files changed

+487
-399
lines changed

‎content/tutorial/common/src/app.html‎

Lines changed: 28 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,10 @@
1919
--link-hover: hsl(208, 77%, 55%);
2020
--link-active: hsl(208, 77%, 40%);
2121
--border-radius: 4px;
22-
--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
23-
--font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
22+
--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
23+
'Open Sans', 'Helvetica Neue', sans-serif;
24+
--font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas,
25+
'DejaVu Sans Mono', monospace;
2426
background: var(--bg-1);
2527
color: var(--fg-1);
2628
font-family: var(--font);
@@ -107,14 +109,17 @@
107109
opacity: 0.4;
108110
}
109111

110-
input, textarea, select {
112+
input,
113+
textarea,
114+
select {
111115
padding: 0.5rem;
112116
border: 1px solid var(--bg-2);
113117
border-radius: var(--border-radius);
114118
box-sizing: border-box;
115119
}
116120

117-
input, textarea {
121+
input,
122+
textarea {
118123
background: var(--bg-1);
119124
}
120125

@@ -160,7 +165,7 @@
160165
text-decoration: none;
161166
}
162167

163-
nav a[aria-current="true"] {
168+
nav a[aria-current='true'] {
164169
border-bottom: 2px solid;
165170
}
166171

@@ -208,7 +213,7 @@
208213
border-radius: 5px;
209214
user-select: none;
210215
background: var(--bg-1);
211-
filter: drop-shadow(2px 3px 6px rgba(0,0,0,0.1));
216+
filter: drop-shadow(2px 3px 6px rgba(0, 0, 0, 0.1));
212217
transition: filter 0.2s, opacity 0.2s;
213218
}
214219

@@ -236,22 +241,27 @@
236241
opacity: 1;
237242
}
238243

239-
@media (prefers-color-scheme: dark) {
240-
body {
241-
--bg-1: hsl(0, 0%, 18%);
242-
--bg-2: hsl(0, 0%, 30%);
243-
--bg-3: hsl(0, 0%, 40%);
244-
--fg-1: hsl(0, 0%, 90%);
245-
--fg-2: hsl(0, 0%, 70%);
246-
--fg-3: hsl(0, 0%, 60%);
247-
--link: hsl(206, 96%, 72%);
248-
--link-hover: hsl(206, 96%, 78%);
249-
--link-active: hsl(206, 96%, 64%);
250-
}
244+
body.dark {
245+
--bg-1: hsl(0, 0%, 18%);
246+
--bg-2: hsl(0, 0%, 30%);
247+
--bg-3: hsl(0, 0%, 40%);
248+
--fg-1: hsl(0, 0%, 90%);
249+
--fg-2: hsl(0, 0%, 70%);
250+
--fg-3: hsl(0, 0%, 60%);
251+
--link: hsl(206, 96%, 72%);
252+
--link-hover: hsl(206, 96%, 78%);
253+
--link-active: hsl(206, 96%, 64%);
251254
}
252255
</style>
253256
</head>
254257
<body>
255258
<div style="display: contents">%sveltekit.body%</div>
259+
260+
<script>
261+
const theme = new URL(window.location).searchParams.get('theme');
262+
263+
document.body.classList.remove('light', 'dark');
264+
document.body.classList.add(theme || 'light');
265+
</script>
256266
</body>
257267
</html>

‎jsconfig.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"esModuleInterop": true,
77
"forceConsistentCasingInFileNames": true,
88
"lib": ["es2020", "DOM"],
9-
"moduleResolution": "node",
9+
"moduleResolution": "bundler",
1010
"module": "es2022",
1111
"resolveJsonModule": true,
1212
"skipLibCheck": true,

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
"@playwright/test": "^1.31.2",
1717
"@sveltejs/adapter-vercel": "2.3.1",
1818
"@sveltejs/kit": "^1.15.4",
19-
"@sveltejs/site-kit": "^4.0.1",
19+
"@sveltejs/site-kit": "^5.0.4",
2020
"@types/diff": "^5.0.2",
2121
"@types/marked": "^4.0.8",
2222
"@types/prismjs": "^1.26.0",

0 commit comments

Comments
 (0)