dark mode implementation

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;

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>
   );

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;
 }

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%);
+}

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

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%);
+}

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

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>

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%);
+}

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>
+  );
+}

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",