Skip to content

Commit

Permalink
chore(sfc-playground): dark mode
Browse files Browse the repository at this point in the history
  • Loading branch information
yyx990803 committed Sep 7, 2021
1 parent d80d40a commit a5f1e67
Show file tree
Hide file tree
Showing 5 changed files with 60 additions and 34 deletions.
40 changes: 24 additions & 16 deletions packages/sfc-playground/index.html
@@ -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 changes: 3 additions & 3 deletions packages/sfc-playground/package.json
Expand Up @@ -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"
}
Expand Down
29 changes: 24 additions & 5 deletions packages/sfc-playground/src/Header.vue
Expand Up @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -150,17 +150,32 @@ 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;
display: flex;
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);
Expand Down Expand Up @@ -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;
Expand Down
1 change: 0 additions & 1 deletion packages/sfc-playground/src/main.ts
@@ -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')
18 changes: 9 additions & 9 deletions yarn.lock
Expand Up @@ -923,15 +923,15 @@
"@typescript-eslint/types" "4.30.0"
eslint-visitor-keys "^2.0.0"

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

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

"@zeit/schemas@2.6.0":
version "2.6.0"
Expand Down Expand Up @@ -6342,7 +6342,7 @@ vary@~1.1.2:
resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=

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

0 comments on commit a5f1e67

Please sign in to comment.