From 990e44671ab587c860cc5d8d333123e096dca8b9 Mon Sep 17 00:00:00 2001 From: ViktorYeet Date: Mon, 25 Mar 2024 13:05:12 +0100 Subject: [PATCH 1/9] moved the used css variables to their own file --- .../elements/DarkModeSwitch.module.scss | 6 +-- .../components/elements/DarkModeSwitch.tsx | 4 +- frontend/pages/_app.tsx | 2 +- frontend/pages/index.tsx | 31 ++++--------- frontend/resources/styles/Theme_colors.css | 43 +++++++++++++++++++ frontend/resources/styles/darkMode_colors.css | 9 ---- frontend/resources/styles/globals.scss | 4 +- 7 files changed, 57 insertions(+), 42 deletions(-) create mode 100644 frontend/resources/styles/Theme_colors.css delete mode 100644 frontend/resources/styles/darkMode_colors.css diff --git a/frontend/components/elements/DarkModeSwitch.module.scss b/frontend/components/elements/DarkModeSwitch.module.scss index a5627f5f..d8bb8b85 100644 --- a/frontend/components/elements/DarkModeSwitch.module.scss +++ b/frontend/components/elements/DarkModeSwitch.module.scss @@ -40,15 +40,11 @@ .darkModeHolder { height: 1.2$space-big; width: 2.2*$space-big; - background-color: black; + background-color: var(--site-background); border: (0.1*$space-big) solid white; border-radius: 1.1*$space-big/2; } -.blackColor { - background-color: white; -} - @keyframes in { 0% { left: 0; diff --git a/frontend/components/elements/DarkModeSwitch.tsx b/frontend/components/elements/DarkModeSwitch.tsx index 960199e4..e8854c72 100644 --- a/frontend/components/elements/DarkModeSwitch.tsx +++ b/frontend/components/elements/DarkModeSwitch.tsx @@ -6,9 +6,7 @@ export interface DarkModeProps { } const DarkModeSwitch = ({ darkMode, setDarkMode }: DarkModeProps) => (
{ setDarkMode(!darkMode); }}> diff --git a/frontend/pages/_app.tsx b/frontend/pages/_app.tsx index 17ffece4..3cc6a1b4 100644 --- a/frontend/pages/_app.tsx +++ b/frontend/pages/_app.tsx @@ -1,4 +1,4 @@ -import "../resources/styles/darkMode_colors.css"; +import "../resources/styles/Theme_colors.css"; import "../resources/styles/globals.scss"; import "../resources/styles/source_sans_pro.scss"; import "../resources/styles/deja_vu_sans.scss"; diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx index e203db5d..19f63bd2 100644 --- a/frontend/pages/index.tsx +++ b/frontend/pages/index.tsx @@ -9,41 +9,26 @@ import { Category } from "../data/category"; import data from "../data/service.json"; const switchMode = (darkMode: boolean) => { - const docStyle = document.documentElement.style; - if (darkMode) { - docStyle.setProperty("--highlight1", "#de3c4b"); - docStyle.setProperty("--highlight2", "#2191fb"); - docStyle.setProperty("--highlight1-hover", "#ff8c89"); - docStyle.setProperty("--highlight2-hover", "#0171db"); - docStyle.setProperty("--background", "#2b303a"); - docStyle.setProperty("--site-background", "#111317"); - docStyle.setProperty("--text", "#ffffff"); - } else { - docStyle.setProperty("--highlight1", "#07a0c3"); - docStyle.setProperty("--highlight2", "#f0cff2"); - docStyle.setProperty("--highlight1-hover", "#ff8c89"); - docStyle.setProperty("--highlight2-hover", "#81e1eb"); - docStyle.setProperty("--background", "#034078"); - docStyle.setProperty("--site-background", "#ededf0"); - docStyle.setProperty("--text", "#ffffff"); - } + const doc = document.documentElement; + if(darkMode) doc.classList.remove("Alternate-Theme"); + else doc.classList.add("Alternate-Theme"); }; const checkClientMode = () => { if (typeof window !== "undefined") { - if (window.matchMedia?.("(prefers-color-scheme: dark)").matches) - return true; + if (window.matchMedia?.("(prefers-color-scheme: light)").matches) + return false; } - return false; + return true; }; const Home: NextPage = () => { const categories: Category[] = data; const [show, setShow] = useState(false); - const [darkMode, setDarkMode] = useState(checkClientMode()); + const [darkMode, setDarkMode] = useState(checkClientMode()); useEffect(() => { switchMode(darkMode); - }); + }); return ( <> diff --git a/frontend/resources/styles/Theme_colors.css b/frontend/resources/styles/Theme_colors.css new file mode 100644 index 00000000..b37795d1 --- /dev/null +++ b/frontend/resources/styles/Theme_colors.css @@ -0,0 +1,43 @@ +:root { /* dark theme */ + --highlight1: #de3c4b; + --highlight2: #2191fb; + --highlight1-hover: #ff8c89; + --highlight2-hover: #0171db; + --background: #2b303a; + --site-background: #111317; + --text: #ffffff; +} + +.Alternate-Theme { /* light theme */ + --highlight1: #07a0c3; + --highlight2: #f0cff2; + --highlight1-hover: #ff8c89; + --highlight2-hover: #81e1eb; + --background: #034078; + --site-background: #ededf0; + --text: #ffffff; +} + + +/* @media(prefers-color-scheme: light) { + + :root { /* light theme * + --highlight1: #07a0c3; + --highlight2: #f0cff2; + --highlight1-hover: #ff8c89; + --highlight2-hover: #81e1eb; + --background: #034078; + --site-background: #ededf0; + --text: #ffffff; + } + + .Alternate-Theme { /* dark theme * + --highlight1: #de3c4b; + --highlight2: #2191fb; + --highlight1-hover: #ff8c89; + --highlight2-hover: #0171db; + --background: #2b303a; + --site-background: #111317; + --text: #ffffff; + } +} */ \ No newline at end of file diff --git a/frontend/resources/styles/darkMode_colors.css b/frontend/resources/styles/darkMode_colors.css deleted file mode 100644 index b39cd57c..00000000 --- a/frontend/resources/styles/darkMode_colors.css +++ /dev/null @@ -1,9 +0,0 @@ -:root { - highlight1: #ff5e5b; - highlight2: #00a6a6; - highlight1-hover: #ff8c89; - highlight2-hover: #00d9d9; - background: #004e98; - site-background: #fffcf2; - text: #ffffff; -} \ No newline at end of file diff --git a/frontend/resources/styles/globals.scss b/frontend/resources/styles/globals.scss index 40f2d098..e7ec16bb 100644 --- a/frontend/resources/styles/globals.scss +++ b/frontend/resources/styles/globals.scss @@ -1,5 +1,5 @@ @import "vars"; -@import "darkMode_colors"; +@import "Theme_colors"; @media print { /* All your print styles go here */ @@ -264,6 +264,8 @@ button { } margin-bottom:$space-small; } + +/* dark mode och lightmode är samma bör göras till en klass */ .darkMode { background-color: var(--site-background); color: var(--text); From 23ca4ed40e8b876a2ffcbacd90903e5b6122ee5d Mon Sep 17 00:00:00 2001 From: ViktorYeet Date: Mon, 25 Mar 2024 13:19:49 +0100 Subject: [PATCH 2/9] Removed theme switch button --- frontend/components/elements/Header.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/frontend/components/elements/Header.tsx b/frontend/components/elements/Header.tsx index f4f3d79d..77258a2a 100644 --- a/frontend/components/elements/Header.tsx +++ b/frontend/components/elements/Header.tsx @@ -37,9 +37,6 @@ const Header = ({ ))}
-
- -
Date: Mon, 25 Mar 2024 14:43:02 +0100 Subject: [PATCH 3/9] Removed the change theme button and related functionality --- .../elements/DarkModeSwitch.module.scss | 67 ------------------- .../components/elements/DarkModeSwitch.tsx | 17 ----- frontend/components/elements/Header.tsx | 7 -- frontend/components/views/NavBar.tsx | 6 -- frontend/pages/index.tsx | 22 +----- frontend/resources/styles/Theme_colors.css | 38 ++++------- frontend/resources/styles/globals.scss | 7 +- 7 files changed, 16 insertions(+), 148 deletions(-) delete mode 100644 frontend/components/elements/DarkModeSwitch.module.scss delete mode 100644 frontend/components/elements/DarkModeSwitch.tsx diff --git a/frontend/components/elements/DarkModeSwitch.module.scss b/frontend/components/elements/DarkModeSwitch.module.scss deleted file mode 100644 index d8bb8b85..00000000 --- a/frontend/components/elements/DarkModeSwitch.module.scss +++ /dev/null @@ -1,67 +0,0 @@ -@import "../../resources/styles/vars.scss"; - -.darkModeSwitchStyle { - color: black; - height: $space-big; - width: $space-big; - position: absolute; - /*left: 0.1*$space-big; - top: 0.1*$space-big;*/ - - @media only screen and (min-width:$breakpoint-mobile) {} - - @media only screen and (max-width:$breakpoint-mobile) {} -} - -.slider_in { - height: $space-big; - width: $space-big; - position: relative; - left: 0; - background-color: #00a6a6; - border-radius: $space-big/2; - animation-name: out; - animation-duration: 0.4s; - -} - - -.slider_out { - height: $space-big; - width: $space-big; - position: relative; - left: 1.05*$space-big; - background-color: #00a6a6; - border-radius: $space-big/2; - animation-name: in; - animation-duration: 0.4s; -} - -.darkModeHolder { - height: 1.2$space-big; - width: 2.2*$space-big; - background-color: var(--site-background); - border: (0.1*$space-big) solid white; - border-radius: 1.1*$space-big/2; -} - -@keyframes in { - 0% { - left: 0; - } - - 100% { - left: 1.1*$space-big; - } - -} - -@keyframes out { - 0% { - left: 1.1*$space-big; - } - - 100% { - left: 0; - } -} \ No newline at end of file diff --git a/frontend/components/elements/DarkModeSwitch.tsx b/frontend/components/elements/DarkModeSwitch.tsx deleted file mode 100644 index e8854c72..00000000 --- a/frontend/components/elements/DarkModeSwitch.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import styles from "./DarkModeSwitch.module.scss"; - -export interface DarkModeProps { - darkMode: boolean; - setDarkMode: any; -} -const DarkModeSwitch = ({ darkMode, setDarkMode }: DarkModeProps) => ( -
{ - setDarkMode(!darkMode); - }}> -
-
-); - -export default DarkModeSwitch; diff --git a/frontend/components/elements/Header.tsx b/frontend/components/elements/Header.tsx index 77258a2a..fc661a0e 100644 --- a/frontend/components/elements/Header.tsx +++ b/frontend/components/elements/Header.tsx @@ -1,30 +1,23 @@ import { Category } from "../../data/category"; import NavBar from "../views/NavBar"; -import DarkModeSwitch from "./DarkModeSwitch"; import styles from "./Header.module.scss"; export interface HeaderProps { categories: Category[]; show: boolean; setShow: any; - darkMode: boolean; - setDarkMode: any; } const Header = ({ categories, show, setShow, - darkMode, - setDarkMode }: HeaderProps) => (