Add color option for bookmark (#1112)

theme-next · Aug 20, 2019 · 5d051ca · 5d051ca
1 parent c970d79
commit 5d051ca
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 6 deletions.
diff --git a/_config.yml b/_config.yml
@@ -443,6 +443,8 @@ reading_progress:
 # Bookmark Support
 bookmark:
   enable: false
+  # Customize the color of the bookmark.
+  color: "#222"
   # If auto, save the reading progress when closing the page or clicking the bookmark-icon.
   # If manual, only save it by clicking the bookmark-icon.
   save: auto

diff --git a/layout/_layout.swig b/layout/_layout.swig
@@ -38,7 +38,7 @@
     </header>
 
     {%- if theme.bookmark.enable %}
-      <a class="book-mark-link book-mark-link-fixed fa fa-bookmark" href="#"></a>
+      <a class="book-mark-link book-mark-link-fixed" href="#"></a>
     {%- endif %}
 
     {{ partial('_partials/github-banner.swig', {}, {cache: theme.cache.enable}) }}

diff --git a/source/css/_common/components/header/bookmark.styl b/source/css/_common/components/header/bookmark.styl
@@ -1,15 +1,20 @@
 .book-mark-link {
   border-bottom: none;
-  color: #222;
-  display: block;
-  font-size: 32px !important;
-  left: 30px;
+  display: inline-block;
+  right: $b2t-position-right;
   position: fixed;
   top: -10px;
   transition: .3s;
 
   +tablet-mobile() {
-    display: none !important;
+    display: none;
+  }
+  &::before {
+    color: unquote(hexo-config('bookmark.color'));
+    content: "\f02e";
+    font-family: $font-family-icons;
+    font-size: 32px;
+    line-height: 1;
   }
 }