feat: dark mode support (#53)

This commit is contained in:
qier222 2020-10-25 21:04:33 +08:00 committed by GitHub
parent 4e482941ed
commit b655c59761
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
26 changed files with 301 additions and 181 deletions

View file

@ -50,11 +50,36 @@ export default {
<style lang="scss">
@import url("https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,500;0,600;0,700;0,800;0,900;1,500;1,600;1,700;1,800;1,900&display=swap");
:root {
--color-body-bg: #ffffff;
--color-text: #000;
--color-primary: #335eea;
--color-primary-bg: #eaeffd;
--color-secondary: #7a7a7b;
--color-secondary-bg: #f5f5f7;
--color-navbar-bg: rgba(255, 255, 255, 0.86);
}
[data-theme="dark"] {
--color-body-bg: #222222;
--color-text: #ffffff;
--color-primary: #335eea;
--color-primary-bg: #bbcdff;
--color-secondary: #7a7a7b;
--color-secondary-bg: #323232;
--color-navbar-bg: #335eea;
--color-navbar-bg: rgba(34, 34, 34, 0.86);
}
#app {
font-family: "Barlow", -apple-system, BlinkMacSystemFont, Helvetica Neue,
PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC,
WenQuanYi Micro Hei, sans-serif;
width: 100%;
transition: all 0.4s;
}
body {
background-color: var(--color-body-bg);
}
html {
@ -102,12 +127,13 @@ a {
::-webkit-scrollbar-track {
background: transparent;
border-left: 1px solid rgba(128, 128, 128, 0.18);
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgb(216, 216, 216);
background: var(--color-secondary-bg);
}
.slide-up-enter-active,