added dark mode

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() {
                     <div className={styles.disabled}><Link href="">Showcase</Link></div>
                     <div className={styles.disabled}><Link href="">Services</Link></div>
                     <div className={styles.disabled}><Link href="">Contact</Link></div>
+                    <ThemeToggle />
                 </div>
             </div>
         </menu>

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 (
+        <a onClick={() => setActiveTheme(inactiveTheme)} href="#">
+            <span>🌙</span>
+        </a>
+    )
+}

pages/index.tsx

@@ -55,7 +55,7 @@ export default function Home() {
                                 <h3>Service focused</h3>
                                 <p>
                                     {"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."}
                                 </p>
                             </div>
                         </div>
@@ -96,8 +96,8 @@ export default function Home() {
                             <div>
                                 <h3>Flexible and versatile</h3>
                                 <p>
-                                    {"We work with a large range of technologies so we can fit your needs. "}
+                                    {"We work with a large range of technologies, "}
-                                    {"We're not afraid to try out new things if the situation calls for it either."}
+                                    {"but we're not afraid to try out new things if the situation calls for it either."}
                                 </p>
                             </div>
                         </div>
@@ -114,12 +114,12 @@ export default function Home() {
                             </div>
                             <div>
                                 <p>
-                                    <FontAwesomeIcon icon={faQuoteLeft} size="1x" style={{color: "gray"}} />
+                                    <FontAwesomeIcon icon={faQuoteLeft} size="1x" style={{color: "darkgray"}} />
                                     {" 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. "}
-                                    <FontAwesomeIcon icon={faQuoteRight} size="1x" style={{color: "gray"}} />
+                                    <FontAwesomeIcon icon={faQuoteRight} size="1x" style={{color: "darkgray"}} />
                                 </p>
                                 <i>— Trick @ <a href="https://trickthefox.com" target="_blank" rel="noreferrer">trickthefox.com</a></i>
                             </div> 
@@ -127,19 +127,22 @@ export default function Home() {
 
                         <br/>
 
-                        {/* <div className={styles.quote}>
+                        <div className={styles.quote}>
                             <div>
                                 <p>
-                                    <FontAwesomeIcon icon={faQuoteLeft} size="1x" style={{color: "gray"}} />
+                                    <FontAwesomeIcon icon={faQuoteLeft} size="1x" style={{color: "darkgray"}} />
-                                    {" 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. "}
-                                    <FontAwesomeIcon icon={faQuoteRight} size="1x" style={{color: "gray"}} />
+                                    {" 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. "}
+                                    <FontAwesomeIcon icon={faQuoteRight} size="1x" style={{color: "darkgray"}} />
                                 </p>
-                                <i>— Merete & Melvyn @ <a href="https://lifecentrelivingston.com" target="_blank" rel="noreferrer">lifecentrelivingston.com</a></i>
+                                <i>— Trick @ <a href="https://trickthefox.com" target="_blank" rel="noreferrer">trickthefox.com</a></i>
-                            </div>
+                            </div> 
                             <div>
                                 <FontAwesomeIcon icon={faQuoteRight} size="6x" style={{color: "var(--theme-color)"}} />
                             </div>
-                        </div> */}
+                        </div>
                     </section>
 
                     <hr/>

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 {