dark mode color change

osu-tournament-rating · Apr 8, 2024 · 2b26e6e · 2b26e6e
1 parent d2216c0
commit 2b26e6e
Show file tree

Hide file tree

Showing 25 changed files with 116 additions and 38 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;