From 58f2ad739c5e7df528550de5e7b055a0f85e7229 Mon Sep 17 00:00:00 2001 From: darkicewolf50 Date: Tue, 26 Mar 2024 22:32:28 -0600 Subject: [PATCH] added header: added dark mode css and togglable dark/light mode and checks for browser preferance --- src/Header/Header.css | 44 ++++++++++++++++++++++++-- src/Header/Header.js | 62 ++++++++++++++++++++++++++++++------- src/Header/light-dark.webp | Bin 0 -> 6090 bytes src/index.css | 22 ++++++++----- 4 files changed, 105 insertions(+), 23 deletions(-) create mode 100644 src/Header/light-dark.webp diff --git a/src/Header/Header.css b/src/Header/Header.css index cc86553..73d24ef 100644 --- a/src/Header/Header.css +++ b/src/Header/Header.css @@ -29,8 +29,12 @@ nav a { nav a li { background-color: none; - padding: 1rem; - padding-top: 0px; + padding: 0.5rem; + 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); +} diff --git a/src/Header/Header.js b/src/Header/Header.js index d25559b..e0b81d0 100644 --- a/src/Header/Header.js +++ b/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 - * @todo convert any dropdowns and use just like 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 + */ + 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 + */ + document.addEventListener("DOMContentLoaded", () => { + const prefersDarkMode = + window.matchMedia && + window.matchMedia("(prefers-color-scheme: dark)").matches; + if (prefersDarkMode) { + switchDarkMode(); + } + }); + return ( <>
- -
+
+ +
+ +
+

Schulich Offroad

+
+
+ +
- - + +