From 6993c4b4116c3510659bfa164222460de62eea99 Mon Sep 17 00:00:00 2001
From: Lynn <lynn@foldr.moe>
Date: Tue, 5 Sep 2023 19:00:13 +0200
Subject: [PATCH] Make boxes readable in dark theme

---
 src/web/Boxes.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/web/Boxes.tsx b/src/web/Boxes.tsx
index f9b8981..811bacb 100644
--- a/src/web/Boxes.tsx
+++ b/src/web/Boxes.tsx
@@ -1,6 +1,7 @@
 import { ReactElement, useState, useEffect, ReactNode } from 'react';
 import { BoxClause, BoxSentence, PostField } from '../boxes';
 import './Boxes.css';
+import { useDarkMode } from 'usehooks-ts';
 
 interface BoxProps {
 	color: string;
@@ -9,13 +10,14 @@ interface BoxProps {
 }
 
 function Box(props: BoxProps) {
+	const darkMode = useDarkMode();
 	const { color, label, children } = props;
+	const other = darkMode.isDarkMode ? '#444 80%' : 'white 80%';
 	return (
 		<div
 			className="boxes-box"
 			style={{
-				// border: `2px solid ${color}`,
-				background: `color-mix(in srgb, ${color}, white 80%)`,
+				background: `color-mix(in srgb, ${color}, ${other})`,
 			}}
 		>
 			<div className="boxes-label">{label}</div>