Skip to content

Commit 524688b

Browse files
yyx990803yyx990803
committed
chore(sfc-playground): add dark mode toggle
1 parent bdb1a79 commit 524688b

File tree

6 files changed

+108
-44
lines changed

6 files changed

+108
-44
lines changed

‎packages/sfc-playground/index.html

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,11 @@
99
<script>
1010
// process shim for old versions of @vue/compiler-sfc dependency
1111
window.process = { env: {} }
12-
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
12+
const saved = localStorage.getItem('vue-sfc-playground-prefer-dark')
13+
if (
14+
saved !== 'false' ||
15+
window.matchMedia('(prefers-color-scheme: dark)').matches
16+
) {
1317
document.documentElement.classList.add('dark')
1418
}
1519
</script>

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

Lines changed: 39 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
<script setup lang="ts">
22
import { downloadProject } from './download/download'
33
import { ref, onMounted } from 'vue'
4+
import Sun from './icons/Sun.vue'
5+
import Moon from './icons/Moon.vue'
6+
import Share from './icons/Share.vue'
7+
import Download from './icons/Download.vue'
48
59
// @ts-ignore
610
const { store } = defineProps(['store'])
@@ -35,6 +39,15 @@ async function copyLink() {
3539
alert('Sharable URL has been copied to clipboard.')
3640
}
3741
42+
function toggleDark() {
43+
const cls = document.documentElement.classList
44+
cls.toggle('dark')
45+
localStorage.setItem(
46+
'vue-sfc-playground-prefer-dark',
47+
String(cls.contains('dark'))
48+
)
49+
}
50+
3851
onMounted(async () => {
3952
window.addEventListener('click', () => {
4053
expanded.value = false
@@ -98,51 +111,13 @@ async function fetchVersions(): Promise<string[]> {
98111
</li>
99112
</ul>
100113
</div>
101-
<button class="share" @click="copyLink">
102-
<svg width="1.4em" height="1.4em" viewBox="0 0 24 24">
103-
<g
104-
fill="none"
105-
stroke="#666"
106-
stroke-width="2"
107-
stroke-linecap="round"
108-
stroke-linejoin="round"
109-
>
110-
<circle cx="18" cy="5" r="3" />
111-
<circle cx="6" cy="12" r="3" />
112-
<circle cx="18" cy="19" r="3" />
113-
<path d="M8.59 13.51l6.83 3.98" />
114-
<path d="M15.41 6.51l-6.82 3.98" />
115-
</g>
116-
</svg>
114+
<button class="toggle-dark" @click="toggleDark">
115+
<Sun class="light" />
116+
<Moon class="dark" />
117117
</button>
118+
<button class="share" @click="copyLink"><Share /></button>
118119
<button class="download" @click="downloadProject(store)">
119-
<svg width="1.7em" height="1.7em" viewBox="0 0 24 24">
120-
<g fill="#666">
121-
<rect x="4" y="18" width="16" height="2" rx="1" ry="1" />
122-
<rect
123-
x="3"
124-
y="17"
125-
width="4"
126-
height="2"
127-
rx="1"
128-
ry="1"
129-
transform="rotate(-90 5 18)"
130-
/>
131-
<rect
132-
x="17"
133-
y="17"
134-
width="4"
135-
height="2"
136-
rx="1"
137-
ry="1"
138-
transform="rotate(-90 19 18)"
139-
/>
140-
<path
141-
d="M12 15a1 1 0 0 1-.58-.18l-4-2.82a1 1 0 0 1-.24-1.39a1 1 0 0 1 1.4-.24L12 12.76l3.4-2.56a1 1 0 0 1 1.2 1.6l-4 3a1 1 0 0 1-.6.2z"
142-
/>
143-
<path d="M12 13a1 1 0 0 1-1-1V4a1 1 0 0 1 2 0v8a1 1 0 0 1-1 1z" />
144-
</g>
145-
</svg>
120+
<Download />
146121
</button>
147122
</div>
148123
</nav>
@@ -192,6 +167,12 @@ h1 img {
192167
top: -2px;
193168
}
194169
170+
@media (max-width: 560px) {
171+
h1 span {
172+
font-size: 0.9em;
173+
}
174+
}
175+
195176
@media (max-width: 480px) {
196177
h1 span {
197178
display: none;
@@ -229,6 +210,21 @@ h1 img {
229210
top: 22px;
230211
}
231212
213+
.toggle-dark svg {
214+
width: 18px;
215+
height: 18px;
216+
fill: #666;
217+
}
218+
219+
.toggle-dark .dark,
220+
.dark .toggle-dark .light {
221+
display: none;
222+
}
223+
224+
.dark .toggle-dark .dark {
225+
display: inline-block;
226+
}
227+
232228
.version:hover .active-version:after {
233229
border-top-color: var(--base);
234230
}

‎packages/sfc-playground/src/icons/Download.vue

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<svg width="1.7em" height="1.7em" viewBox="0 0 24 24">
3+
<g fill="#666">
4+
<rect x="4" y="18" width="16" height="2" rx="1" ry="1" />
5+
<rect
6+
x="3"
7+
y="17"
8+
width="4"
9+
height="2"
10+
rx="1"
11+
ry="1"
12+
transform="rotate(-90 5 18)"
13+
/>
14+
<rect
15+
x="17"
16+
y="17"
17+
width="4"
18+
height="2"
19+
rx="1"
20+
ry="1"
21+
transform="rotate(-90 19 18)"
22+
/>
23+
<path
24+
d="M12 15a1 1 0 0 1-.58-.18l-4-2.82a1 1 0 0 1-.24-1.39a1 1 0 0 1 1.4-.24L12 12.76l3.4-2.56a1 1 0 0 1 1.2 1.6l-4 3a1 1 0 0 1-.6.2z"
25+
/>
26+
<path d="M12 13a1 1 0 0 1-1-1V4a1 1 0 0 1 2 0v8a1 1 0 0 1-1 1z" />
27+
</g>
28+
</svg>
29+
</template>

‎packages/sfc-playground/src/icons/Moon.vue

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<template>
2+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
3+
<path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z" />
4+
</svg>
5+
</template>

‎packages/sfc-playground/src/icons/Share.vue

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<template>
2+
<svg width="1.4em" height="1.4em" viewBox="0 0 24 24">
3+
<g
4+
fill="none"
5+
stroke="#666"
6+
stroke-width="2"
7+
stroke-linecap="round"
8+
stroke-linejoin="round"
9+
>
10+
<circle cx="18" cy="5" r="3" />
11+
<circle cx="6" cy="12" r="3" />
12+
<circle cx="18" cy="19" r="3" />
13+
<path d="M8.59 13.51l6.83 3.98" />
14+
<path d="M15.41 6.51l-6.82 3.98" />
15+
</g>
16+
</svg>
17+
</template>

‎packages/sfc-playground/src/icons/Sun.vue

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<template>
2+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
3+
<path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z" />
4+
<path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z" />
5+
<path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z" />
6+
<path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z" />
7+
<path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z" />
8+
<path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z" />
9+
<path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z" />
10+
<path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z" />
11+
<path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z" />
12+
</svg>
13+
</template>

0 commit comments

Comments
 (0)