From b263229406528da69be87c9487376489e191217b Mon Sep 17 00:00:00 2001 From: midblep Date: Mon, 5 Jul 2021 00:15:52 +0200 Subject: [PATCH] added dark mode --- components/menu.tsx | 2 ++ components/themetoggle.tsx | 24 +++++++++++++++ pages/index.tsx | 27 ++++++++-------- styles/globals.css | 63 +++++++++++++++++++++++++++----------- 4 files changed, 86 insertions(+), 30 deletions(-) create mode 100644 components/themetoggle.tsx diff --git a/components/menu.tsx b/components/menu.tsx index 0992811..5950212 100644 --- a/components/menu.tsx +++ b/components/menu.tsx @@ -3,6 +3,7 @@ import Image from 'next/image'; import styles from '../styles/components/Menu.module.css'; import Link from 'next/link'; import logo from "../public/img/logoblue.png"; +import ThemeToggle from './themetoggle'; export default function Menu() { return ( @@ -21,6 +22,7 @@ export default function Menu() {
Showcase
Services
Contact
+ diff --git a/components/themetoggle.tsx b/components/themetoggle.tsx new file mode 100644 index 0000000..fd83cda --- /dev/null +++ b/components/themetoggle.tsx @@ -0,0 +1,24 @@ +import styles from '../styles/components/Buttons.module.css'; +import Link from 'next/link' +import { useState, useEffect } from "react"; + +export default function ThemeToggle() { + const [activeTheme, setActiveTheme] = useState("light"); + const inactiveTheme = activeTheme === "light" ? "dark" : "light"; + + useEffect(() => { + const savedTheme = window.localStorage.getItem("theme"); + savedTheme && setActiveTheme(savedTheme); + }, []); + + useEffect(() => { + document.body.dataset.theme = activeTheme; + window.localStorage.setItem("theme", activeTheme); + }, [activeTheme]); + + return ( + setActiveTheme(inactiveTheme)} href="#"> + 🌙 + + ) +} \ No newline at end of file diff --git a/pages/index.tsx b/pages/index.tsx index ac4584c..0dea913 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -55,7 +55,7 @@ export default function Home() {

Service focused

{"We can always work something out, even if what you need is not technically in our range of offerings. "} - {"Our mission is to help make you succeed and own the IT space, no matter what that might be."} + {"Our mission is to help make you succeed and own the IT space."}

@@ -96,8 +96,8 @@ export default function Home() {

Flexible and versatile

- {"We work with a large range of technologies so we can fit your needs. "} - {"We're not afraid to try out new things if the situation calls for it either."} + {"We work with a large range of technologies, "} + {"but we're not afraid to try out new things if the situation calls for it either."}

@@ -114,12 +114,12 @@ export default function Home() {

- + {" The site is amazing, the work that went into this is incredible. "} {" The look and small details make it so amazing. "} {" I highly recommend getting yourself a sight made by DubbelNull, their talent is outstanding and the customer service was amazing. "} {" They were always there to answer any questions I had and were happy to change the things I wanted. "} - +

— Trick @ trickthefox.com
@@ -127,19 +127,22 @@ export default function Home() {
- {/*
+

- - {" Wheter it is PHP Laravel, NodeJS Nextjs or even Wordpress, we can do it. Wheter it is PHP Laravel, NodeJS Nextjs or even Wordpress, we can do it. Wheter it is PHP Laravel, NodeJS Nextjs or even Wordpress, we can do it. "} - + + {" The site is amazing, the work that went into this is incredible. "} + {" The look and small details make it so amazing. "} + {" I highly recommend getting yourself a sight made by DubbelNull, their talent is outstanding and the customer service was amazing. "} + {" They were always there to answer any questions I had and were happy to change the things I wanted. "} +

- — Merete & Melvyn @ lifecentrelivingston.com -
+ — Trick @ trickthefox.com +
-
*/} +
diff --git a/styles/globals.css b/styles/globals.css index 804b631..7a9c944 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -1,3 +1,44 @@ +/* variables */ +body, body[data-theme="light"] { + --theme-color: #2463EB; + --theme-color-dilluted: rgba(36, 99, 235, 0.1); + --theme-color-500: rgba(36, 99, 235, 0.5); + + --box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1); + + --background-color: #F3F4F6; + --background-color-light: #1044b427; + --background-color-dark: #E5E7EB; + --background-color-body: white; + + --text-color: black; + + --padding: 20px; + --padding-lg: 50px; + --padding-xl: 100px; +} + +body, body[data-theme="dark"] { + --theme-color: #2463EB; + --theme-color-dilluted: rgba(36, 99, 235, 0.1); + --theme-color-500: rgba(36, 99, 235, 0.5); + + --box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1); + + --background-color: #1F2937; + --background-color-light: #374151; + --background-color-dark: #374151; + --background-color-body: #111827; + + --text-color: white; + + --padding: 20px; + --padding-lg: 50px; + --padding-xl: 100px; +} + + +/* html */ @import url('https://fonts.googleapis.com/css2?family=Red+Hat+Text:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&display=swap'); @@ -7,6 +48,8 @@ body { margin: 0; font-family: 'Red Hat Text'; font-size: 1.1rem; + background-color: var(--background-color-body); + color: var(--text-color); } h1, h2, h3, h4, h5 { @@ -31,27 +74,11 @@ hr { color: rgba(0,0,0,0.1); } -/* variables */ -:root { - --theme-color: #2463EB; - --theme-color-dilluted: rgba(36, 99, 235, 0.1); - --theme-color-500: rgba(36, 99, 235, 0.5); - - --box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1); - - --background-color: #F3F4F6; - --background-color-light: #1044b427; - --background-color-dark: #E5E7EB; - - --padding: 20px; - --padding-lg: 50px; - --padding-xl: 100px; -} - /* layout */ .page { - background-color: #fff; + background-color: var(--background-color-body); + color: var(--text-color); } .container {