change theme colors

Author: Guiny-Time

themes/butterfly/_config.yml

@@ -452,21 +452,21 @@ site_verification:
 # Theme color for customize
 # Notice: color value must in double quotes like "#000" or may cause error!
 
-# theme_color:
-#   enable: true
-#   main: "#49B1F5"
-#   paginator: "#00c4b6"
-#   button_hover: "#FF7242"
-#   text_selection: "#00c4b6"
-#   link_color: "#99a9bf"
-#   meta_color: "#858585"
-#   hr_color: "#A4D8FA"
-#   code_foreground: "#F47466"
-#   code_background: "rgba(27, 31, 35, .05)"
-#   toc_color: "#00c4b6"
-#   blockquote_padding_color: "#49b1f5"
-#   blockquote_background_color: "#49b1f5"
-#   scrollbar_color: "#49b1f5"
+theme_color:
+  enable: true
+  main: "#286b97"
+  paginator: "#536499"
+  button_hover: "#14214f"
+  text_selection: "#536499"
+  link_color: "#4040b4"
+  meta_color: "#858585"
+  hr_color: "#A4D8FA"
+  code_foreground: "#F47466"
+  code_background: "rgba(27, 31, 35, .05)"
+  toc_color: "#787878"
+  blockquote_padding_color: "#2f81b7"
+  blockquote_background_color: "#3079a9"
+  scrollbar_color: "#474853"
 
 # The top_img settings of home page
 # default: top img - full screen, site info - middle (默認top_img全屏，site_info在中間)
@@ -697,7 +697,7 @@ readmode: true
 
 # dark mode
 darkmode:
-  enable: true
+  enable: false
   # Toggle Button to switch dark/light mode
   button: true
   # Switch dark/light mode automatically (自動切換 dark mode和 light mode)
@@ -820,7 +820,8 @@ css_prefix: true
 # 插入代码到头部 </head> 之前 和 底部 </body> 之前
 inject:
   head:
-    # - <link rel="stylesheet" href="/xxx.css">
+    - <link rel="stylesheet" href="/css/background.css">
+
   bottom:
     # - <script src="xxxx"></script>
 

themes/butterfly/source/css/_layout/post.styl

@@ -191,31 +191,32 @@ beautify()
     position: relative
     margin: 40px 0 10px
     padding: 10px 16px
-    border: 1px solid var(--light-grey)
+    border: 2px solid var(--light-grey)
     transition: box-shadow .3s ease-in-out
 
     &:before
       @extend .fontawesomeIcon
       position: absolute
       top: 2px
       right: 12px
-      color: $theme-color
+      color: '#223254'
       content: '\f1f9'
       font-size: 1.3em
 
     &:hover
-      box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5)
+      box-shadow: 0 0 16px 0 rgba(255, 255, 255, 1), 0 4px 8px 0 rgba(255, 255, 255, 1)
 
     .post-copyright
       &-meta
-        color: $light-blue
+        color: $black
         font-weight: bold
 
       &-info
         padding-left: 6px
 
         a
           text-decoration: underline
+          color: #223254
           word-break: break-word
 
           &:hover

themes/butterfly/source/css/background.css

@@ -0,0 +1,12 @@
+/* 首页 卡片文章背景透明 */
+#recent-posts>.recent-post-item,.layout>div:first-child:not(.recent-posts),.layout_post>#page,.layout_post>#post,.read-mode .layout_post>#post{
+    /* 白色透明度 */
+    background: rgba(255,255,255,.9);
+    color: #222;
+}
+
+/* 侧边栏设置 */
+#aside-content>.card-widget,.sticky_layout>.card-widget{
+    /* 白色透明度 */
+    background: rgba(255,255,255,.95) !important;
+}