add icons for toggle (from fontawesome)

Author: CodeShellDev

public/img/moon.svg

@@ -46,26 +46,26 @@ html[data-theme="light"] {
 	-webkit-backdrop-filter: blur(18px);
 }
 
-.sun,
-.moon {
+.theme-toggle #sun,
+.theme-toggle #moon {
 	position: absolute;
 	opacity: 0;
 }
 
-html[data-theme="light"] .moon {
+html[data-theme="light"] .theme-toggle #moon {
 	opacity: 1;
 	transform: scale(1);
 }
 
-html[data-theme="light"] .sun {
+html[data-theme="light"] .theme-toggle #sun {
 	transform: scale(0.8);
 }
 
-html[data-theme="dark"] .sun {
+html[data-theme="dark"] .theme-toggle #sun {
 	opacity: 1;
 	transform: scale(1);
 }
 
-html[data-theme="dark"] .moon {
+html[data-theme="dark"] .theme-toggle #moon {
 	transform: scale(0.8);
 }

public/img/sun.svg

@@ -35,8 +35,8 @@
 		</div>
 
 		<button class="theme-toggle" type="button">
-			<span class="sun" aria-hidden="true">☀️</span>
-			<span class="moon" aria-hidden="true">🌙</span>
+			<img src="/img/moon.svg" id="moon" aria-hidden="true" />
+			<img src="/img/sun.svg" id="sun" aria-hidden="true" />
 		</button>
 
 		<div class="user">