Merge pull request #152 from osu-tournament-rating/feature/dark-mode

Dark Mode Implementation

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;

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%;
 
@@ -123,6 +127,135 @@
   --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%;
+  --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: 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;
+  --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-300);
+  --badge-provisional-foreground: var(--yellow-900);
+
+  /* USER RATING TIER */
+  --tier-bar-background: 240, 5%, 21%;
+  --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;
@@ -138,8 +271,13 @@ 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-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>
   );

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;

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>

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;

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

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;

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,

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