diff options
author | jeffreytse <jeffreytse.mail@gmail.com> | 2020-10-03 11:31:43 +0800 |
---|---|---|
committer | jeffreytse <jeffreytse.mail@gmail.com> | 2020-10-03 11:55:14 +0800 |
commit | ba1db7db3e7bf97de56909b1f13592172d550552 (patch) | |
tree | 32b0c1185a71626e54c8a085187d09672547e731 /_sass | |
parent | a1b848bb55ea525417daf77c1685bedda99abf3a (diff) |
feat: add night mode (#4)
Diffstat (limited to '_sass')
-rw-r--r-- | _sass/misc/theme-toggle.scss | 79 | ||||
-rw-r--r-- | _sass/yat.scss | 3 | ||||
-rw-r--r-- | _sass/yat/_dark.scss | 184 |
3 files changed, 265 insertions, 1 deletions
diff --git a/_sass/misc/theme-toggle.scss b/_sass/misc/theme-toggle.scss new file mode 100644 index 0000000..492eb0c --- /dev/null +++ b/_sass/misc/theme-toggle.scss @@ -0,0 +1,79 @@ +.theme-toggle { + position: relative; + width: 102px; + margin-top: 10px; + margin-right: 60px; + margin-left: auto; + transition: 0.1s all ease-in-out; + + label, .toggle { + border-radius: 100px; + } + + label { + display: block; + background-color: rgba(120,120,120,.15); + cursor: pointer; + } + + .toggle { + position: absolute; + width: 50%; + height: 100%; + background-color: #fff; + box-shadow: 0 2px 15px rgba(0,0,0,.15); + transition: transform .2s cubic-bezier(0.25, 0.46, 0.45, 0.94); + } + + .names { + font-size: 1em; + font-weight: bolder; + width: 76%; + margin-left: 12%; + position: relative; + display: flex; + justify-content: space-between; + user-select: none; + } + + .dark { + opacity: .5; + } + + p { + color: #acacac; + margin-bottom: 0; + line-height: 24px; + } + + [type="checkbox"] { + display: none; + } + + /* Toggle */ + [type="checkbox"]:checked ~ label .toggle { + transform: translateX(100%); + background-color: #34323D; + } + + [type="checkbox"]:checked ~ label .dark{ + opacity: 1; + } + + [type="checkbox"]:checked ~ label .light{ + opacity: .5; + } + + @include media-query(1024px) { + margin-right: 35px; + } + + @include media-query($on-palm) { + width: 94px; + margin-right: 20px; + + .names { + font-size: .85em; + } + } +} diff --git a/_sass/yat.scss b/_sass/yat.scss index 25a193a..a18f949 100644 --- a/_sass/yat.scss +++ b/_sass/yat.scss @@ -61,7 +61,8 @@ $on-laptop: 800px !default; @import "yat/base", "yat/layout", - // "yat/syntax-highlighting", + "yat/dark", + "misc/theme-toggle", "misc/article-menu", "misc/common-list", "misc/google-translate" diff --git a/_sass/yat/_dark.scss b/_sass/yat/_dark.scss new file mode 100644 index 0000000..63f4880 --- /dev/null +++ b/_sass/yat/_dark.scss @@ -0,0 +1,184 @@ +$dark-background-color: #0e0e0e !default; + +html[data-theme="dark"] { + + &[data-scroll-status='top'] { + .site-footer-inner { + border-top: solid 1px #2f2f2f !important; + transition: 0s; + } + } + + body { + color: #bbb; + background-color: $dark-background-color; + } + + *:not(pre) > code { + background-color: #545454; + } + + table { + color: #9d9d9d; + + th { + background-color: #000; + } + + tr:nth-child(even) { + background-color: #111; + } + } + + .site-header { + background-color: #090909; + + .site-brand { + .site-brand-inner { + &, &:visited { + color: #f8f8f8; + } + } + } + + .site-nav .page-link { + color: #f8f8f8; + } + + .ct-language-dropdown { + color: #f8f8f8; + background-color: $dark-background-color; + } + + .ct-language-selected, .ct-language-dropdown li:hover { + background-color: #222 !important; + } + } + + .site-footer { + color: #fff; + background-color: #000; + } + + .left-vsplit:before { + background-color: #9a9a9a; + } + + .page-banner { + .page-banner-img { + & > *:first-child { + opacity: 0.8; + } + } + } + + .pagination { + .post-link { + color: #bbb; + } + + .post-title { + a:visited:after { + background-color: $dark-background-color; + } + + a:after { + color: $dark-background-color; + } + } + + .post-list { + & > li:not(:last-child) { + border-bottom: 1px solid #545454; + } + } + + .post-tags .post-tag:hover { + color: #d7d7d7; + } + } + + .page-segments { + li { + a { + color: #ddd; + } + + a:visited:after { + background-color: $dark-background-color; + } + + a:after { + color: $dark-background-color; + } + } + } + + .post .post-content { + img:not([raw]) { + background-color: #ffffff33; + } + } + + .post-related { + & > *:first-child { + color: #d7d7d7; + } + + a:visited:after { + background-color: $dark-background-color; + } + + a:after { + color: $dark-background-color; + } + + a:hover { + color: #aaa; + } + } + + .common-list { + li { + border-bottom: solid 1px #40404088; + + a { + color: #aaa; + } + + a:hover { + background-color: #272727; + } + + span { + background-color: #333; + } + } + } + + .post-menu { + .post-menu-title { + color: #ddd; + } + + .post-menu-content { + ul { + border-left: 1px solid #787878; + + .active { + background-color: #2d2d2d; + border-left: 2px solid #aaa; + } + + a { + color: #bbb; + } + + a:hover { + color: #fff !important; + } + } + } + } +} + |