added header: added dark mode css and togglable dark/light mode and checks for browser preferance

src/Header/Header.css

@@ -29,8 +29,12 @@ nav a {
 
 nav a li {
 	background-color: none;
-	padding: 1rem;
+	padding: 0.5rem;
-	padding-top: 0px;
+	border: solid 1px gray;
+}
+
+nav a li:hover {
+	background-color: gray;
 }
 
 nav ul {
@@ -58,4 +62,38 @@ nav ul {
 	text-align: center;
 }
 
-/* not sure what these two are for */
+header div {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+}
+header div button {
+	border: none;
+	cursor: pointer;
+	height: 4rem;
+	width: 4rem;
+	align-items: center;
+	background-color: inherit;
+	border: solid 2px gray;
+	border-radius: 1rem;
+}
+
+header div button img {
+	width: 100%;
+}
+
+/* for dark mode */
+
+.darkmode {
+	filter: invert(95%) hue-rotate(180deg);
+	background-color: white;
+}
+
+#root.darkmode #logo.logoAfterDark {
+	filter: hue-rotate(180deg);
+}
+
+#root.darkmode #darkModeToggle {
+	filter: hue-rotate(180deg);
+}

src/Header/Header.js

@@ -1,4 +1,5 @@
 import logo from "./logo.png";
+import lightDark from "./light-dark.webp";
 import { Outlet, Link } from "react-router-dom";
 import "./Header.css";
 
@@ -7,25 +8,62 @@ import "./Header.css";
  * @returns {JSX.Element} JSX - HTML tags and JS functionality
  * @description The top header part of the page includes the naviagtion
  * @author Brock <darkicewolf50@gmail.com>
- * @todo convert any dropdowns and use <Link> just like <a> https://github.com/Akshpreet02/EventSphere
+ * @todo final css
  */
 const Header = () => {
+	/**
+	 * @param {null} null -  Takes in nothing
+	 * @returns {CSSStyleRule} CSS - changes page to darkmode
+	 * @description inverts all of the colors of body without touching the pictures
+	 * @author Brock <darkicewolf50@gmail.com>
+	 */
+	const switchDarkMode = () => {
+		const body = document.getElementById("root");
+		const logoCss = document.getElementById("logo");
+
+		body.classList.toggle("darkmode");
+		logoCss.classList.toggle("logoAfterDark");
+	};
+
+	/**
+	 * @param {null} null -  Takes in nothing
+	 * @returns {CSSStyleRule} CSS - makes it compliant with bowser preferances
+	 * @description checks for what the browser prefers
+	 * @author Brock <darkicewolf50@gmail.com>
+	 */
+	document.addEventListener("DOMContentLoaded", () => {
+		const prefersDarkMode =
+			window.matchMedia &&
+			window.matchMedia("(prefers-color-scheme: dark)").matches;
+		if (prefersDarkMode) {
+			switchDarkMode();
+		}
+	});
+
 	return (
 		<>
 			<header>
-				<Link to={"/"}>
+				<div>
-					<figure>
+					<Link to={"/"}>
+						<figure>
+							<img
+								id="logo"
+								src={logo}
+								alt="Schulich Off-Road's logo"
+							/>
+							<figcaption>
+								<h1>Schulich Offroad</h1>
+							</figcaption>
+						</figure>
+					</Link>
+					<button onClick={switchDarkMode}>
 						<img
-							id="logo"
+							id="darkModeToggle"
-							src={logo}
+							src={lightDark}
-							alt="Schulich Off-Road's logo"
+							alt="Light/Dark Toggle Symbol"
 						/>
-						<figcaption>
+					</button>
-							<h1>Schulich Offroad</h1>
+				</div>
-						</figcaption>
-					</figure>
-				</Link>
-
 				<nav>
 					<ul>
 						<Link to={"/"}>

src/index.css

@@ -1,13 +1,19 @@
 body {
-  margin: 0;
+	margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+		"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
+		sans-serif;
-  -webkit-font-smoothing: antialiased;
+	-webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+	-moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+	font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+		monospace;
+}
+
+#root.darkmode img,
+#root.darkmode video,
+#root.darkmode iframe {
+	filter: invert(95%) hue-rotate(180deg);
 }