Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 7380ae7

Browse files
PuruVJPuruVJ
authoredMay 19, 2023
User theme aware iframe (#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",

‎pnpm-lock.yaml

Lines changed: 418 additions & 373 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/app.html

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,24 @@
77
<meta name="color-scheme" content="dark light" />
88
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#fff" />
99
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#2e2e2e" />
10-
<meta name="description" content="Learn Svelte and SvelteKit with an interactive browser-based tutorial" />
10+
<meta
11+
name="description"
12+
content="Learn Svelte and SvelteKit with an interactive browser-based tutorial"
13+
/>
1114
<link rel="manifest" href="/manifest.json" />
1215
%sveltekit.head%
1316
</head>
1417
<body data-sveltekit-preload-data="hover">
18+
<script>
19+
const themeValue = JSON.parse(localStorage.getItem('svelte:theme'))?.current;
20+
const systemPreferredTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
21+
? 'dark'
22+
: 'light';
23+
24+
document.body.classList.remove('light', 'dark');
25+
document.body.classList.add(themeValue ?? systemPreferredTheme);
26+
</script>
27+
1528
<div>%sveltekit.body%</div>
1629
</body>
1730
</html>

‎src/routes/tutorial/[slug]/Output.svelte

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<script>
2+
import { browser, dev } from '$app/environment';
23
import { afterNavigate } from '$app/navigation';
4+
import { theme } from '@sveltejs/site-kit/components';
35
import { onMount } from 'svelte';
4-
import { browser, dev } from '$app/environment';
56
import Chrome from './Chrome.svelte';
67
import Loading from './Loading.svelte';
78
import { base, error, logs, progress, subscribe } from './adapter';
@@ -37,6 +38,21 @@
3738
clearTimeout(timeout);
3839
});
3940
41+
/** @param {typeof $theme} $theme */
42+
function change_theme($theme) {
43+
if (!iframe) return;
44+
45+
try {
46+
const url = new URL(iframe.src);
47+
48+
url.searchParams.set('theme', $theme.current);
49+
50+
iframe.src = url.href;
51+
} catch {}
52+
}
53+
54+
$: change_theme($theme);
55+
4056
/** @type {any} */
4157
let timeout;
4258
@@ -80,7 +96,11 @@
8096
// would make back/forward traversal very annoying
8197
const parentNode = /** @type {HTMLElement} */ (iframe.parentNode);
8298
parentNode?.removeChild(iframe);
83-
iframe.src = src;
99+
100+
const url = new URL(src);
101+
url.searchParams.set('theme', $theme.current);
102+
103+
iframe.src = url.href;
84104
parentNode?.appendChild(iframe);
85105
}
86106
@@ -95,7 +115,7 @@
95115
<Chrome
96116
{path}
97117
{loading}
98-
href={$base && ($base + path)}
118+
href={$base && $base + path}
99119
on:refresh={() => {
100120
set_iframe_src($base + path);
101121
}}
@@ -158,7 +178,7 @@
158178
font-family: var(--font-mono);
159179
font-size: var(--sk-text-xs);
160180
padding: 1rem;
161-
background: rgba(255,255,255,0.5);
181+
background: rgba(255, 255, 255, 0.5);
162182
transform: translate(0, 100%);
163183
transition: transform 0.3s;
164184
backdrop-filter: blur(3px);
@@ -189,7 +209,7 @@
189209
190210
@media (prefers-color-scheme: dark) {
191211
.terminal {
192-
background: rgba(0,0,0,0.5);
212+
background: rgba(0, 0, 0, 0.5);
193213
}
194214
}
195215
</style>

1 commit comments

Comments
 (1)

vercel[bot] commented on May 19, 2023

@vercel[bot]
vercel[bot]
on May 19, 2023

Successfully deployed to the following URLs:

learn-svelte-dev – ./

learn-svelte-dev-svelte.vercel.app
learn-svelte-dev-git-main-svelte.vercel.app
learn-svelte-dev.vercel.app
learn.svelte.dev

Please sign in to comment.