pjax

source/css/_global/function.styl

@@ -16,3 +16,31 @@
   font-family: 'Font Awesome 5 Free'
   text-rendering: auto
   -webkit-font-smoothing: antialiased
+
+[data-theme='light']
+  --global-bg: $body-bg
+  --font-color: $font-black
+  --hr-border: lighten($theme-hr-color, 50%)
+  --hr-before-color: lighten($theme-hr-color, 30%)
+  --search-bg: $search-bg
+  --search-input-color: $search-input-color
+  --search-result-title: $search-result-title
+  --preloader-bg: $preloader-bg
+  --preloader-color: $preloader-word-color
+  --tab-border-color: $tab-border-color
+  --tab-botton-bg: $tab-botton-bg
+  --tab-botton-color: $tab-botton-color
+  --tab-button-hover-bg: $tab-button-hover-bg
+  --tab-button-active-bg: $tab-button-active-bg
+  --card-bg: $card-bg
+  --sidebar-bg: $sidebar-background
+  --btn-hover-color: $button-hover-color
+  --btn-color: $button-color
+  --btn-bg: $button-bg
+  --text-bg-hover: $text-bg-hover
+  --light-grey: $light-grey
+  --white: $white
+  --text-highlight-color: $text-highlight-color
+  --blockquote-color: $blockquote-color
+  --blockquote-bg: $blockquote-background-color
+  --reward-pop: $reward-pop-up-bg

source/css/_global/index.styl

@@ -5,8 +5,8 @@ html
 body
   position: relative
   min-height: 100%
-  background: $body-bg
-  color: $font-black
+  background: var(--global-bg)
+  color: var(--font-color)
   font-size: $font-size
   font-family: $font-family
   line-height: $text-line-height
@@ -20,11 +20,14 @@ body
   height: 8px
 
 *::-webkit-scrollbar-thumb
-  background: $light-blue
+  background: var(--btn-bg)
 
 *::-webkit-scrollbar-track
   background-color: transparent
 
+input::placeholder
+  color: var(--font-color)
+
 #web_bg
   position: fixed
   z-index: -999
@@ -44,7 +47,7 @@ h5,
 h6
   position: relative
   margin: 1rem 0 .7rem
-  color: lighten($font-color, 15%)
+  color: var(--text-highlight-color)
   font-weight: bold
 
   code
@@ -53,19 +56,10 @@ h6
 *
   box-sizing: border-box
 
-#toggle-sidebar
-  position: fixed
-  bottom: $sidebar-icon-top
-  left: $sidebar-icon-left
-  z-index: 100
-  font-size: $sidebar-icon-size
-  cursor: pointer
-  transition: all .2s
-
 hr
   position: relative
   margin: 2rem auto
-  border: 2px dashed lighten($theme-hr-color, 50%)
+  border: 2px dashed var(--hr-border)
 
   if hexo-config('hr_icon.enable')
     width: calc(100% - 4px)
@@ -79,7 +73,7 @@ hr
       top: $hr-icon-top
       left: 5%
       z-index: 1
-      color: lighten($theme-hr-color, 30%)
+      color: var(--hr-before-color)
       content: $hr-icon
       font-size: 20px
       line-height: 1
@@ -103,7 +97,7 @@ table
   th,
   td
     padding: .3rem .6rem
-    border: 1px solid darken($light-grey, 10%)
+    border: 1px solid var(--light-grey)
     vertical-align: middle
 
 *::selection
@@ -157,8 +151,9 @@ button
   float: right
 
 .button--animated
-  transition-duration: 1s
-  transition-property: color
+  position: relative
+  z-index: 1
+  transition: color 1s
 
   &:before
     position: absolute
@@ -167,11 +162,9 @@ button
     bottom: 0
     left: 0
     z-index: -1
-    background: $theme-button-hover-color
+    background: var(--btn-hover-color)
     content: ''
-    transition-timing-function: ease-out
-    transition-duration: .5s
-    transition-property: transform
+    transition: transform .5s ease-out
     transform: scaleX(0)
     transform-origin: 0 50%
 
@@ -186,7 +179,7 @@ img:not([src])
 
 .img-alt
   margin: -.5rem 0 .5rem
-  color: $font-black
+  color: #858585
 
   &:hover
     text-decoration: none !important
@@ -373,4 +366,4 @@ if hexo-config('avatar.effect') == true
     transform: translateX(-200px)
 
   100%
-    transform: translateX(0)
+    transform: translateX(0)