From d2216c09749b68057f1dc074c5bd8b560c3eddcb Mon Sep 17 00:00:00 2001
From: Giovanni Martire <akinari@outlook.it>
Date: Sun, 7 Apr 2024 21:10:05 +0200
Subject: [PATCH 1/2] dark mode implementation

---
 app/globals.css                               | 127 +++++++++++++++++-
 app/layout.tsx                                |  21 +--
 .../FilterChangeButton.module.css             |   2 +-
 .../Charts/InlineChart/InlineChart.module.css |   4 +
 components/Charts/RadarChart/RadarChart.tsx   |  14 +-
 .../ModeSwitcher/ModeSwitcher.module.css      |   5 +
 components/NavBar/NavBar.module.css           |   9 +-
 components/NavBar/NavBar.tsx                  |   8 +-
 .../ThemeSwitcher/ThemeSwitcher.module.css    |  14 ++
 .../NavBar/ThemeSwitcher/ThemeSwitcher.tsx    |  22 +++
 package-lock.json                             |  10 ++
 package.json                                  |   1 +
 public/icons/sun.svg                          |   3 +
 13 files changed, 215 insertions(+), 25 deletions(-)
 create mode 100644 components/NavBar/ThemeSwitcher/ThemeSwitcher.module.css
 create mode 100644 components/NavBar/ThemeSwitcher/ThemeSwitcher.tsx
 create mode 100644 public/icons/sun.svg

diff --git a/app/globals.css b/app/globals.css
index c0a4747..8c246ea 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -123,6 +123,131 @@
   --toast-error-border: 50, 70%, 64%;
 }
 
+[data-theme='dark'] {
+  --max-width: 1100px;
+  --border-radius: 12px;
+  --font-families: var(--font-Inter), ui-monospace, Menlo, Monaco,
+    'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', 'Oxygen Mono',
+    'Ubuntu Monospace', 'Source Code Pro', 'Fira Mono', 'Droid Sans Mono',
+    'Courier New', monospace;
+
+  /* --main-padding: 2.5rem; 
+  --internal-gap: 0.8rem; */
+  --main-padding: 2vw; /* fluid design */
+  --internal-gap: 1vw; /* fluid design */
+  --main-borderRadius: 0.75rem;
+
+  --color-grey: 0, 0%, 6%;
+
+  /* COLORS */
+
+  --gray-950: 210, 20%, 98%; /* #4d94ff, #4280de, #376dbe, #2c5a9e, #224880, #183663, #0f2648, #07162e, #020816, #000103 */
+  --gray-900: 220, 14%, 96%;
+  --gray-800: 220, 13%, 91%;
+  --gray-700: 216, 12%, 84%;
+  --gray-600: 218, 11%, 65%;
+  --gray-500: 220, 9%, 46%;
+  --gray-400: 215, 14%, 34%;
+  --gray-300: 217, 19%, 27%;
+  --gray-200: 215, 28%, 17%;
+  --gray-100: 221, 39%, 11%;
+  --gray-50: 224, 71%, 4%;
+
+  --blue-50: 214, 100%, 97%;
+  --blue-100: 214, 95%, 93%;
+  --blue-200: 213, 97%, 87%;
+  --blue-300: 212, 96%, 78%;
+  --blue-400: 213, 94%, 68%;
+  --blue-500: 217, 91%, 60%;
+  --blue-600: 221, 83%, 53%;
+  --blue-700: 224, 76%, 48%;
+  --blue-800: 226, 71%, 40%;
+  --blue-900: 224, 64%, 33%;
+  --blue-950: 226, 57%, 21%;
+
+  --yellow-50: 55, 92%, 95%;
+  --yellow-100: 55, 97%, 88%;
+  --yellow-200: 53, 98%, 77%;
+  --yellow-300: 50, 98%, 64%;
+  --yellow-400: 48, 96%, 53%;
+  --yellow-500: 45, 93%, 47%;
+  --yellow-600: 41, 96%, 40%;
+  --yellow-700: 35, 92%, 33%;
+  --yellow-800: 32, 81%, 29%;
+  --yellow-900: 28, 73%, 26%;
+  --yellow-950: 26, 83%, 14%;
+
+  --red-50: 0, 86%, 97%;
+  --red-100: 0, 93%, 94%;
+  --red-200: 0, 96%, 89%;
+  --red-300: 0, 94%, 82%;
+  --red-400: 0, 91%, 71%;
+  --red-500: 0, 84%, 60%;
+  --red-600: 0, 72%, 51%;
+  --red-700: 0, 74%, 42%;
+  --red-800: 0, 70%, 35%;
+  --red-900: 0, 63%, 31%;
+  --red-950: 0, 75%, 15%;
+
+  --green-50: 138, 76%, 97%;
+  --green-100: 141, 84%, 93%;
+  --green-200: 141, 79%, 85%;
+  --green-300: 142, 77%, 73%;
+  --green-400: 142, 69%, 58%;
+  --green-500: 142, 71%, 45%;
+  --green-600: 142, 76%, 36%;
+  --green-700: 142, 72%, 29%;
+  --green-800: 143, 64%, 24%;
+  --green-900: 144, 61%, 20%;
+  --green-950: 145, 80%, 10%;
+
+  --background-hsl: 222, 45%, 8%;
+  --foreground-hsl: 0, 0%, 90%;
+
+  --mods-NM-bg: 226, 99%, 65%;
+  --mods-NM-bg-row: 226, 99%, 65%, 0.15;
+  --mods-HD-bg: 43, 98%, 60%;
+  --mods-HD-bg-row: 43, 98%, 60%, 0.15;
+  --mods-HR-bg: 0, 100%, 69%;
+  --mods-HR-bg-row: 0, 100%, 69%, 0.15;
+  --mods-HDHR-bg: 13, 98%, 60%;
+  --mods-HDHR-bg-row: 13, 98%, 60%, 0.15;
+  --mods-HDDT-bg: 302, 97%, 86%;
+  --mods-HDDT-bg-row: 302, 97%, 86%, 0.15;
+  --mods-EZ-bg: 120, 100%, 50%;
+  --mods-EZ-bg-row: 120, 100%, 50%, 0.15;
+  --mods-FL-bg: 0, 0%, 8%;
+  --mods-FL-bg-row: 0, 0%, 8%, 0.15;
+  --mods-HT-bg: 6, 34%, 52%;
+  --mods-HT-bg-row: 6, 34%, 52%, 0.15;
+  --mods-DT-bg: 267, 97%, 73%;
+  --mods-DT-bg-row: 267, 97%, 73%, 0.15;
+  --mods-FM-bg: 101, 38%, 63%;
+  --mods-FM-bg-row: 101, 38%, 63%, 0.15;
+  --mods-TB-bg: 191, 26%, 57%;
+  --mods-TB-bg-row: 191, 26%, 57%, 0.15;
+
+  --accent-color: 216, 100%, 65%;
+  --accent-secondary-color: var(--blue-400);
+
+  /* CHARTS */
+  --tooltip-color: 0, 0%, 100%;
+  --tooltip-gain: var(--green-400);
+  --tooltip-loss: var(--red-400);
+
+  /* BADGES */
+  --badge-provisional-background: var(--yellow-400);
+  --badge-provisional-foreground: var(--yellow-900);
+
+  /* USER RATING TIER */
+  --tier-bar-background: var(--gray-300);
+  --tier-bar-accent: var(--accent-color);
+
+  /* TOAST */
+  --toast-error-bg: var(--yellow-200);
+  --toast-error-border: 50, 70%, 64%;
+}
+
 * {
   box-sizing: border-box;
   padding: 0;
@@ -139,7 +264,7 @@ body {
 }
 
 body {
-  background-color: hsl(var(--background-rgb));
+  background-color: hsl(var(--background-hsl));
   color: hsl(var(--foreground-hsl));
   font-family: var(--font-families);
   min-height: 100vh;
diff --git a/app/layout.tsx b/app/layout.tsx
index 6732abc..1b3ca67 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -4,6 +4,7 @@ import ErrorProvider from '@/util/ErrorContext';
 import UserProvider from '@/util/UserLoggedContext';
 import type { Metadata } from 'next';
 import { Viewport } from 'next';
+import { ThemeProvider } from 'next-themes';
 import { Inter } from 'next/font/google';
 import './globals.css';
 
@@ -31,16 +32,18 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en" className={inter.variable}>
+    <html lang="en" className={inter.variable} suppressHydrationWarning>
       <body>
-        <ErrorProvider>
-          <UserProvider>
-            <LayoutProvider>
-              {children}
-              <Footer />
-            </LayoutProvider>
-          </UserProvider>
-        </ErrorProvider>
+        <ThemeProvider defaultTheme="light" enableSystem={false}>
+          <ErrorProvider>
+            <UserProvider>
+              <LayoutProvider>
+                {children}
+                <Footer />
+              </LayoutProvider>
+            </UserProvider>
+          </ErrorProvider>
+        </ThemeProvider>
       </body>
     </html>
   );
diff --git a/components/Button/FilterChangeButton/FilterChangeButton.module.css b/components/Button/FilterChangeButton/FilterChangeButton.module.css
index 37e80a5..1f44884 100644
--- a/components/Button/FilterChangeButton/FilterChangeButton.module.css
+++ b/components/Button/FilterChangeButton/FilterChangeButton.module.css
@@ -8,7 +8,7 @@
 }
 
 .button.selected {
-  background-color: hsla(var(--blue-300));
+  background-color: hsla(var(--accent-secondary-color));
   color: #ffffff;
   font-weight: 600;
 }
