✨ Feature: custom header & footer text color (#192)

Molunerfinn · Jan 29, 2020 · ecd9bac · ecd9bac
1 parent 8708306
commit ecd9bac
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 8 deletions.
diff --git a/_config.yml b/_config.yml
@@ -12,6 +12,8 @@
 #   hr_color: "#A4D8FA"
 #   tag_start_color: "#A4D8FA"
 #   tag_end_color: "#1B9EF3"
+#   header_text_color: "#EEEEEE"
+#   footer_text_color: "#EEEEEE"
 
 # Main menu navigation
 menu:

diff --git a/source/css/_layout/footer.styl b/source/css/_layout/footer.styl
@@ -14,11 +14,11 @@ footer
 
 #footer
   padding: 2rem 1rem
-  color: $light-grey
+  color: $theme-footer-text-color
   text-align: center
 
   a
-    color: $light-grey
+    color: $theme-footer-text-color
     text-decoration: none
     cursor: pointer
 

diff --git a/source/css/_layout/head.styl b/source/css/_layout/head.styl
@@ -19,7 +19,7 @@
 
 #site-title,
 #site-sub-title
-  color: $light-grey
+  color: $theme-header-text-color
   text-align: center
   text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.15)
   line-height: 1.5
@@ -38,7 +38,7 @@
 
   .social-icon
     margin: 0 0.5rem
-    color: $light-grey
+    color: $theme-header-text-color
     text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.15)
     font-size: 1.4rem
     cursor: pointer
@@ -59,15 +59,15 @@
   .toggle-menu
     display: none
     padding-top: 0.5rem
-    color: $light-grey
+    color: $theme-header-text-color
     cursor: pointer
     transition: all 0.2s ease-in-out
 
     &:hover
       color: $white
 
   a
-    color: $light-grey
+    color: $theme-header-text-color
     text-decoration: none
 
     &:hover

diff --git a/source/css/_layout/post.styl b/source/css/_layout/post.styl
@@ -56,7 +56,7 @@ headStyle(fontsize)
     height: 56px
 
   a
-    color: $light-grey
+    color: $theme-header-text-color
     text-decoration: none
     transition: all 0.3s ease-out
 
@@ -74,7 +74,7 @@ headStyle(fontsize)
   #post-info
     padding: 10rem 1rem
     width: 100%
-    color: $light-grey
+    color: $theme-header-text-color
     text-align: center
 
   #post-title
@@ -235,6 +235,7 @@ a
 
   &#site-name
     text-decoration: none
+    color: $theme-header-text-color
 
 a.fancybox
   outline: none
@@ -357,9 +358,11 @@ img
 
     #post-title
       font-size: 1.1rem
+      color: $theme-header-text-color
 
   #post-title
     font-size: 1.1rem
+    color: $theme-header-text-color
 
 @media screen and (min-width: $sm)
   #top-container

diff --git a/source/css/var.styl b/source/css/var.styl
@@ -6,6 +6,8 @@ $theme-text-selection-color = #00c4b6
 $theme-meta-color = #858585
 $theme-link-color = #99a9bf
 $theme-hr-color = #A4D8FA
+$theme-header-text-color =  #EEEEEE
+$theme-footer-text-color = #EEEEEE
 
 if hexo-config("theme_color") && hexo-config("theme_color.enable")
   $theme-color = convert(hexo-config("theme_color.main")) || #49B1F5
@@ -15,6 +17,8 @@ if hexo-config("theme_color") && hexo-config("theme_color.enable")
   $theme-link-color = convert(hexo-config("theme_color.link_color")) || #99a9bf
   $theme-meta-color = convert(hexo-config("theme_color.meta_color")) || #858585
   $theme-hr-color = convert(hexo-config("theme_color.hr_color")) || #A4D8FA
+  $theme-header-text-color = convert(hexo-config("theme_color.header_text_color")) || #EEEEEE
+  $theme-footer-text-color = convert(hexo-config("theme_color.footer_text_color")) || #EEEEEE
 
 // Global Variables
 $font-size = 14px