fix(web): dark mode text color fixes

fixes #544

web/src/components/Box.jsx

@@ -0,0 +1,16 @@
+import { h } from 'preact';
+
+export default function Box({ children, className = '', hover = false, href, ...props }) {
+  const Element = href ? 'a' : 'div';
+  return (
+    <Element
+      className={`bg-white dark:bg-gray-700 shadow-lg rounded-lg p-4 ${
+        hover ? 'hover:bg-gray-300 hover:dark:bg-gray-500 dark:hover:text-gray-900 dark:hover:text-gray-900' : ''
+      } ${className}`}
+      href={href}
+      {...props}
+    >
+      {children}
+    </Element>
+  );
+}

web/src/components/Heading.jsx

@@ -1,9 +1,5 @@
 import { h } from 'preact';
 
 export default function Heading({ children, className = '', size = '2xl' }) {
-  return (
-    <h1 className={`font-semibold tracking-widest text-gray-900 uppercase dark:text-white text-${size} ${className}`}>
-      {children}
-    </h1>
-  );
+  return <h1 className={`font-semibold tracking-widest uppercase text-${size} ${className}`}>{children}</h1>;
 }

web/src/components/Link.jsx

@@ -2,7 +2,7 @@ import { h } from 'preact';
 
 export default function Link({ className, children, href, ...props }) {
   return (
-    <a className={`text-blue-500 hover:underline ${className}`} href={href} {...props}>
+    <a className={`text-blue-500 dark:text-blue-400 hover:underline ${className}`} href={href} {...props}>
       {children}
     </a>
   );

web/src/components/Switch.jsx

@@ -14,7 +14,11 @@ export default function Switch({ checked, label, id, onChange }) {
     <label for={id} className="flex items-center cursor-pointer">
       <div className="relative">
         <input id={id} type="checkbox" className="hidden" onChange={handleChange} checked={checked} />
-        <div className="toggle__line w-12 h-6 bg-gray-400 rounded-full shadow-inner" />
+        <div
+          className={`transition-colors toggle__line w-12 h-6 ${
+            !checked ? 'bg-gray-400' : 'bg-blue-400'
+          } rounded-full shadow-inner`}
+        />
         <div
           className="transition-transform absolute w-6 h-6 bg-white rounded-full shadow-md inset-y-0 left-0"
           style={checked ? 'transform: translateX(100%);' : 'transform: translateX(0%);'}

web/src/components/Table.jsx

@@ -1,31 +1,31 @@
 import { h } from 'preact';
 
-export function Table({ children, className }) {
+export function Table({ children, className = '' }) {
   return (
     <table className={`table-auto border-collapse text-gray-900 dark:text-gray-200 ${className}`}>{children}</table>
   );
 }
 
-export function Thead({ children, className }) {
+export function Thead({ children, className = '' }) {
   return <thead className={`${className}`}>{children}</thead>;
 }
 
-export function Tbody({ children, className }) {
+export function Tbody({ children, className = '' }) {
   return <tbody className={`${className}`}>{children}</tbody>;
 }
 
-export function Tfoot({ children, className }) {
+export function Tfoot({ children, className = '' }) {
   return <tfoot className={`${className}`}>{children}</tfoot>;
 }
 
-export function Tr({ children, className, index }) {
-  return <tr className={`${index % 2 ? 'bg-gray-200 ' : ''} ${className}`}>{children}</tr>;
+export function Tr({ children, className = '', index }) {
+  return <tr className={`${index % 2 ? 'bg-gray-200 dark:bg-gray-700' : ''} ${className}`}>{children}</tr>;
 }
 
-export function Th({ children, className }) {
+export function Th({ children, className = '' }) {
   return <th className={`border-b-2 border-gray-400 p-4 text-left ${className}`}>{children}</th>;
 }
 
-export function Td({ children, className }) {
+export function Td({ children, className = '' }) {
   return <td className={`p-4 ${className}`}>{children}</td>;
 }