Added and Styled Dark Mode Icon From Google Material Design API

HackClubSSGI · Sep 14, 2021 · c674a8d · c674a8d
1 parent 9652a62
commit c674a8d
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>HackClub SSGI</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link rel="stylesheet" href="style.css">
     <link id="theme" rel="stylesheet" href=" ">
 </head>
@@ -22,7 +23,8 @@ <h1 class="main-head">Hack Club SSGI</h1>
                     <a href="https://www.instagram.com/hackclubssgi" class="link-icon"><i class="fab fa-2x fa-instagram"></i></a>
                 </div>
             </div>
-            <div><button id="dark" class="dark">Dark</button></div>
+            <div><button id="dark" class="dark">Dark</button>
+                <i class = "material-icons" id="night-mode-icon">dark_mode</i></div> 
         </div>
     </header><main>
 

diff --git a/style.css b/style.css
@@ -270,6 +270,14 @@ p {
   border: 2px solid #5bc0de;
 }
 
+/* ------------------------------- NIGHT ICON --------------------------------- */
+.material-icons{
+  font-size: 30px;
+  margin-top: 8px;
+  margin-left: -15px;
+  position: absolute;
+}
+
 /* ------------------------------- MEDIA QUERIES --------------------------------- */
 @media screen and (max-width: 768px) {
   section,