DubbelNull
/
website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added dark mode

Browse Source
main
Midnight 3 years ago
parent 352de7257c
commit b263229406
4 changed files with 86 additions and 30 deletions
Show Stats Download Patch File Download Diff File

2
components/menu.tsx
Unescape View File

@ -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>

24
components/themetoggle.tsx
Unescape View File

@ -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>
)
}

25
pages/index.tsx
Unescape View File

@ -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'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."}
</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"}} />
{" 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. "}
<FontAwesomeIcon icon={faQuoteRight} 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: "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>
<FontAwesomeIcon icon={faQuoteRight} size="6x" style={{color: "var(--theme-color)"}} />
</div>
</div> */}
</div>
</section>
<hr/>

63
styles/globals.css
Unescape View File

@ -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 {

Write Preview
Loading…
Cancel
Save