theluyuan/vue3-yuanma
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore(sfc-playground): dark mode

Browse Source
This commit is contained in:
Evan You
2021-09-07 00:29:18 -04:00
parent d80d40a9c1
commit a5f1e679e7
5 changed files with 60 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
packages/sfc-playground/index.html
View File

@@ -1,20 +1,28 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/svg" href="/logo.svg">
<title>Vue SFC Playground</title>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/svg" href="/logo.svg" />
<title>Vue SFC Playground</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap"
rel="stylesheet"
/>
<!-- process shim for @vue/compiler-sfc dependency -->
<script>window.process = { env: {} }</script>
<script type="module" src="/src/main.ts"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
<script>
// process shim for old versions of @vue/compiler-sfc dependency
window.process = { env: {} }
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.classList.add('dark')
}
</script>
<script type="module" src="/src/main.ts"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>

6
packages/sfc-playground/package.json
View File

@@ -8,11 +8,11 @@
"serve": "vite preview"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.2.0",
"vite": "^2.4.0"
"@vitejs/plugin-vue": "^1.6.0",
"vite": "^2.5.0"
},
"dependencies": {
"@vue/repl": "^0.1.0",
"@vue/repl": "^0.2.0",
"file-saver": "^2.0.5",
"jszip": "^3.6.0"
}

29
packages/sfc-playground/src/Header.vue
View File

@@ -102,7 +102,7 @@ async function fetchVersions(): Promise<string[]> {
<svg width="1.4em" height="1.4em" viewBox="0 0 24 24">
<g
fill="none"
stroke="#626262"
stroke="#666"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
@@ -117,7 +117,7 @@ async function fetchVersions(): Promise<string[]> {
</button>
<button class="download" @click="downloadProject(store)">
<svg width="1.7em" height="1.7em" viewBox="0 0 24 24">
<g fill="#626262">
<g fill="#666">
<rect x="4" y="18" width="16" height="2" rx="1" ry="1" />
<rect
x="3"
@@ -150,10 +150,15 @@ async function fetchVersions(): Promise<string[]> {
<style>
nav {
--bg: #fff;
--bg-light: #fff;
--border: #ddd;
color: var(--base);
height: var(--nav-height);
box-sizing: border-box;
padding: 0 1em;
background-color: #fff;
background-color: var(--bg);
box-shadow: 0 0 4px rgba(0, 0, 0, 0.33);
position: relative;
z-index: 999;
@@ -161,6 +166,16 @@ nav {
justify-content: space-between;
}
.dark nav {
--base: #ddd;
--bg: #1a1a1a;
--bg-light: #242424;
--border: #383838;
box-shadow: none;
border-bottom: 1px solid var(--border);
}
h1 {
margin: 0;
line-height: var(--nav-height);
@@ -218,13 +233,17 @@ h1 img {
border-top-color: var(--base);
}
.dark .version:hover .active-version:after {
border-top-color: #fff;
}
.versions {
display: none;
position: absolute;
left: 0;
top: 40px;
background-color: white;
border: 1px solid #ddd;
background-color: var(--bg-light);
border: 1px solid var(--border);
border-radius: 4px;
list-style-type: none;
padding: 8px;

1
packages/sfc-playground/src/main.ts
View File

@@ -1,6 +1,5 @@
import { createApp } from 'vue'
import App from './App.vue'
import '@vue/repl/style.css'
;(window as any).process = { env: {} }
createApp(App).mount('#app')