Merge pull request #84 from nditcommunity/material-symbols-darkmode-toggle

PoC light/dark mode toggle using Google Fonts material-symbols

Author: hayleyw7

src/_includes/head.liquid

@@ -72,6 +72,10 @@
     rel='apple-touch-icon'
     href='/icon.png'
   >
+  <link
+    href='https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined'
+    rel='stylesheet'
+  >
 
   <link
     rel='manifest'

src/_includes/header.liquid

@@ -26,8 +26,8 @@
       </li>
       <li>
         <p class='nav-item theme-icon'>
-          <span class='sun-icon hidden'>☼</span>
-          <span class='moon-icon'>☾</span>
+          <span class='sun-icon hidden material-symbols-outlined'>light_mode</span>
+          <span class='moon-icon material-symbols-outlined'>dark_mode</span>
         </p>
       </li>
     </ul>

src/styles/style.css

@@ -441,19 +441,11 @@ body.day-mode .nav-item {
   color: var(--black);
 }
 
-.theme-icon {
-  font-size: 1.2rem;
-  cursor: pointer;
-  width: 0.2rem;
-  margin-right: 16px;
-}
-
-.sun-icon {
-  color: var(--white);
-}
-
+.sun-icon,
 .moon-icon {
-  color: var(--black);
+  cursor: pointer;
+  font-size: 100% !important;
+  padding-top: 2.5px;
 }
 
 /* ---------- FOOTER ---------- */