🎨 Add dark mode

magicblock-labs · Feb 27, 2024 · f971bf4 · f971bf4
1 parent 533cc07
commit f971bf4
Show file tree

Hide file tree

Showing 4 changed files with 319 additions and 82 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -33,7 +33,7 @@
 
 </head>
 
-<body class="{% if page.url == "/" %} homefirstpage {% endif %}">
+<body class="{% if page.url == "/" %} homefirstpage {% endif %} dark-mode">
 
     <!-- Navbar -->
     <nav id="MagicMenu" class="topnav navbar navbar-expand-lg navbar-light bg-white fixed-top">
@@ -50,6 +50,14 @@
                {% include menu-header.html %}
             </ul>
             <ul class="navbar-nav ml-auto d-flex align-items-center">
+                <!-- Toggle switch button -->
+                <label class="switch">
+                    <input type="checkbox" id="themeToggle">
+                    <span class="slider round">
+                    <i class="fas fa-moon moon-icon"></i>
+                    <i class="fas fa-sun sun-icon"></i>
+                    </span>
+                </label>
                 {% include search-lunr.html %}
             </ul>
         </div>