Created toggle for changing between dark/light mode

.prettierrc

@@ -0,0 +1 @@
+{"tabWidth": 2}

components/Community.module.css → components/Community.module.scss

@@ -33,3 +33,14 @@
 .block p {
   flex: 1;
 }
+
+:global(html.dark) {
+  .block {
+    background: var(--dark75) !important;
+    border: var(--border);
+
+    svg {
+      fill: var(--base900);
+    }
+  }
+}

components/Community.tsx

@@ -1,28 +1,29 @@
-import { Button, Row, Column } from 'react-basics';
-import GitHub from 'assets/github.svg';
-import Discord from 'assets/discord.svg';
-import Twitter from 'assets/twitter.svg';
-import styles from './Community.module.css';
-import { REPO_URL, DISCORD_URL, TWITTER_URL } from '../lib/constants';
-import Link from 'next/link';
+import { Button, Row, Column } from "react-basics";
+import GitHub from "assets/github.svg";
+import Discord from "assets/discord.svg";
+import Twitter from "assets/twitter.svg";
+import styles from "./Community.module.scss";
+import { REPO_URL, DISCORD_URL, TWITTER_URL } from "../lib/constants";
+import Link from "next/link";
 
 const items = [
   {
-    name: 'GitHub',
+    name: "GitHub",
     description:
-      'Check out the Umami source code, report issues, request features and join discussions.',
+      "Check out the Umami source code, report issues, request features and join discussions.",
     url: REPO_URL,
     icon: <GitHub />,
   },
   {
-    name: 'Discord',
-    description: "Chat directly with developers and other users in Umami's Discord channel.",
+    name: "Discord",
+    description:
+      "Chat directly with developers and other users in Umami's Discord channel.",
     url: DISCORD_URL,
     icon: <Discord />,
   },
   {
-    name: 'Twitter',
-    description: 'Follow us on Twitter for the latest news and updates.',
+    name: "Twitter",
+    description: "Follow us on Twitter for the latest news and updates.",
     url: TWITTER_URL,
     icon: <Twitter />,
   },

components/EmailSignup.module.css → components/EmailSignup.module.scss

@@ -25,3 +25,10 @@
 .confirm svg {
   fill: var(--green400);
 }
+
+:global(html.dark) {
+  .container {
+    border-color: var(--border);
+    box-shadow: 4px 4px 4px rgb(0, 0, 0, 0.2);
+  }
+}

components/EmailSignup.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Button, Row, Column, TextField } from 'react-basics';
 import CheckCircle from 'assets/check-circle.svg';
-import styles from './EmailSignup.module.css';
+import styles from './EmailSignup.module.scss';
 
 interface Props {
   type: string;

components/Features.module.css

@@ -24,13 +24,17 @@
 }
 
 .feature:not(:first-child):after {
-  content: '';
+  content: "";
   position: absolute;
   height: 200px;
   top: -200px;
   left: 0;
   right: 0;
-  background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 50%);
+  background: linear-gradient(
+    0deg,
+    rgba(255, 255, 255, 1) 0%,
+    rgba(255, 255, 255, 0) 50%
+  );
 }
 
 .text {
@@ -48,3 +52,13 @@
     font-size: 2rem;
   }
 }
+
+:global(html.dark) .feature:not(:first-child):after {
+  content: "";
+  position: absolute;
+  height: 200px;
+  top: -200px;
+  left: 0;
+  right: 0;
+  background: linear-gradient(0deg, #181a1b 0%, rgba(255, 255, 255, 0) 50%);
+}

components/Footer.module.css → components/Footer.module.scss

@@ -36,3 +36,10 @@
   display: flex;
   gap: 10px;
 }
+
+:global(html.dark) {
+  .footer {
+    border-color: var(--border);
+    background: #1b1d1e;
+  }
+}

components/Footer.tsx

@@ -1,44 +1,47 @@
-import React from 'react';
-import { Row, Column, Container } from 'react-basics';
-import Link from 'next/link';
-import classNames from 'classnames';
-import CompanyLogo from './CompanyLogo';
-import SocialMedia from './SocialMedia';
-import styles from './Footer.module.css';
+import React from "react";
+import { Row, Column, Container } from "react-basics";
+import Link from "next/link";
+import classNames from "classnames";
+import CompanyLogo from "./CompanyLogo";
+import SocialMedia from "./SocialMedia";
+import styles from "./Footer.module.scss";
 
 const data = [
   {
-    title: 'Product',
+    title: "Product",
     items: [
-      { text: 'Features', href: '/features' },
-      { text: 'Pricing', href: '/pricing' },
+      { text: "Features", href: "/features" },
+      { text: "Pricing", href: "/pricing" },
     ],
   },
   {
-    title: 'Resources',
+    title: "Resources",
     items: [
-      { text: 'Docs', href: '/docs' },
-      { text: 'Guides', href: '/docs/guides' },
-      { text: 'API Reference', href: '/docs/api' },
-      { text: 'Release Notes', href: 'https://github.com/umami-software/umami/releases' },
+      { text: "Docs", href: "/docs" },
+      { text: "Guides", href: "/docs/guides" },
+      { text: "API Reference", href: "/docs/api" },
+      {
+        text: "Release Notes",
+        href: "https://github.com/umami-software/umami/releases",
+      },
     ],
   },
   {
-    title: 'Community',
+    title: "Community",
     items: [
-      { text: 'Get Involved', href: '/community' },
-      { text: 'GitHub', href: 'https://github.com/umami-software/umami' },
-      { text: 'Discord', href: 'https://discord.gg/4dz4zcXYrQ' },
-      { text: 'Twitter', href: 'https://twitter.com/umami_software' },
+      { text: "Get Involved", href: "/community" },
+      { text: "GitHub", href: "https://github.com/umami-software/umami" },
+      { text: "Discord", href: "https://discord.gg/4dz4zcXYrQ" },
+      { text: "Twitter", href: "https://twitter.com/umami_software" },
     ],
   },
   {
-    title: 'Company',
+    title: "Company",
     items: [
-      { text: 'About', href: '/about' },
-      { text: 'Contact', href: '/contact' },
-      { text: 'Privacy', href: '/privacy' },
-      { text: 'Terms', href: '/terms' },
+      { text: "About", href: "/about" },
+      { text: "Contact", href: "/contact" },
+      { text: "Privacy", href: "/privacy" },
+      { text: "Terms", href: "/terms" },
     ],
   },
 ];
