Dark mode local storage

Author: realstoman

src/components/AppBanner.js

@@ -30,7 +30,7 @@ const AppBanner = () => {
 			<div className="w-full sm:w-2/3 text-right float-right mt-8 sm:mt-0">
 				<img
 					src={
-						activeTheme === 'light' ? developerLight : developerDark
+						activeTheme === 'dark' ? developerDark : developerLight
 					}
 					alt="Developer"
 				/>

src/components/AppFooter.js

@@ -49,7 +49,7 @@ const AppFooter = () => {
 						<a
 							href="https://stoman.me"
 							target="__blank"
-							className="text-secondary-dark dark:text-secondary-light font-medium uppercase hover:underline"
+							className="text-secondary-dark dark:text-secondary-light font-medium uppercase hover:underline ml-1"
 						>
 							Stoman
 						</a>

src/components/AppHeader.js

@@ -119,9 +119,9 @@ const AppHeader = () => {
 							className="ml-8 bg-primary-light dark:bg-ternary-dark p-3 shadow-sm rounded-xl cursor-pointer"
 						>
 							{activeTheme === 'dark' ? (
-								<FiMoon class="text-liText-ternary-dark hover:text-gray-400 dark:text-liText-ternary-light dark:hover:text-liBorder-primary-light text-xl" />
+								<FiMoon className="text-liText-ternary-dark hover:text-gray-400 dark:text-liText-ternary-light dark:hover:text-liBorder-primary-light text-xl" />
 							) : (
-								<FiSun class="text-gray-200 hover:text-gray-50 text-xl" />
+								<FiSun className="text-gray-200 hover:text-gray-50 text-xl" />
 							)}
 						</div>
 					</div>

src/components/ProjectsFilter.js

@@ -24,12 +24,14 @@ const ProjectsFilter = () => {
                 dark:text-ternary-light
             "
 		>
-			<option value class="text-sm sm:text-md">
+			<option value className="text-sm sm:text-md">
 				All Projects
 			</option>
 
 			{selectOptions.map((option) => (
-				<option className="text-normal sm:text-md">{option}</option>
+				<option className="text-normal sm:text-md" key={option}>
+					{option}
+				</option>
 			))}
 		</select>
 	);

src/hooks/ThemeSwitcher.js

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 
 const ThemeSwitcher = () => {
-	const [theme, setTheme] = useState('dark');
+	const [theme, setTheme] = useState(localStorage.theme);
 	const activeTheme = theme === 'dark' ? 'light' : 'dark';
 
 	useEffect(() => {