diff --git a/components/Charts/InlineChart/InlineChart.module.css b/components/Charts/InlineChart/InlineChart.module.css
index 60f4116..1c0894a 100644
--- a/components/Charts/InlineChart/InlineChart.module.css
+++ b/components/Charts/InlineChart/InlineChart.module.css
@@ -44,3 +44,7 @@
   position: absolute;
   bottom: -1.6rem;
 }
+
+[data-theme='dark'] .segment .percentile {
+  color: hsl(0, 0%, 6%);
+}
diff --git a/components/Charts/RadarChart/RadarChart.tsx b/components/Charts/RadarChart/RadarChart.tsx
index 4f2c762..1d457e9 100644
--- a/components/Charts/RadarChart/RadarChart.tsx
+++ b/components/Charts/RadarChart/RadarChart.tsx
@@ -9,6 +9,7 @@ import {
   RadialLinearScale,
   Tooltip,
 } from 'chart.js';
+import { useTheme } from 'next-themes';
 import { useEffect, useState } from 'react';
 import { Radar } from 'react-chartjs-2';
 import styles from './RadarChart.module.css';
@@ -37,6 +38,8 @@ export default function RadarChart({
   winrateModData?: any;
   averageModScore?: any;
 }) {
+  const { theme } = useTheme();
+
   const [colors, setColors] = useState<string[]>([]);
   const [font, setFont] = useState('');
 
@@ -170,8 +173,14 @@ export default function RadarChart({
             family: font,
             weight: 600,
           },
+          color: theme === 'dark' ? 'rgba(250,250,250,0.8)' : '#656565',
+        },
+        grid: {
+          color:
+            theme === 'dark' ? 'rgba(250,250,250,0.028)' : 'rgba(0,0,0,0.08)',
         },
-        backgroundColor: 'rgb(250,250,250)',
+        backgroundColor:
+          theme === 'light' ? 'rgb(250,250,250)' : 'rgba(0,0,0,0.05)',
         beginAtZero: false,
         angleLines: {
           borderDash: (context: any) => {
@@ -180,6 +189,8 @@ export default function RadarChart({
             const spaceInPx = space / ticksLength;
             return [0, 0, 0, spaceInPx, 2500];
           },
+          color:
+            theme === 'dark' ? 'rgba(250,250,250,0.028)' : 'rgba(0,0,0,0.08)',
         },
         min: winrateModData ? -25 : averageModScore ? -200000 : -25,
         max: winrateModData ? 100 : averageModScore ? 1000000 : 100,
@@ -189,6 +200,7 @@ export default function RadarChart({
             family: font,
             weight: 300,
           },
+          color: theme === 'dark' ? 'rgba(250,250,250,0.7)' : '#707070',
           stepSize: winrateModData ? 25 : averageModScore ? 200000 : 25,
           callback: (value: any, tick: any, values: any) => {
             return value !== 0
diff --git a/components/NavBar/ModeSwitcher/ModeSwitcher.module.css b/components/NavBar/ModeSwitcher/ModeSwitcher.module.css
index c32e735..0761061 100644
--- a/components/NavBar/ModeSwitcher/ModeSwitcher.module.css
+++ b/components/NavBar/ModeSwitcher/ModeSwitcher.module.css
@@ -42,3 +42,8 @@
   /* background-color: hsla(0, 0%, 0%, 0.05); */
   color: hsla(var(--gray-600));
 }
+
+[data-theme='dark'] .switchButton img {
+  -webkit-filter: invert(90%);
+  filter: invert(90%);
+}
diff --git a/components/NavBar/NavBar.module.css b/components/NavBar/NavBar.module.css
index c44e9d3..ee05d1e 100644
--- a/components/NavBar/NavBar.module.css
+++ b/components/NavBar/NavBar.module.css
@@ -62,14 +62,9 @@
   overflow: hidden;
 }
 
-.darkModeSwitcher {
-  position: relative;
-  height: 1.85rem;
-  width: 1.9rem;
-}
-
-:is(.userPropic, .logoLink, .darkModeSwitcher) img {
+:is(.userPropic, .logoLink, .themeSwitcher) img {
   object-fit: contain;
+  fill: white;
 }
 
 @media (max-width: 1040px) {
diff --git a/components/NavBar/NavBar.tsx b/components/NavBar/NavBar.tsx
index 97ce2eb..bb6c21c 100644
--- a/components/NavBar/NavBar.tsx
+++ b/components/NavBar/NavBar.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import { getOsuModeCookie } from '@/app/actions';
-import moonSVG from '@/public/icons/moon.svg';
 import logo from '@/public/logos/small.svg';
 import Image from 'next/image';
 import Link from 'next/link';
@@ -10,6 +9,7 @@ import HamburgerMobile from './HamburgerMobile/HamburgerMobile';
 import ModeSwitcher from './ModeSwitcher/ModeSwitcher';
 import styles from './NavBar.module.css';
 import Routes from './Routes/Routes';
+import ThemeSwitcher from './ThemeSwitcher/ThemeSwitcher';
 import UserLogged from './UserLogged/UserLogged';
 
 export default function NavBar() {
@@ -32,11 +32,7 @@ export default function NavBar() {
         {/* <Link href={'/donate'}>Donate</Link> */}
         <div className={styles.actions}>
           {cookieMode?.value && <ModeSwitcher mode={cookieMode?.value} />}
-          <button>
-            <div className={styles.darkModeSwitcher}>
-              <Image src={moonSVG} alt="Dark Mode Switcher" fill />
-            </div>
-          </button>
+          <ThemeSwitcher />
           <UserLogged />
         </div>
       </div>
diff --git a/components/NavBar/ThemeSwitcher/ThemeSwitcher.module.css b/components/NavBar/ThemeSwitcher/ThemeSwitcher.module.css
new file mode 100644
index 0000000..414b09f
--- /dev/null
+++ b/components/NavBar/ThemeSwitcher/ThemeSwitcher.module.css
@@ -0,0 +1,14 @@
+.themeSwitcher {
+  position: relative;
+  height: 1.85rem;
+  width: 1.9rem;
+}
+
+.themeSwitcher img {
+  object-fit: contain;
+}
+
+[data-theme='dark'] .themeSwitcher img {
+  -webkit-filter: invert(90%);
+  filter: invert(90%);
+}
diff --git a/components/NavBar/ThemeSwitcher/ThemeSwitcher.tsx b/components/NavBar/ThemeSwitcher/ThemeSwitcher.tsx
new file mode 100644
index 0000000..106c594
--- /dev/null
+++ b/components/NavBar/ThemeSwitcher/ThemeSwitcher.tsx
@@ -0,0 +1,22 @@
+'use client';
+import moonSVG from '@/public/icons/moon.svg';
+import sunSVG from '@/public/icons/sun.svg';
+import { useTheme } from 'next-themes';
+import Image from 'next/image';
+import styles from './ThemeSwitcher.module.css';
+
+export default function ThemeSwitcher() {
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
+      <div className={styles.themeSwitcher}>
+        <Image
+          src={theme === 'light' ? sunSVG : moonSVG}
+          alt="Theme Switcher"
+          fill
+        />
+      </div>
+    </button>
+  );
+}
diff --git a/package-lock.json b/package-lock.json
index 605c1dc..9eceece 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "framer-motion": "^10.16.4",
         "iron-session": "^8.0.1",
         "next": "^14.1.2",
+        "next-themes": "^0.3.0",
         "react": "^18",
         "react-chartjs-2": "^5.2.0",
         "react-dom": "^18",
@@ -2945,6 +2946,15 @@
         }
       }
     },
+    "node_modules/next-themes": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.3.0.tgz",
+      "integrity": "sha512-/QHIrsYpd6Kfk7xakK4svpDI5mmXP0gfvCoJdGpZQ2TOrQZmsW0QxjaiLn8wbIKjtm4BTSqLoix4lxYYOnLJ/w==",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18",
+        "react-dom": "^16.8 || ^17 || ^18"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
diff --git a/package.json b/package.json
index 9c9b7d0..2455622 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "framer-motion": "^10.16.4",
     "iron-session": "^8.0.1",
     "next": "^14.1.2",
+    "next-themes": "^0.3.0",
     "react": "^18",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18",
diff --git a/public/icons/sun.svg b/public/icons/sun.svg
new file mode 100644
index 0000000..5aa46ad
--- /dev/null
+++ b/public/icons/sun.svg
@@ -0,0 +1,3 @@
+<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 3.85709V1M21 41V38.1429M38.1429 21H41M3.85714 21H1M6.71429 6.71419L3.85714 3.85709M38.1429 3.85709L35.2857 6.71419M6.71429 35.2856L3.85714 38.1429M38.1429 38.1429L35.2857 35.2856M29.5714 21C29.5714 25.7343 25.7343 29.5715 21 29.5715C16.2657 29.5715 12.4286 25.7343 12.4286 21C12.4286 16.2657 16.2657 12.4285 21 12.4285C25.7343 12.4285 29.5714 16.2657 29.5714 21Z" stroke="black" stroke-width="2" stroke-linecap="square"/>
+</svg>

From 2b26e6e47cb28c5bb3fc30d2d63db39ca3ada0ba Mon Sep 17 00:00:00 2001
From: Giovanni Martire <akinari@outlook.it>
Date: Mon, 8 Apr 2024 19:51:14 +0200
Subject: [PATCH 2/2] dark mode color change

---
 app/dashboard/page.module.css                 |  2 +-
 app/globals.css                               | 23 +++++++++++----
 app/page.module.css                           |  4 +--
 app/page.tsx                                  | 14 +++++++--
 .../Provisional/provisionalBadge.module.css   |  4 +++
 components/Card/Card.module.css               |  2 +-
 .../Charts/AreaChart/AreaChart.module.css     |  5 +++-
 components/Charts/AreaChart/AreaChart.tsx     | 29 +++++++++++++++++--
 .../FiltersCollapsible.module.css             |  6 +++-
 .../FilterChangeButton.module.css             |  4 +--
 .../Dashboard/GridCard/GridCard.module.css    |  2 +-
 .../UserTotalMatches.module.css               |  2 +-
 .../UserMainCard/UserMainCard.module.css      |  4 +--
 components/Footer/Footer.module.css           |  2 +-
 components/Form/Form.module.css               |  2 +-
 components/Leaderboard/Leaderboard.module.css |  9 ++++--
 components/Leaderboard/Leaderboard.tsx        |  2 +-
 .../UserStats/UserStats.module.css            |  2 +-
 .../HamburgerMobile.module.css                |  2 +-
 .../ModeSwitcher/ModeSwitcher.module.css      |  6 ++--
 components/NavBar/NavBar.module.css           |  7 +++--
 .../ThemeSwitcher/ThemeSwitcher.module.css    |  4 +--
 components/Range/RangeSlider.module.css       |  6 +++-
 .../MatchForm/MatchForm.module.css            |  2 +-
 public/logos/full-logo-dark.svg               |  9 ++++++
 25 files changed, 116 insertions(+), 38 deletions(-)
 create mode 100644 public/logos/full-logo-dark.svg

diff --git a/app/dashboard/page.module.css b/app/dashboard/page.module.css
index d961a3d..668a0bf 100644
--- a/app/dashboard/page.module.css
+++ b/app/dashboard/page.module.css
@@ -17,7 +17,7 @@
 .graphContainer {
   display: flex;
   flex-flow: column;
-  background-color: hsla(var(--gray-100));
+  background-color: hsla(var(--background-content-hsl));
   border-radius: var(--main-borderRadius);
   padding: var(--main-padding);
   gap: 1.2rem;
diff --git a/app/globals.css b/app/globals.css
index 8c246ea..0254628 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -13,7 +13,11 @@
   --main-borderRadius: 0.75rem;
 
   --background-hsl: 0, 0%, 100%;
+  --background-content-hsl: 220, 14%, 96%;
+  --background-content-childs-hsl: 220, 13%, 91%;
   --foreground-hsl: 0, 0%, 6%;
+  --foreground-inactive-hsl: 0, 0%, 6%;
+  --foreground-active-hsl: 0, 0%, 6%;
 
   --color-grey: 0, 0%, 6%;
 
@@ -141,7 +145,7 @@
 
   /* COLORS */
 
-  --gray-950: 210, 20%, 98%; /* #4d94ff, #4280de, #376dbe, #2c5a9e, #224880, #183663, #0f2648, #07162e, #020816, #000103 */
+  --gray-950: 210, 20%, 98%;
   --gray-900: 220, 14%, 96%;
   --gray-800: 220, 13%, 91%;
   --gray-700: 216, 12%, 84%;
@@ -201,8 +205,12 @@
   --green-900: 144, 61%, 20%;
   --green-950: 145, 80%, 10%;
 
-  --background-hsl: 222, 45%, 8%;
-  --foreground-hsl: 0, 0%, 90%;
+  --background-hsl: 240, 10%, 6%;
+  --background-content-hsl: 240, 6%, 10%;
+  --background-content-childs-hsl: 240, 5%, 14%;
+  --foreground-hsl: 0, 0%, 85%;
+  --foreground-inactive-hsl: 0, 0%, 70%;
+  --foreground-active-hsl: 0, 0%, 90%;
 
   --mods-NM-bg: 226, 99%, 65%;
   --mods-NM-bg-row: 226, 99%, 65%, 0.15;
@@ -236,11 +244,11 @@
   --tooltip-loss: var(--red-400);
 
   /* BADGES */
-  --badge-provisional-background: var(--yellow-400);
+  --badge-provisional-background: var(--yellow-300);
   --badge-provisional-foreground: var(--yellow-900);
 
   /* USER RATING TIER */
-  --tier-bar-background: var(--gray-300);
+  --tier-bar-background: 240, 5%, 21%;
   --tier-bar-accent: var(--accent-color);
 
   /* TOAST */
@@ -263,6 +271,11 @@ body {
   scroll-behavior: smooth !important;
 }
 
+[data-theme='dark'] ::selection,
+::-moz-selection {
+  background-color: hsla(var(--accent-color), 0.24);
+}
+
 body {
   background-color: hsl(var(--background-hsl));
   color: hsl(var(--foreground-hsl));
diff --git a/app/page.module.css b/app/page.module.css
index 8eeabe2..1f7aa68 100644
--- a/app/page.module.css
+++ b/app/page.module.css
@@ -9,7 +9,7 @@
 .row {
   width: 100%;
   height: 100%;
-  background-color: hsla(var(--gray-100));
+  background-color: hsla(var(--background-content-hsl));
   border-radius: var(--main-borderRadius);
   display: flex;
   flex-flow: row;
@@ -37,7 +37,7 @@
   display: flex;
   flex-flow: column;
   justify-content: space-between;
-  background-color: hsla(var(--gray-100));
+  background-color: hsla(var(--background-content-hsl));
   border-radius: var(--main-borderRadius);
   padding: var(--main-padding);
   text-align: left;
diff --git a/app/page.tsx b/app/page.tsx
index bb6878d..75a29db 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,14 +1,20 @@
+'use client';
+
 import LoginButton from '@/components/Button/LoginButton';
 import decoration1 from '@/public/decorations/decoration-1.svg';
 import decoration2 from '@/public/decorations/decoration-2.svg';
 import decoration3 from '@/public/decorations/decoration-3.svg';
 import decoration4 from '@/public/decorations/decoration-4.svg';
+import fullLogoDark from '@/public/logos/full-logo-dark.svg';
 import fullLogo from '@/public/logos/full-logo.svg';
+import { useTheme } from 'next-themes';
 import Image from 'next/image';
 import Balancer from 'react-wrap-balancer';
 import styles from './page.module.css';
 
-export default async function Home() {
+export default function Home() {
+  const { theme } = useTheme();
+
   return (
     <main className={styles.main}>
       <div className={styles.row}>
@@ -20,7 +26,11 @@ export default async function Home() {
         </div>
         <div className={styles.box}>
           <div className={styles.logo}>
-            <Image src={fullLogo} alt={'o!TR logo'} fill />
+            <Image
+              src={theme === 'light' ? fullLogo : fullLogoDark}
+              alt={'o!TR logo'}
+              fill
+            />
           </div>
         </div>
       </div>
diff --git a/components/Badges/Provisional/provisionalBadge.module.css b/components/Badges/Provisional/provisionalBadge.module.css
index 4fe4d13..20b2ef7 100644
--- a/components/Badges/Provisional/provisionalBadge.module.css
+++ b/components/Badges/Provisional/provisionalBadge.module.css
@@ -39,6 +39,10 @@
   font-weight: 600;
 }
 
+[data-theme='dark'] .badge:after {
+  background-color: hsla(var(--badge-provisional-background), 0.9);
+}
+
 .badge:hover::after {
   visibility: visible;
   opacity: 1;
diff --git a/components/Card/Card.module.css b/components/Card/Card.module.css
index c3b7163..875d530 100644
--- a/components/Card/Card.module.css
+++ b/components/Card/Card.module.css
@@ -1,6 +1,6 @@
 .card {
   width: 100%;
-  background-color: hsla(var(--gray-100));
+  background-color: hsla(var(--background-content-hsl));
   border-radius: var(--main-borderRadius);
   padding: 1.5rem 2rem;
   display: flex;
diff --git a/components/Charts/AreaChart/AreaChart.module.css b/components/Charts/AreaChart/AreaChart.module.css
index 8e46bb9..c5aefcb 100644
--- a/components/Charts/AreaChart/AreaChart.module.css
+++ b/components/Charts/AreaChart/AreaChart.module.css
@@ -1,7 +1,6 @@
 .graphContainer {
   width: 100%;
   height: 100%;
-  /* background-color: white; */
   border-radius: var(--main-borderRadius);
 }
 
@@ -18,6 +17,10 @@
   min-width: 10em;
 }
 
+[data-theme='dark'] .tooltip {
+  background: hsla(var(--background-content-childs-hsl), 0.85);
+}
+
 .tooltip .header {
   width: 100%;
   display: flex;
diff --git a/components/Charts/AreaChart/AreaChart.tsx b/components/Charts/AreaChart/AreaChart.tsx
index fe44691..0757657 100644
--- a/components/Charts/AreaChart/AreaChart.tsx
+++ b/components/Charts/AreaChart/AreaChart.tsx
@@ -13,6 +13,7 @@ import {
   Tooltip,
 } from 'chart.js';
 import clsx from 'clsx';
+import { useTheme } from 'next-themes';
 import { useEffect, useState } from 'react';
 import { Line } from 'react-chartjs-2';
 import styles from './AreaChart.module.css';
@@ -69,6 +70,8 @@ export default function AreaChart({
 
   const [font, setFont] = useState('');
 
+  const { theme } = useTheme();
+
   /* get variables of colors from CSS */
   useEffect(() => {
     setColors([
@@ -148,7 +151,10 @@ export default function AreaChart({
         label: '',
         data: dataForGraph,
         borderWidth: 3,
-        borderColor: `hsla(${colors[0]}, 0.6)`,
+        borderColor:
+          theme === 'light'
+            ? `hsla(${colors[0]}, 0.6)`
+            : `hsla(${colors[0]}, 0.82)`,
         backgroundColor: 'transparent',
         font: font,
       },
@@ -267,7 +273,8 @@ export default function AreaChart({
       point: {
         radius: 0 /* 0 makes points hidden */,
         hitRadius: 100,
-        pointBackgroundColor: `hsla(${colors[0]}, 0.6)`,
+        pointBackgroundColor:
+          theme === 'light' ? `hsla(${colors[0]}, 0.6)` : `hsla(${colors[0]})`,
       },
     },
     maintainAspectRatio: false,
@@ -288,17 +295,35 @@ export default function AreaChart({
             size: 16,
             family: font,
           },
+          color: theme === 'dark' ? '#999' : '#707070',
           autoSkip: true,
           maxTicksLimit: 7,
           major: { enabled: true },
         },
+        grid: {
+          color:
+            theme === 'dark' ? 'rgba(250,250,250,0.028)' : 'rgba(0,0,0,0.08)',
+        },
+        border: {
+          color:
+            theme === 'dark' ? 'rgba(250,250,250,0.040)' : 'rgba(0,0,0,0.08)',
+        },
       },
       y: {
+        border: {
+          color:
+            theme === 'dark' ? 'rgba(250,250,250,0.040)' : 'rgba(0,0,0,0.08)',
+        },
+        grid: {
+          color:
+            theme === 'dark' ? 'rgba(250,250,250,0.028)' : 'rgba(0,0,0,0.08)',
+        },
         ticks: {
           font: {
             size: 16,
             family: font,
           },
+          color: theme === 'dark' ? '#999' : '#707070',
           autoSkip: true,
           maxTicksLimit: 6,
           precision: 0,
diff --git a/components/Collapsible/FiltersCollapsible/FiltersCollapsible.module.css b/components/Collapsible/FiltersCollapsible/FiltersCollapsible.module.css
index 9cec94b..f9bafe2 100644
--- a/components/Collapsible/FiltersCollapsible/FiltersCollapsible.module.css
+++ b/components/Collapsible/FiltersCollapsible/FiltersCollapsible.module.css
@@ -1,6 +1,6 @@
 .collapsible {
   width: 100%;
-  background-color: hsla(var(--gray-100));
+  background-color: hsla(var(--background-content-hsl));
   padding: var(--main-padding);
   border-radius: var(--main-borderRadius);
   display: flex;
@@ -67,6 +67,10 @@
   border-radius: 0.4rem;
 }
 
+[data-theme='dark'] .buttons .save {
+  color: #333;
+}
+
 .buttons .save:hover {
   background-color: hsla(var(--blue-500), 0.8);
   color: #fff;
diff --git a/components/Dashboard/FilterChangeButton/FilterChangeButton.module.css b/components/Dashboard/FilterChangeButton/FilterChangeButton.module.css
index 1f44884..d9a1cb6 100644
--- a/components/Dashboard/FilterChangeButton/FilterChangeButton.module.css
+++ b/components/Dashboard/FilterChangeButton/FilterChangeButton.module.css
@@ -2,7 +2,7 @@
   border-radius: var(--main-borderRadius);
   padding: 0.8vw 2vw;
   font-size: 1.3rem;
-  background-color: hsla(var(--gray-100));
+  background-color: hsla(var(--background-content-hsl));
   transition: all 0.2s ease-out;
   text-transform: capitalize;
 }
@@ -14,7 +14,7 @@
 }
 
 .button:not(.selected):hover {
-  background-color: hsla(var(--gray-200));
+  background-color: hsla(var(--background-content-childs-hsl));
   color: hsla(var(--gray-900));
   cursor: pointer;
 }
diff --git a/components/Dashboard/GridCard/GridCard.module.css b/components/Dashboard/GridCard/GridCard.module.css
index db9302f..e75ff0b 100644
--- a/components/Dashboard/GridCard/GridCard.module.css
+++ b/components/Dashboard/GridCard/GridCard.module.css
@@ -1,7 +1,7 @@
 .card {
   display: flex;
   flex-flow: column;
-  background-color: hsla(var(--gray-100));
+  background-color: hsla(var(--background-content-hsl));
   padding: var(--main-padding);
   border-radius: var(--main-borderRadius);
   gap: 1.3rem;
diff --git a/components/Dashboard/Matches/UserTotalMatches/UserTotalMatches.module.css b/components/Dashboard/Matches/UserTotalMatches/UserTotalMatches.module.css
index 6f23274..38d34a2 100644
--- a/components/Dashboard/Matches/UserTotalMatches/UserTotalMatches.module.css
+++ b/components/Dashboard/Matches/UserTotalMatches/UserTotalMatches.module.css
@@ -3,7 +3,7 @@
   display: flex;
   flex-flow: column;
   padding: var(--main-padding);
-  background-color: hsla(var(--gray-100));
+  background-color: hsla(var(--background-content-hsl));
   border-radius: var(--main-borderRadius);
   gap: 1rem;
 }
diff --git a/components/Dashboard/UserMainCard/UserMainCard.module.css b/components/Dashboard/UserMainCard/UserMainCard.module.css
index 6967408..e47c797 100644
--- a/components/Dashboard/UserMainCard/UserMainCard.module.css
+++ b/components/Dashboard/UserMainCard/UserMainCard.module.css
@@ -13,7 +13,7 @@
   align-items: center;
   grid-area: tierImage;
   gap: 1.2rem;
-  background-color: hsla(var(--gray-100));
+  background-color: hsla(var(--background-content-hsl));
   border-radius: var(--main-borderRadius);
   padding: 1.4rem 1.8rem;
 }
@@ -44,7 +44,7 @@
   flex-flow: column;
   align-items: flex-start;
   gap: 0.5rem;
-  background-color: hsla(var(--gray-100));
+  background-color: hsla(var(--background-content-hsl));
   border-radius: var(--main-borderRadius);
   padding: 1.4rem 1.8rem;
 }
diff --git a/components/Footer/Footer.module.css b/components/Footer/Footer.module.css
index 9d62c23..ef557a0 100644
--- a/components/Footer/Footer.module.css
+++ b/components/Footer/Footer.module.css
@@ -1,7 +1,7 @@
 .footer {
   border-radius: var(--main-borderRadius);
   padding: 1rem 1.2rem;
-  background-color: hsla(var(--gray-100));
+  background-color: hsla(var(--background-content-hsl));
   margin: var(--main-padding);
   display: flex;
   flex-flow: row;
diff --git a/components/Form/Form.module.css b/components/Form/Form.module.css
index a82e0cc..edfc051 100644
--- a/components/Form/Form.module.css
+++ b/components/Form/Form.module.css
@@ -7,7 +7,7 @@
 
 .form :is(input, select, textarea, button) {
   width: 100%;
-  background-color: transparent;
+  background-color: hsla(var(--background-content-hsl));
   border: 1px solid hsla(var(--gray-500));
   border-radius: 5px;
   font-family: var(--font-families);
diff --git a/components/Leaderboard/Leaderboard.module.css b/components/Leaderboard/Leaderboard.module.css
index 52004d9..12e9f99 100644
--- a/components/Leaderboard/Leaderboard.module.css
+++ b/components/Leaderboard/Leaderboard.module.css
@@ -6,7 +6,7 @@
 
 .leaderboardContainer {
   width: 100%;
-  background-color: hsla(var(--gray-100));
+  background-color: hsla(var(--background-content-hsl));
   border-radius: var(--main-borderRadius);
   padding: var(--main-padding);
   font-size: 0.95rem;
@@ -46,13 +46,18 @@
 
 .table tbody td {
   padding: 1.2rem 2rem;
-  background-color: hsla(var(--gray-200));
+  background-color: hsla(var(--background-content-childs-hsl));
 }
 
 .table tbody tr.me td {
   background-color: hsla(var(--blue-200), 0.6);
 }
 
+[data-theme='dark'] .table tbody tr.me td {
+  background-color: hsla(var(--blue-500), 0.22);
+  color: hsla(var(--foreground-active-hsl));
+}
+
 .table th:nth-child(1) {
   width: 15%;
 }
diff --git a/components/Leaderboard/Leaderboard.tsx b/components/Leaderboard/Leaderboard.tsx
index 37d79f2..710e659 100644
--- a/components/Leaderboard/Leaderboard.tsx
+++ b/components/Leaderboard/Leaderboard.tsx
@@ -41,7 +41,7 @@ export default function Leaderboard({
           {data.leaderboard.map((player, index) => {
             return (
               <tr
-                className={user?.id === player.playerId ? styles.me : ''}
+                className={user?.osuId === player.osuId ? styles.me : ''}
                 key={index}
               >
                 <td>#{player.globalRank}</td>
diff --git a/components/Leaderboard/UserStats/UserStats.module.css b/components/Leaderboard/UserStats/UserStats.module.css
index 80094cd..fd1f702 100644
--- a/components/Leaderboard/UserStats/UserStats.module.css
+++ b/components/Leaderboard/UserStats/UserStats.module.css
@@ -1,6 +1,6 @@
 .userStatsContainer {
   width: 100%;
-  background-color: hsla(var(--gray-100));
+  background-color: hsla(var(--background-content-hsl));
   border-radius: var(--main-borderRadius);
   padding: var(--main-padding);
   display: flex;
diff --git a/components/NavBar/HamburgerMobile/HamburgerMobile.module.css b/components/NavBar/HamburgerMobile/HamburgerMobile.module.css
index 27eecdf..bce3349 100644
--- a/components/NavBar/HamburgerMobile/HamburgerMobile.module.css
+++ b/components/NavBar/HamburgerMobile/HamburgerMobile.module.css
@@ -11,7 +11,7 @@
   position: absolute;
   width: calc(100% - calc(var(--main-padding) * 2));
   margin: 0 var(--main-padding);
-  background-color: hsla(var(--gray-100));
+  background-color: hsla(var(--background-content-hsl));
   left: 0;
   top: 5.4rem;
   padding: 1.2rem;
diff --git a/components/NavBar/ModeSwitcher/ModeSwitcher.module.css b/components/NavBar/ModeSwitcher/ModeSwitcher.module.css
index 0761061..851f235 100644
--- a/components/NavBar/ModeSwitcher/ModeSwitcher.module.css
+++ b/components/NavBar/ModeSwitcher/ModeSwitcher.module.css
@@ -17,7 +17,7 @@
   position: absolute;
   top: 3.4rem;
   right: 0;
-  background-color: hsla(var(--gray-100));
+  background-color: hsla(var(--background-content-hsl));
   border-radius: var(--main-borderRadius);
   overflow: hidden;
   z-index: 2;
@@ -44,6 +44,6 @@
 }
 
 [data-theme='dark'] .switchButton img {
-  -webkit-filter: invert(90%);
-  filter: invert(90%);
+  -webkit-filter: invert(75%);
+  filter: invert(75%);
 }
diff --git a/components/NavBar/NavBar.module.css b/components/NavBar/NavBar.module.css
index ee05d1e..5f5f639 100644
--- a/components/NavBar/NavBar.module.css
+++ b/components/NavBar/NavBar.module.css
@@ -1,7 +1,7 @@
 .navbar {
   border-radius: var(--main-borderRadius);
   padding: 1rem 1.5rem;
-  background-color: hsla(var(--gray-100));
+  background-color: hsla(var(--background-content-hsl));
   margin: var(--main-padding);
   display: flex;
   flex-flow: row;
@@ -26,14 +26,16 @@
 }
 
 .content a {
+  color: hsla(var(--foreground-inactive-hsl));
   transition: color 0.2s ease-out;
 }
 
 .content a:hover {
-  color: hsla(var(--gray-600));
+  color: hsla(var(--foreground-active-hsl));
 }
 
 .content a.active {
+  color: hsla(var(--foreground-active-hsl));
   font-weight: 600;
 }
 
@@ -64,7 +66,6 @@
 
 :is(.userPropic, .logoLink, .themeSwitcher) img {
   object-fit: contain;
-  fill: white;
 }
 
 @media (max-width: 1040px) {
diff --git a/components/NavBar/ThemeSwitcher/ThemeSwitcher.module.css b/components/NavBar/ThemeSwitcher/ThemeSwitcher.module.css
index 414b09f..3481a09 100644
--- a/components/NavBar/ThemeSwitcher/ThemeSwitcher.module.css
+++ b/components/NavBar/ThemeSwitcher/ThemeSwitcher.module.css
@@ -9,6 +9,6 @@
 }
 
 [data-theme='dark'] .themeSwitcher img {
-  -webkit-filter: invert(90%);
-  filter: invert(90%);
+  -webkit-filter: invert(75%);
+  filter: invert(75%);
 }
diff --git a/components/Range/RangeSlider.module.css b/components/Range/RangeSlider.module.css
index f1044c5..2379f57 100644
--- a/components/Range/RangeSlider.module.css
+++ b/components/Range/RangeSlider.module.css
@@ -82,9 +82,13 @@
   width: var(--range-height);
   aspect-ratio: 1;
   border-radius: 50vh;
-  background-color: hsl(var(--gray-100));
+  background-color: hsl(var(--background-content-hsl));
   border: 1px solid hsl(var(--gray-600));
   display: flex;
   justify-content: center;
   align-items: center;
 }
+
+[data-theme='dark'] .rangeSelector {
+  background-color: hsla(var(--background-content-childs-hsl));
+}
diff --git a/components/SubmitMatches/MatchForm/MatchForm.module.css b/components/SubmitMatches/MatchForm/MatchForm.module.css
index 1ebc0d2..ef3d6ae 100644
--- a/components/SubmitMatches/MatchForm/MatchForm.module.css
+++ b/components/SubmitMatches/MatchForm/MatchForm.module.css
@@ -5,7 +5,7 @@
   width: 100%;
   height: fit-content;
   grid-area: form;
-  background-color: hsla(var(--gray-100));
+  background-color: hsla(var(--background-content-hsl));
   border-radius: var(--main-borderRadius);
 }
 
diff --git a/public/logos/full-logo-dark.svg b/public/logos/full-logo-dark.svg
new file mode 100644
index 0000000..6057e97
--- /dev/null
+++ b/public/logos/full-logo-dark.svg
@@ -0,0 +1,9 @@
+<svg width="220" height="101" viewBox="0 0 220 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.7193 81.6307C27.8949 64.4377 27.8949 36.5623 10.7193 19.3693C-3.57309 37.5994 -3.57308 63.4006 10.7193 81.6307Z" fill="#4D94FF"/>
+<path d="M50.449 0C63.3695 5.49269e-07 76.2698 4.92918 86.1218 14.7911C94.4193 23.0969 99.2213 33.5673 100.53 44.3911H83.4473C63.9374 44.3911 45.2265 36.633 31.4309 22.8235L19.3495 10.7298C28.454 3.57587 39.4442 0 50.449 0Z" fill="#4D94FF"/>
+<path d="M31.4309 78.1766C45.2265 64.367 63.9374 56.6089 83.4473 56.6089H100.53C99.2213 67.4327 94.4193 77.9031 86.1218 86.2089C67.8808 104.468 39.1466 105.822 19.3498 90.2699L31.4309 78.1766Z" fill="#4D94FF"/>
+<path d="M10.7193 81.6307C27.8949 64.4377 27.8949 36.5623 10.7193 19.3693C-3.57309 37.5994 -3.57308 63.4006 10.7193 81.6307Z" fill="#4D94FF"/>
+<path d="M10.7193 81.6307C27.8949 64.4377 27.8949 36.5623 10.7193 19.3693C-3.57309 37.5994 -3.57308 63.4006 10.7193 81.6307Z" fill="#4D94FF"/>
+<path d="M119.22 9.7117C119.22 7.62894 119.22 6.58756 119.866 5.94053C120.512 5.2935 121.553 5.2935 123.633 5.2935H136.139C138.22 5.2935 139.26 5.2935 139.906 5.94053C140.553 6.58756 140.553 7.62894 140.553 9.7117V26.6481C140.553 28.7309 140.553 29.7723 141.199 30.4193C141.846 31.0663 142.886 31.0663 144.966 31.0663H157.472C159.553 31.0663 160.593 31.0663 161.239 31.7134C161.886 32.3604 161.886 33.4018 161.886 35.4845V43.5845C161.886 45.6673 161.886 46.7087 161.239 47.3557C160.593 48.0028 159.553 48.0027 157.472 48.0027H144.966C142.886 48.0027 141.846 48.0028 141.199 48.6498C140.553 49.2968 140.553 50.3382 140.553 52.421V91.4484C140.553 93.5311 140.553 94.5725 139.906 95.2195C139.26 95.8666 138.22 95.8666 136.139 95.8666H123.633C121.553 95.8666 120.512 95.8666 119.866 95.2195C119.22 94.5725 119.22 93.5311 119.22 91.4484V9.7117Z" fill="white"/>
+<path d="M177.334 35.4844C177.334 33.4017 177.334 32.3603 177.98 31.7133C178.627 31.0662 179.667 31.0662 181.748 31.0662H215.586C217.667 31.0662 218.707 31.0662 219.354 31.7133C220 32.3603 220 33.4017 220 35.4844V43.5845C220 45.6672 220 46.7086 219.354 47.3556C218.707 48.0027 217.667 48.0027 215.586 48.0027H203.081C201 48.0027 199.96 48.0027 199.313 48.6497C198.667 49.2967 198.667 50.3381 198.667 52.4209V91.4483C198.667 93.531 198.667 94.5724 198.021 95.2195C197.374 95.8665 196.334 95.8665 194.253 95.8665H181.748C179.667 95.8665 178.627 95.8665 177.98 95.2195C177.334 94.5724 177.334 93.531 177.334 91.4483V35.4844Z" fill="white"/>
+</svg>