Tidy up theme colors

Breadcrumb.tsx

@@ -79,7 +79,7 @@ const BreadcrumbLink = React.forwardRef<
   return (
     <Comp
       ref={ref}
-      className={cn("text-blue-600 underline", className)}
+      className={cn("text-link underline", className)}
       {...props}
     />
   );

Card.tsx

@@ -9,7 +9,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-xl border bg-card text-card-foreground shadow",
+      "rounded-xl border border-background-secondary bg-card text-card-foreground shadow",
       className,
     )}
     {...props}

DocumentList.tsx

@@ -27,7 +27,7 @@ export const DocumentItem: FC<DocumentItemProps> = ({
     <li
       className={cn(
         "grid group relative xxs:grid-cols-[64px_auto] xxs:grid-rows-[min-content_1fr]  xs:grid-rows-[1fr_1fr] xxs:gap-x-4 xxs:items-center",
-        className
+        className,
       )}
     >
       {children}
@@ -45,7 +45,7 @@ export const DocumentIcon: FC<DocumentIconProps> = ({ src, className }) => {
     <div
       className={cn(
         "aspect-[707/1000] w-16 shrink-0 border-2 border-slate-200 xxs:row-span-2 group-hover:ring-2 ring-blue-200 ring-offset-1",
-        className
+        className,
       )}
     >
       <img alt="" src={src} />
@@ -74,8 +74,8 @@ export const DocumentLink: FC<DocumentLinkProps> = ({
       />
       <a
         className={cn(
-          "text-blue-600 underline font-bold xxs:col-start-2 xs:self-end",
-          className
+          "text-link underline font-bold xxs:col-start-2 xs:self-end",
+          className,
         )}
         href={href}
       >
@@ -98,7 +98,7 @@ export const DocumentDescription: FC<DocumentDescriptionProps> = ({
     <div
       className={cn(
         "xxs:col-start-2 xxs:self-start xxs:line-clamp-2 xs:line-clamp-none",
-        className
+        className,
       )}
     >
       {children}

Footer.tsx

@@ -31,7 +31,7 @@ export const Footer: FC<{ sourceCode: string[] }> = ({ sourceCode }) => {
               <li key={project}>
                 <a
                   href={`https://github.com/${project}`}
-                  className="text-blue-600 underline text-sm"
+                  className="text-link underline text-sm"
                 >
                   {project.split("/").join(" / ")}
                 </a>
@@ -44,7 +44,7 @@ export const Footer: FC<{ sourceCode: string[] }> = ({ sourceCode }) => {
           <ol className="flex flex-col gap-y-2">
             {links.map((link) => (
               <li key={link.href}>
-                <a href={link.href} className="text-blue-600 underline text-sm">
+                <a href={link.href} className="text-link underline text-sm">
                   {link.text}
                 </a>
               </li>

HeaderMenu.tsx

@@ -7,11 +7,11 @@ export type HeaderMenuProps = {
 
 export const HeaderMenu: FC<HeaderMenuProps> = ({ href, text }) => {
   return (
-    <header className="grid h-16 w-full grid-cols-2 grid-rows-1 place-items-center items-center border-b border-gray-200 px-4 sm:grid-cols-1 lg:px-0">
+    <header className="grid h-16 w-full grid-cols-2 grid-rows-1 place-items-center items-center border-b px-4 sm:grid-cols-1 lg:px-0">
       <div className="flex h-full w-full max-w-5xl flex-row justify-between">
         <a
           href={href}
-          className="flex flex-row items-center text-md font-bold text-blue-600 underline"
+          className="flex flex-row items-center text-md font-bold text-link underline"
         >
           {text}
         </a>

LegislationList.tsx

@@ -17,7 +17,7 @@ export const LegislationList: FC<LegislationListProps> = ({
     <ol
       className={cn(
         "grid grid-cols-1 lg:grid-cols-2 gap-x-16 gap-y-8 lg:gap-y-16 max-w-xl lg:max-w-5xl",
-        className
+        className,
       )}
     >
       {children}
@@ -40,7 +40,7 @@ export const LegislationItem: FC<LegislationItemProps> = ({
     <li
       className={cn(
         "group grid grid-cols-[min-content_auto] grid-rows-[min-content_auto] gap-x-4 gap-y-1 relative w-full h-full",
-        className
+        className,
       )}
     >
       {children}
@@ -61,7 +61,7 @@ export const LegislationIcon: FC<LegislationIconProps> = ({
     <div
       className={cn(
         "col-span-0 row-span-2 left-0 top-0 flex h-10 w-10 items-center justify-center rounded-lg bg-blue-600 p-3 group-hover:ring-2 ring-blue-600 ring-offset-1",
-        className
+        className,
       )}
     >
       {children}
@@ -89,10 +89,7 @@ export const LegislationLink: FC<LegislationLinkProps> = ({
         className="absolute inset-0"
         href={href}
       />
-      <a
-        className={cn("text-blue-600 font-bold underline", className)}
-        href={href}
-      >
+      <a className={cn("text-link font-bold underline", className)} href={href}>
         {children}
       </a>
     </>

LegislationTable.tsx

@@ -70,11 +70,11 @@ export const LegislationTableCell: FC<LegislationTableCellProps> = ({
           "text-xs md:text-base lg:text-lg py-4 align-top":
             type === "paragraph_text",
         },
-        className
+        className,
       )}
     >
       {href ? (
-        <a href={href} className="text-blue-600 underline">
+        <a href={href} className="text-link underline">
           {children}
         </a>
       ) : (

LinkList.tsx

@@ -12,12 +12,12 @@ export const LinkList: FC<LinkListProps> = ({ className, links }) => {
     <ol
       className={cn(
         "flex list-inside list-decimal flex-col gap-y-1",
-        className
+        className,
       )}
     >
       {links.map((link, index) => (
         <li key={index} className="truncate">
-          <a className="truncate text-blue-600 underline" href={link}>
+          <a className="truncate text-link underline" href={link}>
             {link}
           </a>
         </li>

Page.tsx

@@ -4,7 +4,7 @@ export type PageProps = PropsWithChildren;
 
 export const Page: FC<PageProps> = ({ children }) => {
   return (
-    <div className="flex flex-col items-center divide-y divide-solid divide-gray-200">
+    <div className="flex flex-col items-center divide-y divide-solid divide-background-secondary">
       {children}
     </div>
   );

package.json

@@ -48,7 +48,7 @@
     "start:tailwind": "tailwindcss -i tailwind.css -o dist.css -w"
   },
   "type": "module",
-  "version": "0.0.25",
+  "version": "0.0.26",
   "dependencies": {
     "@radix-ui/react-slot": "^1.1.1",
     "class-variance-authority": "^0.7.1",

tailwind.css

@@ -3,4 +3,17 @@
 @theme {
   --breakpoint-xxs: 300px;
   --breakpoint-xs: 380px;
+  --color-background: #fafafa;
+  --color-background-secondary: lightgray;
+  --color-foreground: #171717;
+  --color-link: royalblue;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: #1f1f1f;
+    --color-foreground: #ededed;
+    --color-background-secondary: darkslategray;
+    --color-link: deepskyblue;
+  }
 }