Skip to content

Commit a5f1e67

Browse files
yyx990803yyx990803
committed
chore(sfc-playground): dark mode
1 parent d80d40a commit a5f1e67

File tree

5 files changed

+60
-34
lines changed

5 files changed

+60
-34
lines changed

‎packages/sfc-playground/index.html

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,28 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<link rel="icon" type="image/svg" href="/logo.svg">
8-
<title>Vue SFC Playground</title>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="icon" type="image/svg" href="/logo.svg" />
8+
<title>Vue SFC Playground</title>
99

10-
<link rel="preconnect" href="https://fonts.gstatic.com">
11-
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap" rel="stylesheet">
10+
<link rel="preconnect" href="https://fonts.gstatic.com" />
11+
<link
12+
href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap"
13+
rel="stylesheet"
14+
/>
1215

13-
<!-- process shim for @vue/compiler-sfc dependency -->
14-
<script>window.process = { env: {} }</script>
15-
<script type="module" src="/src/main.ts"></script>
16-
</head>
17-
<body>
18-
<div id="app"></div>
19-
</body>
20-
</html>
16+
<script>
17+
// process shim for old versions of @vue/compiler-sfc dependency
18+
window.process = { env: {} }
19+
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
20+
document.documentElement.classList.add('dark')
21+
}
22+
</script>
23+
<script type="module" src="/src/main.ts"></script>
24+
</head>
25+
<body>
26+
<div id="app"></div>
27+
</body>
28+
</html>

‎packages/sfc-playground/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@
88
"serve": "vite preview"
99
},
1010
"devDependencies": {
11-
"@vitejs/plugin-vue": "^1.2.0",
12-
"vite": "^2.4.0"
11+
"@vitejs/plugin-vue": "^1.6.0",
12+
"vite": "^2.5.0"
1313
},
1414
"dependencies": {
15-
"@vue/repl": "^0.1.0",
15+
"@vue/repl": "^0.2.0",
1616
"file-saver": "^2.0.5",
1717
"jszip": "^3.6.0"
1818
}

‎packages/sfc-playground/src/Header.vue

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ async function fetchVersions(): Promise<string[]> {
102102
<svg width="1.4em" height="1.4em" viewBox="0 0 24 24">
103103
<g
104104
fill="none"
105-
stroke="#626262"
105+
stroke="#666"
106106
stroke-width="2"
107107
stroke-linecap="round"
108108
stroke-linejoin="round"
@@ -117,7 +117,7 @@ async function fetchVersions(): Promise<string[]> {
117117
</button>
118118
<button class="download" @click="downloadProject(store)">
119119
<svg width="1.7em" height="1.7em" viewBox="0 0 24 24">
120-
<g fill="#626262">
120+
<g fill="#666">
121121
<rect x="4" y="18" width="16" height="2" rx="1" ry="1" />
122122
<rect
123123
x="3"
@@ -150,17 +150,32 @@ async function fetchVersions(): Promise<string[]> {
150150

151151
<style>
152152
nav {
153+
--bg: #fff;
154+
--bg-light: #fff;
155+
--border: #ddd;
156+
157+
color: var(--base);
153158
height: var(--nav-height);
154159
box-sizing: border-box;
155160
padding: 0 1em;
156-
background-color: #fff;
161+
background-color: var(--bg);
157162
box-shadow: 0 0 4px rgba(0, 0, 0, 0.33);
158163
position: relative;
159164
z-index: 999;
160165
display: flex;
161166
justify-content: space-between;
162167
}
163168
169+
.dark nav {
170+
--base: #ddd;
171+
--bg: #1a1a1a;
172+
--bg-light: #242424;
173+
--border: #383838;
174+
175+
box-shadow: none;
176+
border-bottom: 1px solid var(--border);
177+
}
178+
164179
h1 {
165180
margin: 0;
166181
line-height: var(--nav-height);
@@ -218,13 +233,17 @@ h1 img {
218233
border-top-color: var(--base);
219234
}
220235
236+
.dark .version:hover .active-version:after {
237+
border-top-color: #fff;
238+
}
239+
221240
.versions {
222241
display: none;
223242
position: absolute;
224243
left: 0;
225244
top: 40px;
226-
background-color: white;
227-
border: 1px solid #ddd;
245+
background-color: var(--bg-light);
246+
border: 1px solid var(--border);
228247
border-radius: 4px;
229248
list-style-type: none;
230249
padding: 8px;

‎packages/sfc-playground/src/main.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { createApp } from 'vue'
22
import App from './App.vue'
33
import '@vue/repl/style.css'
4-
;(window as any).process = { env: {} }
54

65
createApp(App).mount('#app')

‎yarn.lock

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -923,15 +923,15 @@
923923
"@typescript-eslint/types" "4.30.0"
924924
eslint-visitor-keys "^2.0.0"
925925

926-
"@vitejs/plugin-vue@^1.2.0":
927-
version "1.6.0"
928-
resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-1.6.0.tgz#e5558e20c20e9098cd5bd65b9901fdcd2c354983"
929-
integrity sha512-n3i8htn8pTg9M+kM3cnEfsPZx/6ngInlTroth6fA1LQTJq5aTVQ8ggaE5pPoAy9vCgHPtcaXMzwpldhqRAkebQ==
926+
"@vitejs/plugin-vue@^1.6.0":
927+
version "1.6.1"
928+
resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-1.6.1.tgz#a40a06661af61fdc1bebdfb811b28f50ad39dfb3"
929+
integrity sha512-tX2Ju8fOyEtfstfmwjfSJcstTFXwzdFAUbYJ5bWWifvKIgbe6B0FbM8l3Wb7wOaaxKn4FYkii7WQnAPcsTqaIA==
930930

931-
"@vue/repl@^0.1.0":
932-
version "0.1.0"
933-
resolved "https://registry.yarnpkg.com/@vue/repl/-/repl-0.1.0.tgz#9d37f0e8458b18737286785ea86456b8a60e3ee8"
934-
integrity sha512-C1o7ZRJFDKjF7Hz94DVCg9XQL1gRG7+Iigu9HduNmS80LvBb6SJ6JiwOpPSV0UU/gDCt1r+Am9bUGEVj2D/fzw==
931+
"@vue/repl@^0.2.0":
932+
version "0.2.0"
933+
resolved "https://registry.yarnpkg.com/@vue/repl/-/repl-0.2.0.tgz#497a2377c1dda1fb032052e15d3ccc8f1a85c1bf"
934+
integrity sha512-L8Fju0AdmFlcIK2JTprmeXU+SEppPd8TZtS+Le/PYlU6b8i3+PZ7Dt/ce/PI0MLR1BPPtRA0voPpM0wccYqHdQ==
935935

936936
"@zeit/schemas@2.6.0":
937937
version "2.6.0"
@@ -6342,7 +6342,7 @@ vary@~1.1.2:
63426342
resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
63436343
integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
63446344

6345-
vite@^2.4.0:
6345+
vite@^2.5.0:
63466346
version "2.5.3"
63476347
resolved "https://registry.yarnpkg.com/vite/-/vite-2.5.3.tgz#88d40a9efb9bec66bd87a7676c5689f35ff63742"
63486348
integrity sha512-1wMDnjflvtTTkMov8O/Xb5+w1/VW/Gw8oCf8f6dqgHn8lMOEqq0SaPtFEQeikFcOKCfSbiU0nEi0LDIx6DNsaQ==

0 commit comments

Comments
 (0)