@@ -61,7 +64,11 @@ export default function Footer() {
             >
               <h1>{title}</h1>
               {items.map(({ text, href }) => (
-                <Link key={text} href={href} target={href.startsWith('http') ? '_blank' : null}>
+                <Link
+                  key={text}
+                  href={href}
+                  target={href.startsWith("http") ? "_blank" : null}
+                >
                   {text}
                 </Link>
               ))}

components/GetStarted.module.css → components/GetStarted.module.scss

@@ -19,3 +19,13 @@
   gap: 20px;
   padding: 24px 0;
 }
+
+:global(html.dark) {
+  .buttons .button {
+    background: var(--dark150);
+  }
+
+  .buttons .button:hover {
+    background: var(--dark200);
+  }
+}

components/GetStarted.tsx

@@ -1,12 +1,16 @@
-import { Button } from 'react-basics';
-import styles from './GetStarted.module.css';
+import { Button } from "react-basics";
+import styles from "./GetStarted.module.scss";
 
 export default function GetStarted() {
   return (
     <div className={styles.banner}>
       <h1>Are you ready for better analytics?</h1>
       <div className={styles.buttons}>
-        <a href="/docs" className="button" data-umami-event="get-started-button">
+        <a
+          href="/docs"
+          className="button"
+          data-umami-event="get-started-button"
+        >
           <Button size="lg" variant="primary">
             Get Started
           </Button>
@@ -18,7 +22,9 @@ export default function GetStarted() {
           target="_blank"
           rel="noreferrer"
         >
-          <Button size="lg">Live Demo</Button>
+          <Button size="lg" className={styles.button}>
+            Live Demo
+          </Button>
         </a>
       </div>
     </div>

components/HamburgerButton.module.scss

@@ -0,0 +1,13 @@
+.button {
+  align-self: center !important;
+}
+
+:global(html.dark) {
+  .button {
+    fill: var(--base900);
+  }
+
+  .button:hover {
+    background: var(--dark100) !important;
+  }
+}

components/HamburgerButton.tsx

@@ -1,38 +1,38 @@
-import { useState } from 'react';
-import { Button } from 'react-basics';
-import MobileMenu from './MobileMenu';
-import XMark from 'assets/xmark.svg';
-import Bars from 'assets/bars.svg';
-import styles from './HamburgerButton.module.css';
+import { useState } from "react";
+import { Button } from "react-basics";
+import MobileMenu from "./MobileMenu";
+import XMark from "assets/xmark.svg";
+import Bars from "assets/bars.svg";
+import styles from "./HamburgerButton.module.scss";
 
 const menuItems = [
   {
-    label: 'Home',
-    value: '/',
+    label: "Home",
+    value: "/",
   },
   {
-    label: 'Features',
-    value: '/features',
+    label: "Features",
+    value: "/features",
   },
   {
-    label: 'Docs',
-    value: '/docs',
+    label: "Docs",
+    value: "/docs",
   },
   {
-    label: 'Community',
-    value: '/community',
+    label: "Community",
+    value: "/community",
   },
   {
-    label: 'Pricing',
-    value: '/pricing',
+    label: "Pricing",
+    value: "/pricing",
   },
 ];
 
 export default function HamburgerButton() {
   const [active, setActive] = useState(false);
 
   function handleClick() {
-    setActive(state => !state);
+    setActive((state) => !state);
   }
 
   function handleClose() {

components/Header.module.css → components/Header.module.scss

@@ -17,6 +17,11 @@
   width: 100%;
   border: 1px solid transparent;
   transition: all ease-in-out 0.3s;
+
+  .buttons a {
+    height: 24px;
+    overflow: hidden;
+  }
 }
 
 .header svg {
@@ -58,7 +63,25 @@
   justify-content: flex-end;
 }
 
-html:not([data-scroll='0']) .header {
-  transition: all linear 0.6s;
+html:not([data-scroll="0"]) .header {
+  transition: border linear 0.6s;
   border-bottom: 1px solid var(--base300);
 }
+
+:global(html.dark) {
+  .header {
+    background: rgb(var(--base50-rgb), 0.9);
+  }
+
+  .header .links {
+    text-shadow: none;
+  }
+
+  .row .buttons a {
+    fill: var(--base900);
+  }
+}
+
+:global(html:not([data-scroll="0"]).dark) .header {
+  border-color: var(--border);
+}