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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -8,11 +8,11 @@
"serve": "vite preview" "serve": "vite preview"
}, },
"devDependencies": { "devDependencies": {
"@vitejs/plugin-vue": "^1.2.0", "@vitejs/plugin-vue": "^1.6.0",
"vite": "^2.4.0" "vite": "^2.5.0"
}, },
"dependencies": { "dependencies": {
"@vue/repl": "^0.1.0", "@vue/repl": "^0.2.0",
"file-saver": "^2.0.5", "file-saver": "^2.0.5",
"jszip": "^3.6.0" "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"> <svg width="1.4em" height="1.4em" viewBox="0 0 24 24">
<g <g
fill="none" fill="none"
stroke="#626262" stroke="#666"
stroke-width="2" stroke-width="2"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
@ -117,7 +117,7 @@ async function fetchVersions(): Promise<string[]> {
</button> </button>
<button class="download" @click="downloadProject(store)"> <button class="download" @click="downloadProject(store)">
<svg width="1.7em" height="1.7em" viewBox="0 0 24 24"> <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="4" y="18" width="16" height="2" rx="1" ry="1" />
<rect <rect
x="3" x="3"
@ -150,10 +150,15 @@ async function fetchVersions(): Promise<string[]> {
<style> <style>
nav { nav {
--bg: #fff;
--bg-light: #fff;
--border: #ddd;
color: var(--base);
height: var(--nav-height); height: var(--nav-height);
box-sizing: border-box; box-sizing: border-box;
padding: 0 1em; padding: 0 1em;
background-color: #fff; background-color: var(--bg);
box-shadow: 0 0 4px rgba(0, 0, 0, 0.33); box-shadow: 0 0 4px rgba(0, 0, 0, 0.33);
position: relative; position: relative;
z-index: 999; z-index: 999;
@ -161,6 +166,16 @@ nav {
justify-content: space-between; 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 { h1 {
margin: 0; margin: 0;
line-height: var(--nav-height); line-height: var(--nav-height);
@ -218,13 +233,17 @@ h1 img {
border-top-color: var(--base); border-top-color: var(--base);
} }
.dark .version:hover .active-version:after {
border-top-color: #fff;
}
.versions { .versions {
display: none; display: none;
position: absolute; position: absolute;
left: 0; left: 0;
top: 40px; top: 40px;
background-color: white; background-color: var(--bg-light);
border: 1px solid #ddd; border: 1px solid var(--border);
border-radius: 4px; border-radius: 4px;
list-style-type: none; list-style-type: none;
padding: 8px; padding: 8px;

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

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

18
yarn.lock
View File

@ -923,15 +923,15 @@
"@typescript-eslint/types" "4.30.0" "@typescript-eslint/types" "4.30.0"
eslint-visitor-keys "^2.0.0" eslint-visitor-keys "^2.0.0"
"@vitejs/plugin-vue@^1.2.0": "@vitejs/plugin-vue@^1.6.0":
version "1.6.0" version "1.6.1"
resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-1.6.0.tgz#e5558e20c20e9098cd5bd65b9901fdcd2c354983" resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-1.6.1.tgz#a40a06661af61fdc1bebdfb811b28f50ad39dfb3"
integrity sha512-n3i8htn8pTg9M+kM3cnEfsPZx/6ngInlTroth6fA1LQTJq5aTVQ8ggaE5pPoAy9vCgHPtcaXMzwpldhqRAkebQ== integrity sha512-tX2Ju8fOyEtfstfmwjfSJcstTFXwzdFAUbYJ5bWWifvKIgbe6B0FbM8l3Wb7wOaaxKn4FYkii7WQnAPcsTqaIA==
"@vue/repl@^0.1.0": "@vue/repl@^0.2.0":
version "0.1.0" version "0.2.0"
resolved "https://registry.yarnpkg.com/@vue/repl/-/repl-0.1.0.tgz#9d37f0e8458b18737286785ea86456b8a60e3ee8" resolved "https://registry.yarnpkg.com/@vue/repl/-/repl-0.2.0.tgz#497a2377c1dda1fb032052e15d3ccc8f1a85c1bf"
integrity sha512-C1o7ZRJFDKjF7Hz94DVCg9XQL1gRG7+Iigu9HduNmS80LvBb6SJ6JiwOpPSV0UU/gDCt1r+Am9bUGEVj2D/fzw== integrity sha512-L8Fju0AdmFlcIK2JTprmeXU+SEppPd8TZtS+Le/PYlU6b8i3+PZ7Dt/ce/PI0MLR1BPPtRA0voPpM0wccYqHdQ==
"@zeit/schemas@2.6.0": "@zeit/schemas@2.6.0":
version "2.6.0" version "2.6.0"
@ -6342,7 +6342,7 @@ vary@~1.1.2:
resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc" resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw= integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
vite@^2.4.0: vite@^2.5.0:
version "2.5.3" version "2.5.3"
resolved "https://registry.yarnpkg.com/vite/-/vite-2.5.3.tgz#88d40a9efb9bec66bd87a7676c5689f35ff63742" resolved "https://registry.yarnpkg.com/vite/-/vite-2.5.3.tgz#88d40a9efb9bec66bd87a7676c5689f35ff63742"
integrity sha512-1wMDnjflvtTTkMov8O/Xb5+w1/VW/Gw8oCf8f6dqgHn8lMOEqq0SaPtFEQeikFcOKCfSbiU0nEi0LDIx6DNsaQ== integrity sha512-1wMDnjflvtTTkMov8O/Xb5+w1/VW/Gw8oCf8f6dqgHn8lMOEqq0SaPtFEQeikFcOKCfSbiU0nEi0LDIx6DNsaQ==