css

_config.yml

@@ -64,8 +64,12 @@ style:
     #   url: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-fonts/Monaco/Monaco.ttf
     #   weight: normal
     #   style: normal
-  # color:
+  color:
+    site: '#E84D3B'
+    site_inner: '#FFCE48'
+    theme: '#E84D3B'
   #   site: '#21232F' # Website background color
+  #   site_inner: '#FFCE48' # Text color inside the website background
   #   card: '#444' # Card background color
   #   text: '#fff' # The color of the text on the card.
   #   theme: '#ff9800' # Main color
@@ -423,19 +427,17 @@ plugins:
 
   # Slide Background
   backstretch:
-    enable: true
+    enable: false
     js: https://cdn.jsdelivr.net/npm/jquery-backstretch@2.1.18/jquery.backstretch.min.js
     position: cover       # cover: sticky on the cover.   fixed: Fixed as background for the site.
     shuffle: true         # shuffle playlist
     duration: 20000       # Duration (ms)
     fade: 1500            # fade duration (ms) (Not more than 1500)
-    white_text: #true     # Whether the picture is dark (adjust the text to white)
     images:               # For personal use only. At your own risk if used for commercial purposes !!!
       - https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg
       # - https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/BBC19066-E176-47C2-9D22-48C81EE5DF6B.jpeg
       # - https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/B18FCBB3-67FD-48CC-B4F3-457BA145F17A.jpeg
       # - https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/00E0F0ED-9F1C-407A-9AA6-545649D919F4.jpeg
-      # # Suggest white_text: true
       # - https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/67239FBB-E15D-4F4F-8EE8-0F1C9F3C4E7C.jpeg
       # - https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/B951AE18-D431-417F-B3FE-A382403FF21B.jpeg
       # - https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/landscape/AEB33F9D-7294-4CF1-B8C5-3020748A9D45.jpeg

layout/_cover/index.ejs

@@ -4,10 +4,10 @@
       <img class='logo' src='<%- url_for(theme.cover.logo) %>'/>
     <% } %>
     <% if (theme.cover.title) { %>
-      <p class="title <%- theme.plugins.backstretch && theme.plugins.backstretch.white_text ? 'white' : '' %>"><%- theme.cover.title ? theme.cover.title : config.title %></p>
+      <p class="title"><%- theme.cover.title ? theme.cover.title : config.title %></p>
     <% } %>
     <% if (theme.cover.subtitle) { %>
-      <p class="subtitle <%- theme.plugins.backstretch && theme.plugins.backstretch.white_text ? 'white' : '' %>"><%- theme.cover.subtitle%></p>
+      <p class="subtitle"><%- theme.cover.subtitle%></p>
     <% } %>
   </div>
   <div class='b'>
@@ -24,7 +24,7 @@
         <% if (theme.cover.features) { %>
           <% (theme.cover.features || []).forEach(function(value){ %>
             <li>
-              <a class="nav home <%- theme.plugins.backstretch && theme.plugins.backstretch.white_text ? 'white' : '' %>"
+              <a class="nav home"
                 href="<%= url_for(value.url) %>"
                 <% if (value.rel) { %>
                   rel="<%- value.rel %>"

layout/_partial/footer.ejs

@@ -5,7 +5,7 @@
     layout = config.theme_config.footer.layout;
   }
   %>
-  <footer class="clearfix <%- theme.plugins.backstretch && theme.plugins.backstretch.white_text ? 'white' : '' %>">
+  <footer class="clearfix">
     <br><br>
     <% layout.forEach(function(item){ %>
       <% if (item == 'social') { %>

source/css/_defines/color.styl

@@ -32,6 +32,7 @@ $color-google-red = #E8453C
 
 // common
 $color-site = convert(hexo-config('style.color.site')) || #f4f4f4
+$color-site-inner = convert(hexo-config('style.color.site_inner')) || #555
 $color-card = convert(hexo-config('style.color.card')) || white
 $color-text = convert(hexo-config('style.color.text')) || #444
 $color-theme = convert(hexo-config('style.color.theme')) || #2196f3

source/css/_layout/cover.styl

@@ -9,11 +9,9 @@
   align-items: center
   align-self: center
   align-content: center
-  color: $color-p
+  color: $color-site-inner
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1)
   padding: $gap
-  .white
-    color: white
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1)
   .cover-body
     div.b
       margin-top: 8vh
@@ -140,17 +138,12 @@
       padding: 2px
       margin: 4px
       trans()
-      color: $color-p
+      color: alpha($color-site-inner, .65)
+      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1)
       border-bottom: 2px solid transparent
       &:hover, &.active, &:active
-        color: $color-theme
-        border-bottom: 2px solid $color-theme
-      &.white
-        color: alpha(white, .7)
-        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1)
-        &:hover, &.active, &:active
-          color: white
-          border-bottom: 2px solid white
+        color: $color-site-inner
+        border-bottom: 2px solid $color-site-inner
   .switcher
     & > li
       a

source/css/_layout/footer.styl

@@ -2,21 +2,12 @@ footer
   position: relative
   padding: 40px 10px 120px 10px
   width: 100%
-  color: $color-meta
+  color: alpha($color-site-inner, .5)
   margin: 0px auto
   &,p
     font-size: $fontsize-code
   overflow: hidden
   text-align: center
-  &.white, &.white a
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1)
-
-  &.white
-    color: fade(white, 50%)
-
-  &.white a
-    color: fade(white, 80%)
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1)
 
   .licenses
     color: fade(@color_text_main, 50%)
@@ -33,10 +24,11 @@ footer
     font-size: $fontsize
 
   a
-    color: $color-meta
+    color: alpha($color-site-inner, .75)
     padding: 0
     trans()
-
+    &:hover
+      color: $color-site-inner
     &.social
       position: relative
       display: inline-block
@@ -44,13 +36,14 @@ footer
       display: flex
       justify-content: center
       align-items: center
-      width: 32px
-      height: 32px
+      width: 36px
+      height: 36px
       margin: 4px
       border-radius: 100px
+      color: alpha($color-site-inner, .75)
       &:hover
-        background: bgcolor($color-theme)
-        color: $color-theme
+        background: alpha($color-site-inner, .1)
+        color: $color-site-inner