From 13aca772755487054a9eaa08e5b026c220b38551 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sat, 5 Dec 2020 01:40:01 +0800
Subject: [PATCH] Change mode-toggle icon

---
 _includes/mode-toggle.html  |  3 +--
 assets/css/_addon/main.scss | 23 +++++++++++------------
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/_includes/mode-toggle.html b/_includes/mode-toggle.html
index 44759d6..e9f908c 100644
--- a/_includes/mode-toggle.html
+++ b/_includes/mode-toggle.html
@@ -7,8 +7,7 @@
   MIT License
 -->
 
-<i class="mode-toggle fas fa-sun" dark-mode-invisible></i>
-<i class="mode-toggle fas fa-moon" light-mode-invisible></i>
+<i class="mode-toggle fas fa-adjust"></i>
 
 <script type="text/javascript">
 
diff --git a/assets/css/_addon/main.scss b/assets/css/_addon/main.scss
index d4c09e9..82dc39c 100644
--- a/assets/css/_addon/main.scss
+++ b/assets/css/_addon/main.scss
@@ -12,23 +12,18 @@
 @import "_colors/light-typography";
 @import "_colors/dark-typography";
 
-@mixin set-visible($light-display, $dark-display) {
-  [light-mode-invisible] {
-    display: $light-display;
-  }
-
-  [dark-mode-invisible] {
-    display: $dark-display;
-  }
-}
 
 @mixin mode-toggle($dark-mode: false) {
   @if $dark-mode {
-    @include set-visible(inline-block, none);
     @include dark-scheme;
+    .mode-toggle {
+      transform: rotate(180deg);
+    }
   } @else {
-    @include set-visible(none, inline-block);
     @include light-scheme;
+    .mode-toggle {
+      transform: rotate(360deg);
+    }
   }
 }
 
@@ -191,12 +186,16 @@ $sidebar-display: "sidebar-display";
     #mode-toggle-wrapper {
       i {
         @include sidebar-links;
-        margin-right: 0;
+        margin: 0;
         font-size: 1.05rem;
         text-align: center;
         position: relative;
         bottom: 1px;
       }
+
+      .mode-toggle {
+        transition: all .5s !important;
+      }
     }
 
     .icon-border {