This commit is contained in:
xaoxuu 2021-04-02 20:24:16 +08:00
parent f6b22a26f8
commit 16b25112b2
20 changed files with 153 additions and 169 deletions

View File

@ -168,9 +168,8 @@ plugins:
interval: 100 # ms interval: 100 # ms
scale: 1 # 0.1~1 scale: 1 # 0.1~1
darkmode: style:
enable: #true darkmode: auto # set 'auto' to enable, set 'false' to disable
js: /js/plugins/darkmode.js
default: default:
avatar: https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/avatar/round/3442075.svg avatar: https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/avatar/round/3442075.svg

View File

@ -121,9 +121,6 @@
if ('<%- theme.plugins.preload.enable %>' == 'true') { if ('<%- theme.plugins.preload.enable %>' == 'true') {
stellar.plugins.preload = Object.assign(<%- JSON.stringify(theme.plugins.preload) %>); stellar.plugins.preload = Object.assign(<%- JSON.stringify(theme.plugins.preload) %>);
} }
if ('<%- theme.plugins.darkmode.enable %>' == 'true') {
stellar.plugins.darkmode = Object.assign(<%- JSON.stringify(theme.plugins.darkmode) %>);
}
</script> </script>
<!-- required --> <!-- required -->

View File

@ -2,7 +2,7 @@
// 默认组件 // 默认组件
if (page.sidebar == undefined) { if (page.sidebar == undefined) {
if (page.layout == 'post' && page.content) { if (page.layout == 'post' && page.content) {
page.sidebar = ['toc', 'recent']; page.sidebar = ['toc'];
} else if (page.layout == 'wiki' && page.content) { } else if (page.layout == 'wiki' && page.content) {
page.sidebar = ['toc', 'wiki_more']; page.sidebar = ['toc', 'wiki_more'];
} else { } else {

View File

@ -30,9 +30,6 @@ function layout_toc() {
<%- __('meta.toc') %> <%- __('meta.toc') %>
<% } %> <% } %>
</span> </span>
<a class='cap-action' id='s-top' title='<%- __("meta.back_to_top") %>' href='#start'>
<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10505"><path d="M884.526 163.323H208.881c-30.516 0-55.25 24.934-55.25 55.685s24.734 55.685 55.25 55.685h675.645c30.515 0 55.255-24.93 55.255-55.685s-24.74-55.685-55.255-55.685zM568.253 336.87a56.765 56.765 0 0 0-4.06-3.701c-0.63-0.517-1.29-0.968-1.935-1.454-0.799-0.605-1.577-1.224-2.406-1.787-0.779-0.528-1.583-0.978-2.386-1.46-0.748-0.45-1.485-0.926-2.253-1.341-0.81-0.44-1.649-0.814-2.483-1.208-0.8-0.384-1.588-0.784-2.407-1.132-0.814-0.338-1.643-0.61-2.463-0.906-0.875-0.323-1.745-0.66-2.641-0.932-0.825-0.25-1.66-0.435-2.489-0.645-0.916-0.236-1.817-0.492-2.75-0.681-0.962-0.19-1.935-0.307-2.902-0.445-0.814-0.118-1.618-0.272-2.442-0.354a55.163 55.163 0 0 0-5.438-0.276h-0.015c-0.267 0-0.528 0.036-0.794 0.036a54.856 54.856 0 0 0-39.86 16.271l-279.413 281.61c-21.576 21.75-21.576 57.006 0 78.756a54.876 54.876 0 0 0 39.07 16.312 54.835 54.835 0 0 0 39.066-16.312l186.67-188.145V898.09c0 30.75 24.74 55.685 55.256 55.685s55.255-24.934 55.255-55.685v-387.42L769.526 697.22a54.871 54.871 0 0 0 39.065 16.312 54.835 54.835 0 0 0 39.066-16.312c21.576-21.75 21.576-57.006 0-78.756L568.253 336.87z" p-id="10506"></path></svg>
</a>
</div> </div>
<div class='widget-body fs14 <%- page.layout == "wiki" ? "wiki" : "post" %>'> <div class='widget-body fs14 <%- page.layout == "wiki" ? "wiki" : "post" %>'>
<% if (page.layout == 'wiki' && page.wiki) { %> <% if (page.layout == 'wiki' && page.wiki) { %>

View File

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang='<%- page.lang %>'> <html lang='<%- page.lang %>'>
<%- partial('_partial/head') %> <%- partial('_partial/head') %>
<body theme='<%- page.dark ? "dark" : "light" %>'> <body>
<%- partial('_partial/main/article/wiki_cover') %> <%- partial('_partial/main/article/wiki_cover') %>
<div class='l_body' id='start'> <div class='l_body' id='start'>
<aside class='l_left'> <aside class='l_left'>

View File

@ -1,7 +1,9 @@
body[theme='light'] :root
--blur-bg: alpha(white, .5) --blur-bg: alpha(white, .5)
body[theme='dark'] if hexo-config('style.darkmode') == 'auto'
--blur-bg: alpha(black, .5) @media (prefers-color-scheme: dark)
:root
--blur-bg: alpha(black, .5)
.blur .blur
background: var(--blur-bg) background: var(--blur-bg)
@supports ((-webkit-backdrop-filter:blur(12px)) or (backdrop-filter:blur(12px))) @supports ((-webkit-backdrop-filter:blur(12px)) or (backdrop-filter:blur(12px)))

View File

@ -34,7 +34,7 @@ h6
margin: 2rem 1rem 0rem margin: 2rem 1rem 0rem
.post-title .post-title
font-weight: 500 font-weight: 500
margin: 1rem 0 margin: 0.5rem 0
line-height: 1.2 line-height: 1.2
font-size: $fs-h3 font-size: $fs-h3
border-bottom: none border-bottom: none

View File

@ -10,20 +10,22 @@ $color-inlinecode = #ff7043
$color-cat = #FF7844 $color-cat = #FF7844
$color-cat-hover = darken($color-cat, 20) $color-cat-hover = darken($color-cat, 20)
// //
$c-site-bg-light = #f8f8f8 $light-site-bg = #f8f8f8
$c-block-light = #f2f2f2 $light-block = #f2f2f2
$c-title-light = #000 $light-title = #000
$c-text-light = #222 $light-text = #222
$c-card-light = white $light-card = white
// //
$c-site-bg-dark = black $dark-site-bg = #20252B
$c-block-dark = #111 $dark-block = #40454B
$c-title-dark = #fff $dark-title = #fff
$c-text-dark = #fff $dark-text = #eee
$c-card-dark = #333 $dark-card = #2E353D
// OLED
$dark-site-bg-mobile = black
// @font-face // @font-face
@ -59,7 +61,7 @@ $border-block = 4px
// //
:root :root
--width-left: 280px --width-left: 256px
--width-main: 680px --width-main: 680px
--gap-l: 16px --gap-l: 16px
// desktop or larger // desktop or larger

View File

@ -1,44 +1,36 @@
:root :root
--site-bg: $c-site-bg-light --site-bg: $light-site-bg
--block: $c-block-light --block: $light-block
--block-border: mix($c-block-light, $c-text-light, 95) --block-border: darken($light-block, 5)
--block-hover: mix($c-block-light, $c-text-light, 98) --block-hover: darken($light-block, 2)
--text-p0: $c-title-light --text-p0: $light-title
--text-p1: $c-text-light --text-p1: $light-text
--text-p2: mix($c-text-light, $c-site-bg-light, 80) --text-p2: mix($light-text, $light-site-bg, 80)
--text-p3: mix($c-text-light, $c-site-bg-light, 60) --text-p3: mix($light-text, $light-site-bg, 60)
--text-meta: mix($c-text-light, $c-site-bg-light, 20) --text-meta: mix($light-text, $light-site-bg, 20)
--card: $c-card-light --card: $light-card
--theme-highlight: darken($color-theme, 5) --theme-highlight: darken($color-theme, 5)
--theme-bg: mix($color-theme, $c-card-light, 10) --theme-bg: mix($color-theme, $light-card, 10)
// dark if hexo-config('style.darkmode') == 'auto'
body[theme='dark'] // dark
--site-bg: $c-site-bg-dark @media (prefers-color-scheme: dark)
--block: $c-block-dark :root
--block-border: mix($c-block-dark, $c-text-dark, 90) --site-bg: $dark-site-bg
--block-hover: mix($c-block-dark, $c-text-dark, 95) --block: $dark-block
--text-p0: $c-title-dark --block-border: lighten($dark-block, 10)
--text-p1: $c-text-dark --block-hover: darken($dark-block, 1)
--text-p2: mix($c-text-dark, $c-site-bg-dark, 70) --text-p0: $dark-title
--text-p3: mix($c-text-dark, $c-site-bg-dark, 45) --text-p1: $dark-text
--text-meta: mix($c-text-dark, $c-site-bg-dark, 30) --text-p2: mix($dark-text, $dark-site-bg, 70)
--card: $c-card-dark --text-p3: mix($dark-text, $dark-site-bg, 45)
--theme-highlight: $color-theme --text-meta: mix($dark-text, $dark-site-bg, 30)
--theme-bg: mix($color-theme, $c-card-dark, 10) --card: $dark-card
--theme-highlight: $color-theme
--theme-bg: mix($color-theme, $dark-card, 10)
@media screen and (max-width: $device-tablet)
--site-bg: $dark-site-bg-mobile
// dark @media (prefers-color-scheme: dark)
@media (prefers-color-scheme: dark) html
:root filter: brightness(80%) !important
--site-bg: $c-site-bg-dark
--block: $c-block-dark
--block-border: mix($c-block-dark, $c-text-dark, 90)
--block-hover: mix($c-block-dark, $c-text-dark, 95)
--text-p0: $c-title-dark
--text-p1: $c-text-dark
--text-p2: mix($c-text-dark, $c-site-bg-dark, 70)
--text-p3: mix($c-text-dark, $c-site-bg-dark, 45)
--text-meta: mix($c-text-dark, $c-site-bg-dark, 30)
--card: $c-card-dark
--theme-highlight: $color-theme
--theme-bg: mix($color-theme, $c-card-dark, 10)

View File

@ -41,7 +41,7 @@
max-width: 100% max-width: 100%
.l_body.mobile .l_body.mobile
.l_left .l_left
transition: transform .5s ease-out transition: transform .3s ease-out
.l_body.mobile.sidebar .l_body.mobile.sidebar
.l_left .l_left
transform: translateX(0px) transform: translateX(0px)

View File

@ -1,22 +1,28 @@
.l_main .l_main
position: relative position: relative
padding-bottom: "calc(1 * %s)" % var(--gap-l) padding-bottom: "calc(1 * %s)" % var(--gap-l)
@media screen and (min-width: 1200px)
margin-left: "calc(2 * %s)" % var(--gap-l)
margin-right: "calc(0.75 * %s)" % var(--width-left)
@media screen and (min-width: $device-tablet) @media screen and (min-width: $device-tablet)
padding-top: "calc(2 * %s)" % var(--gap-l) padding-top: "calc(2 * %s)" % var(--gap-l)
header header
margin: 2rem 1rem 1rem padding: 2rem 1rem 0
padding: 0.25rem border-bottom: 2px solid var(--block)
background: var(--block) margin-bottom: 1.5rem
border-radius: 6px
.logo-wrap .logo-wrap
margin: 0.5rem 0.75rem margin: 0.5rem 0
.avatar nav.menu
width: 32px background: none
height: 32px padding: 0
border: none justify-content: space-between
.title a.nav-item
font-size: 1.5rem margin: 0
nav.menu margin-bottom: -2px
margin: -3px padding: 0.5rem 1rem
a.nav-item border-radius: 0
margin: 2px border-bottom: 2px solid var(--block)
a.nav-item.active, a.nav-item:hover
background: none
color: $color-theme
border-bottom-color: $color-theme

View File

@ -18,6 +18,8 @@ article.md.content
margin-top: 0.5rem margin-top: 0.5rem
line-height: 1.2 line-height: 1.2
color: var(--text-p0) color: var(--text-p0)
h2:first-child
margin-top: 0
h2,h3,h4,h5,h6 h2,h3,h4,h5,h6
color: var(--text-p0) color: var(--text-p0)
padding-top: 1rem padding-top: 1rem
@ -37,8 +39,6 @@ article.md
margin-top: 3rem margin-top: 3rem
border-bottom: 1px solid var(--block-border) border-bottom: 1px solid var(--block-border)
font-weight: 400 font-weight: 400
&:first-child
margin-top: 0
h3 h3
margin-top: 1.5rem margin-top: 1.5rem
font-weight: 400 font-weight: 400

View File

@ -24,3 +24,6 @@
transform: translateY(-1px) transform: translateY(-1px)
background: linear-gradient(145deg, #ddd, #fff) background: linear-gradient(145deg, #ddd, #fff)
box-shadow: 2px 4px 8px #ddd, -2px -4px 8px #fff box-shadow: 2px 4px 8px #ddd, -2px -4px 8px #fff
if hexo-config('style.darkmode') == 'auto'
@media (prefers-color-scheme: dark)
box-shadow: none

View File

@ -62,13 +62,13 @@ nav.menu
overflow: hidden overflow: hidden
padding: 0.375rem 0.75rem padding: 0.375rem 0.75rem
color: var(--text-p3) color: var(--text-p3)
text-align: center
&.active, &:hover &.active, &:hover
color: var(--text-p1) color: var(--text-p1)
background: var(--card) background: var(--card)
.l_left .menu a.nav-item .l_left .menu a.nav-item
flex-grow: 1 flex-grow: 1
text-align: center
.l_left .widgets .l_left .widgets
margin: 1rem 0 margin: 1rem 0

View File

@ -1,5 +1,6 @@
// toc padding // toc padding
#toc .widget-body #toc .widget-body
border-left: 2px solid var(--block-hover)
line-height: 1.2 line-height: 1.2
ul ul, ul ol ul ul, ul ol
padding-left: 0 padding-left: 0
@ -56,7 +57,6 @@
color: var(--theme-highlight) !important color: var(--theme-highlight) !important
#toc .doc-tree #toc .doc-tree
border-left: 2px solid var(--block-hover)
a.doc-tree-link a.doc-tree-link
color: var(--text-p3) color: var(--text-p3)
padding: 0.5rem padding: 0.5rem
@ -67,12 +67,10 @@
font-weight: 500 font-weight: 500
&.active &.active
color: var(--text-p2) color: var(--text-p2)
font-size: 1rem font-size: $fs-14
&:hover &:hover
background: var(--block-hover) background: var(--block-hover)
&.active
// #toc .widget-body.wiki a.doc-tree-link
// .doc-tree.active background: var(--block-hover)
// border-color: var(--text-meta) margin: 2px 0
// .doc-tree.active:only-child
// border-color: var(--block-hover)

View File

@ -159,22 +159,22 @@
--theme: $c-blue --theme: $c-blue
.tag-plugin.checkbox[color='red'] .tag-plugin.checkbox[color='red']
--theme: mix($c-red, $c-card-light, 90) --theme: mix($c-red, $light-card, 90)
.tag-plugin.checkbox[color='orange'] .tag-plugin.checkbox[color='orange']
--theme: mix($c-orange, $c-card-light, 90) --theme: mix($c-orange, $light-card, 90)
.tag-plugin.checkbox[color='yellow'] .tag-plugin.checkbox[color='yellow']
--theme: mix($c-yellow, $c-card-light, 90) --theme: mix($c-yellow, $light-card, 90)
.tag-plugin.checkbox[color='green'] .tag-plugin.checkbox[color='green']
--theme: mix($c-green, $c-card-light, 90) --theme: mix($c-green, $light-card, 90)
.tag-plugin.checkbox[color='cyan'] .tag-plugin.checkbox[color='cyan']
--theme: mix($c-cyan, $c-card-light, 90) --theme: mix($c-cyan, $light-card, 90)
.tag-plugin.checkbox[color='blue'] .tag-plugin.checkbox[color='blue']
--theme: mix($c-blue, $c-card-light, 100) --theme: mix($c-blue, $light-card, 100)
.tag-plugin.checkbox[color='purple'] .tag-plugin.checkbox[color='purple']
--theme: mix($c-purple, $c-card-light, 90) --theme: mix($c-purple, $light-card, 90)

View File

@ -3,32 +3,32 @@
--theme-bg: var(--block) --theme-bg: var(--block)
.tag-plugin[color='red'] .tag-plugin[color='red']
--theme: mix($c-red, $c-card-light, 40) --theme: mix($c-red, $light-card, 40)
--theme-bg: mix($c-red, $c-card-light, 10) --theme-bg: mix($c-red, $light-card, 10)
.tag-plugin[color='orange'] .tag-plugin[color='orange']
--theme: mix($c-orange, $c-card-light, 40) --theme: mix($c-orange, $light-card, 40)
--theme-bg: mix($c-orange, $c-card-light, 10) --theme-bg: mix($c-orange, $light-card, 10)
.tag-plugin[color='yellow'] .tag-plugin[color='yellow']
--theme: mix($c-yellow, $c-card-light, 40) --theme: mix($c-yellow, $light-card, 40)
--theme-bg: mix($c-yellow, $c-card-light, 10) --theme-bg: mix($c-yellow, $light-card, 10)
.tag-plugin[color='green'] .tag-plugin[color='green']
--theme: mix($c-green, $c-card-light, 40) --theme: mix($c-green, $light-card, 40)
--theme-bg: mix($c-green, $c-card-light, 10) --theme-bg: mix($c-green, $light-card, 10)
.tag-plugin[color='cyan'] .tag-plugin[color='cyan']
--theme: mix($c-cyan, $c-card-light, 40) --theme: mix($c-cyan, $light-card, 40)
--theme-bg: mix($c-cyan, $c-card-light, 10) --theme-bg: mix($c-cyan, $light-card, 10)
.tag-plugin[color='blue'] .tag-plugin[color='blue']
--theme: mix($c-blue, $c-card-light, 40) --theme: mix($c-blue, $light-card, 40)
--theme-bg: mix($c-blue, $c-card-light, 10) --theme-bg: mix($c-blue, $light-card, 10)
.tag-plugin[color='purple'] .tag-plugin[color='purple']
--theme: mix($c-purple, $c-card-light, 40) --theme: mix($c-purple, $light-card, 40)
--theme-bg: mix($c-purple, $c-card-light, 10) --theme-bg: mix($c-purple, $light-card, 10)
.tag-plugin[color='white'] .tag-plugin[color='white']
@ -36,43 +36,44 @@
.tag-plugin[color='dark'] .tag-plugin[color='dark']
--theme-bg: mix(black, $c-card-light, 75) --theme-bg: mix(black, $light-card, 75)
color: var(--card) !important color: var(--card) !important
body[theme='dark'] if hexo-config('style.darkmode') == 'auto'
.tag-plugin[color='red'] @media (prefers-color-scheme: dark)
--theme: mix($c-red, $c-card-dark, 40) .tag-plugin[color='red']
--theme-bg: mix($c-red, $c-card-dark, 10) --theme: mix($c-red, $dark-card, 40)
--theme-bg: mix($c-red, $dark-card, 10)
.tag-plugin[color='orange'] .tag-plugin[color='orange']
--theme: mix($c-orange, $c-card-dark, 40) --theme: mix($c-orange, $dark-card, 40)
--theme-bg: mix($c-orange, $c-card-dark, 10) --theme-bg: mix($c-orange, $dark-card, 10)
.tag-plugin[color='yellow'] .tag-plugin[color='yellow']
--theme: mix($c-yellow, $c-card-dark, 40) --theme: mix($c-yellow, $dark-card, 40)
--theme-bg: mix($c-yellow, $c-card-dark, 10) --theme-bg: mix($c-yellow, $dark-card, 10)
.tag-plugin[color='green'] .tag-plugin[color='green']
--theme: mix($c-green, $c-card-dark, 40) --theme: mix($c-green, $dark-card, 40)
--theme-bg: mix($c-green, $c-card-dark, 10) --theme-bg: mix($c-green, $dark-card, 10)
.tag-plugin[color='cyan'] .tag-plugin[color='cyan']
--theme: mix($c-cyan, $c-card-dark, 40) --theme: mix($c-cyan, $dark-card, 40)
--theme-bg: mix($c-cyan, $c-card-dark, 10) --theme-bg: mix($c-cyan, $dark-card, 10)
.tag-plugin[color='blue'] .tag-plugin[color='blue']
--theme: mix($c-blue, $c-card-dark, 40) --theme: mix($c-blue, $dark-card, 40)
--theme-bg: mix($c-blue, $c-card-dark, 10) --theme-bg: mix($c-blue, $dark-card, 10)
.tag-plugin[color='purple'] .tag-plugin[color='purple']
--theme: mix($c-purple, $c-card-dark, 40) --theme: mix($c-purple, $dark-card, 40)
--theme-bg: mix($c-purple, $c-card-dark, 10) --theme-bg: mix($c-purple, $dark-card, 10)
.tag-plugin[color='white'] .tag-plugin[color='white']
--theme-bg: white --theme-bg: white
color: var(--card) color: var(--card)
.tag-plugin[color='dark'] .tag-plugin[color='dark']
--theme-bg: mix(black, $c-card-dark, 75) --theme-bg: mix(black, $dark-card, 75)
color: var(--text-p0) !important color: var(--text-p0) !important

View File

@ -46,9 +46,15 @@
&:hover &:hover
background: linear-gradient(145deg, #eee, #fff) background: linear-gradient(145deg, #eee, #fff)
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1), -1px -1px 2px rgba(255, 255, 255, 0.5), inset 8px 8px 16px rgba(0, 0, 0, 0.05), inset -8px -8px 16px rgba(255, 255, 255, 0.4) box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1), -1px -1px 2px rgba(255, 255, 255, 0.5), inset 8px 8px 16px rgba(0, 0, 0, 0.05), inset -8px -8px 16px rgba(255, 255, 255, 0.4)
if hexo-config('style.darkmode') == 'auto'
@media (prefers-color-scheme: dark)
box-shadow: none
&:active &:active
background: linear-gradient(145deg, #eee, #fff) background: linear-gradient(145deg, #eee, #fff)
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1), -0px -0px 0px rgba(255, 255, 255, 0.8), inset 2px 2px 4px rgba(0, 0, 0, 0.1), inset -2px -2px 4px rgba(255, 255, 255, 1), inset -8px -8px 16px rgba(255, 255, 255, 0.4) box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1), -0px -0px 0px rgba(255, 255, 255, 0.8), inset 2px 2px 4px rgba(0, 0, 0, 0.1), inset -2px -2px 4px rgba(255, 255, 255, 1), inset -8px -8px 16px rgba(255, 255, 255, 0.4)
if hexo-config('style.darkmode') == 'auto'
@media (prefers-color-scheme: dark)
box-shadow: none
.vedit .vedit
.vctrl span .vctrl span
padding: 0 padding: 0
@ -205,13 +211,8 @@
p p
color: var(--text-p1) color: var(--text-p1)
if hexo-config('style.darkmode') == 'auto'
body[theme='dark'] @media (prefers-color-scheme: dark)
.cmt-body.valine .cmt-body.valine
--more-before: 0 0 --more-before: 0 0
--more-after: #393c40 --more-after: #393c40
@media (prefers-color-scheme: dark)
.cmt-body.valine
--more-before: 0 0
--more-after: #393c40

View File

@ -127,9 +127,6 @@ const init = {
$("#toc a.toc-link").click(function(e) { $("#toc a.toc-link").click(function(e) {
l_body.classList.remove("sidebar"); l_body.classList.remove("sidebar");
}); });
$("#toc a#s-top").click(function(e) {
l_body.classList.remove("sidebar");
});
}) })
}, },
relativeDate: (selector) => { relativeDate: (selector) => {
@ -276,8 +273,3 @@ if (stellar.plugins.preload) {
stellar.loadScript(stellar.plugins.preload.flying_pages, {defer:true}) stellar.loadScript(stellar.plugins.preload.flying_pages, {defer:true})
} }
} }
// darkmode
if (stellar.plugins.darkmode) {
stellar.loadScript(stellar.plugins.darkmode.js, {defer:true})
}

View File

@ -1,6 +0,0 @@
// darkmode
const darkmode = {
toggle: () => {
alert("toggle");
},
}