add icons

Author: CodeShellDev

public/style/theme.css

@@ -33,6 +33,10 @@ html[data-theme="light"] {
 .theme-toggle {
 	position: absolute;
 
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
 	top: 15px;
 	left: 15px;
 

public/style/user.css

@@ -1,6 +1,10 @@
 .user {
 	position: absolute;
 
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
 	top: 15px;
 	right: 15px;
 

views/home.ejs

@@ -35,8 +35,40 @@
 		</div>
 
 		<button class="theme-toggle" type="button">
-			<img src="/img/moon.svg" id="moon" aria-hidden="true" />
-			<img src="/img/sun.svg" id="sun" aria-hidden="true" />
+			<svg
+				id="sun"
+				xmlns="http://www.w3.org/2000/svg"
+				width="24"
+				height="24"
+				fill="none"
+				stroke="currentColor"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="1.8"
+				data-attribution="cc0-icons"
+				viewBox="0 0 24 24"
+			>
+				<path
+					d="m4.91 19.052 1.773-1.763M17.317 6.71l1.773-1.762m-.038 14.142-1.763-1.773M6.71 6.683 4.949 4.91M12 22v-2.5m0-15V2m10 10h-2.5m-15 0H2m10 4.5a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Z"
+				/>
+			</svg>
+			<svg
+				id="moon"
+				xmlns="http://www.w3.org/2000/svg"
+				width="24"
+				height="24"
+				fill="none"
+				stroke="currentColor"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="1.8"
+				data-attribution="cc0-icons"
+				viewBox="0 0 24 24"
+			>
+				<path
+					d="M2.65 13.717c.94 5.44 6.082 9.081 11.482 8.133 3.385-.595 6.07-2.853 7.368-5.795a8.206 8.206 0 0 1-3.863 1.796c-4.5.79-8.784-2.244-9.568-6.777-.668-3.859 1.415-7.56 4.825-9.063a9.888 9.888 0 0 0-2.172.14c-5.4.948-9.014 6.127-8.073 11.566Z"
+				/>
+			</svg>
 		</button>
 
 		<div class="user">