feat: experimental dark mode support

Resolves #35
OIerDb-ng · Jan 9, 2025 · 7f5b568 · 7f5b568
1 parent 7a9724d
commit 7f5b568
Show file tree

Hide file tree

Showing 10 changed files with 676 additions and 116 deletions.
diff --git a/src/components/Footer.module.less b/src/components/Footer.module.less
@@ -1,5 +1,5 @@
 .footerIcons {
-  color: #888;
+  color: var(--theme-footer);
   font-size: 0.8em;
 
   a {

diff --git a/src/components/PersonCard.module.less b/src/components/PersonCard.module.less
@@ -5,6 +5,6 @@
 .link {
   padding-left: 5px;
   font-size: 12px;
-  color: black;
+  color: var(--theme-foreground);
   vertical-align: bottom;
 }
diff --git a/src/components/PersonInfo.module.less b/src/components/PersonInfo.module.less
@@ -16,40 +16,6 @@
   }
 }
 
-.progress-0 {
-  color: hsl(0, 100%, 50%);
-}
-.progress-1 {
-  color: hsl(12, 100%, 48%);
-}
-.progress-2 {
-  color: hsl(24, 100%, 46%);
-}
-.progress-3 {
-  color: hsl(36, 100%, 44%);
-}
-.progress-4 {
-  color: hsl(48, 100%, 42%);
-}
-.progress-5 {
-  color: hsl(60, 100%, 40%);
-}
-.progress-6 {
-  color: hsl(72, 100%, 40%);
-}
-.progress-7 {
-  color: hsl(84, 100%, 40%);
-}
-.progress-8 {
-  color: hsl(96, 100%, 40%);
-}
-.progress-9 {
-  color: hsl(108, 100%, 40%);
-}
-.progress-10 {
-  color: hsl(120, 100%, 40%);
-}
-
 .recordTotal {
   color: #ccc;
   font-size: smaller;

diff --git a/src/components/PersonInfo.tsx b/src/components/PersonInfo.tsx
@@ -93,14 +93,12 @@ const PersonInfo: React.FC<PersonInfoProps> = (props) => {
                   ) : (
                     <>
                       <span
-                        className={
-                          styles[
-                            `progress-${getProgress(
-                              data.score,
-                              data.contest.full_score
-                            )}`
-                          ]
-                        }
+                        style={{
+                          color: `var(--theme-score-${getProgress(
+                            data.score,
+                            data.contest.full_score
+                          )})`,
+                        }}
                       >
                         {data.score}
                       </span>{' '}
@@ -112,14 +110,12 @@ const PersonInfo: React.FC<PersonInfoProps> = (props) => {
                 </Table.Cell>
                 <Table.Cell>
                   <span
-                    className={
-                      styles[
-                        `progress-${getProgress(
-                          data.contest.n_contestants() - data.rank,
-                          data.contest.n_contestants() - 1
-                        )}`
-                      ]
-                    }
+                    style={{
+                      color: `var(--theme-score-${getProgress(
+                        data.contest.n_contestants() - data.rank,
+                        data.contest.n_contestants() - 1
+                      )})`,
+                    }}
                   >
                     {data.rank}
                   </span>{' '}

diff --git a/src/components/SchoolInfo.tsx b/src/components/SchoolInfo.tsx
@@ -134,6 +134,9 @@ const SchoolInfo: React.FC<SchoolProps> = ({ school }) => {
                       padding: AXIS_MARGIN_TOP,
                       precision: 0,
                     },
+                    grid: {
+                      color: '#aaaaaa50',
+                    },
                   },
                   y: {
                     ticks: {
@@ -143,6 +146,9 @@ const SchoolInfo: React.FC<SchoolProps> = ({ school }) => {
                       padding: AXIS_MARGIN_TOP,
                       precision: 0,
                     },
+                    grid: {
+                      color: '#aaaaaa50',
+                    },
                   },
                 },
               }}

diff --git a/src/main.css b/src/main.css