feat - add icon in toggle theme (#1532)

* feat - add icon in toggle theme * feat- add new sun icon
expressjs · Jul 3, 2024 · 523b10b · 523b10b
1 parent 3a5e90a
commit 523b10b
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 3 deletions.
diff --git a/_includes/header/header-en.html b/_includes/header/header-en.html
@@ -153,8 +153,11 @@
           </li>
         -->
       </ul>
-      <div id="theme-icon-container"  class="theme-toggle default-theme" title="toggle darkmode">
-        <i class="fa fa-moon-o fa-2x"></i>
-      </div> 
+      <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
+        <i class="fa fa-moon-o fa-lg hidden-dark"></i>
+        <span class="sun-icon hidden-light"></span>
+
+        <!--<i class="fa fa-sun-o fa-lg hidden-light"></i>-->
+      </div>
   </div>
 </header>
diff --git a/css/dark-theme.css b/css/dark-theme.css
@@ -15,6 +15,30 @@
   min-width: 50px;
   color: black;
 }
+#theme-icon-container i {
+  cursor: pointer;
+  line-height: 30px;
+}
+#theme-icon-container .hidden-light {
+  display: none;
+}
+.sun-icon {
+  background-image: url(/images/sun-icon.png);
+  background-size: 100%;
+  background-repeat: no-repeat;
+  width: 27px;
+  height: 27px;
+  cursor: pointer;
+}
+#theme-icon-container .hidden-dark {
+  display: block;
+}
+html.dark-mode #theme-icon-container .hidden-light {
+  display: block;
+}
+html.dark-mode #theme-icon-container .hidden-dark {
+  display: none;
+}
 html.dark-mode #theme-icon-container {
   color: var(--dark_text);
   background-color: var(--second_dark_bg);

diff --git a/images/sun-icon.png b/images/sun-icon.png