claude driven dark mode

postcss.config.cjs

@@ -1,5 +1,7 @@
 module.exports = {
   plugins: {
-    '@tailwindcss/postcss': {},
+    '@tailwindcss/postcss': {
+      darkMode: 'class',
+    },
   },
 };

src/app/(content)/recently-played/RecentlyPlayed.tsx

@@ -40,12 +40,12 @@ const fetchRecentlyPlayed = async (queryClient: QueryClient) => {
 const LoadingSkeleton = () => (
   <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3">
     {Array.from({ length: 8 }).map((_, i) => (
-      <div key={i} className="animate-pulse space-y-3 rounded-xl border border-gray-100 p-4">
-        <div className="h-4 rounded bg-gray-200"></div>
-        <div className="h-3 w-3/4 rounded bg-gray-200"></div>
+      <div key={i} className="animate-pulse space-y-3 rounded-xl border border-border-light p-4">
+        <div className="h-4 rounded bg-skeleton"></div>
+        <div className="h-3 w-3/4 rounded bg-skeleton"></div>
         <div className="space-y-2">
-          <div className="h-2 w-1/2 rounded bg-gray-200"></div>
-          <div className="h-2 w-2/3 rounded bg-gray-200"></div>
+          <div className="h-2 w-1/2 rounded bg-skeleton"></div>
+          <div className="h-2 w-2/3 rounded bg-skeleton"></div>
         </div>
       </div>
     ))}
@@ -58,11 +58,11 @@ const EmptyState = () => (
     animate={{ opacity: 1, y: 0 }}
     className="flex flex-col items-center justify-center py-16 text-center"
   >
-    <div className="mb-4 rounded-full bg-gray-50 p-4">
-      <Clock className="h-8 w-8 text-gray-400" />
+    <div className="mb-4 rounded-full bg-background-muted p-4">
+      <Clock className="h-8 w-8 text-foreground-muted" />
     </div>
-    <h3 className="mb-2 text-lg font-medium text-gray-900">No recent activity</h3>
-    <p className="max-w-sm text-gray-500">
+    <h3 className="mb-2 text-lg font-medium text-foreground">No recent activity</h3>
+    <p className="max-w-sm text-foreground-muted">
       Tracks will appear here as people listen to shows across the Relisten community.
     </p>
   </motion.div>
@@ -79,7 +79,7 @@ export default function RecentlyPlayed() {
   const tracks = query.data ? uniqBy(query.data, keyFn).slice(0, 40) : [];
 
   return (
-    <div className="min-h-screen bg-gray-50/30">
+    <div className="min-h-screen bg-background">
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         {/* Header */}
         <motion.div
@@ -88,12 +88,12 @@ export default function RecentlyPlayed() {
           className="text-center"
         >
           <div className="mb-2 flex items-center justify-center gap-3">
-            <div className="rounded-full bg-green-100 p-2">
-              <Activity className="h-6 w-6 text-green-600" />
+            <div className="rounded-full bg-green-100 p-2 dark:bg-green-900/30">
+              <Activity className="h-6 w-6 text-green-600 dark:text-green-400" />
             </div>
-            <h1 className="mb-0 text-3xl font-bold text-gray-900 sm:text-4xl">Recently Played</h1>
+            <h1 className="mb-0 text-3xl font-bold text-foreground sm:text-4xl">Recently Played</h1>
           </div>
-          <p className="mx-auto mb-4 max-w-2xl text-gray-600">
+          <p className="mx-auto mb-4 max-w-2xl text-foreground-muted">
             This is what people are listening to right now - join 'em.
           </p>
         </motion.div>

src/app/(embed)/layout.tsx

@@ -15,14 +15,14 @@ export default async function EmbedLayout({ children }: { children: ReactNode })
   );
 
   return (
-    <Flex column className="h-screen bg-white">
-      <div className="bg-amber-500 text-center text-xs font-semibold tracking-wider">
+    <Flex column className="h-screen bg-surface">
+      <div className="bg-amber-500 text-center text-xs font-semibold tracking-wider dark:bg-amber-600">
         POWERED BY{' '}
         <a
           href="https://relisten.net"
           target="_blank"
           rel="noopener noreferrer"
-          className="underline hover:text-amber-700"
+          className="underline hover:text-amber-700 dark:hover:text-amber-200"
         >
           RELISTEN.NET
         </a>{' '}
@@ -31,12 +31,12 @@ export default async function EmbedLayout({ children }: { children: ReactNode })
           href="https://phish.in"
           target="_blank"
           rel="noopener noreferrer"
-          className="underline hover:text-amber-700"
+          className="underline hover:text-amber-700 dark:hover:text-amber-200"
         >
           PHISH.IN
         </a>
       </div>
-      <div className="flex h-[50px] min-h-[50px] items-center justify-center border-b border-gray-300 bg-white">
+      <div className="flex h-[50px] min-h-[50px] items-center justify-center border-b border-border bg-surface">
         <div className="w-full max-w-2xl">
           <Player artistSlugsToName={artistSlugsToName} />
         </div>

src/app/layout.tsx

@@ -15,8 +15,26 @@ const font = Roboto({ subsets: ['latin'], weight: ['400', '500', '700', '900'] }
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en">
+    <html lang="en" className="bg-background">
       <head>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              (function() {
+                try {
+                  const stored = localStorage.getItem('theme');
+                  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+                  if (stored === 'dark' || (!stored && prefersDark)) {
+                    document.documentElement.classList.add('dark');
+                  } else if (stored === 'light') {
+                    document.documentElement.classList.remove('dark');
+                  }
+                } catch (e) {}
+              })();
+            `,
+          }}
+        />
         <link rel="icon" href="/favicon.ico" />
         <meta name="apple-itunes-app" content="app-id=715886886" />
         <link rel="apple-touch-icon" href="/apple-touch-icon.png" />

src/components/ColumnWithToggleControls.tsx

@@ -84,7 +84,7 @@ const ColumnWithToggleControls = ({
       )}
       <Flex column className="flex-1 overflow-x-hidden overflow-y-auto">
         {filteredCount !== undefined && totalCount !== undefined && filteredCount < totalCount && (
-          <div className="m-2 rounded border border-amber-500/20 bg-amber-500/10 p-2 text-xs text-amber-700">
+          <div className="m-2 rounded border border-amber-500/20 bg-amber-500/10 p-2 text-xs text-amber-700 dark:border-amber-700/30 dark:bg-amber-900/20 dark:text-amber-400">
             {filteredCount === 0 ? (
               <>
                 All {simplePluralize('row', hiddenRows)} are hidden by filters.{' '}

src/components/LiveTrack.tsx

@@ -87,8 +87,8 @@ export default function LiveTrack({
           damping: 20,
           stiffness: 300,
         }}
-        className={`relative h-full rounded-xl border border-gray-100 bg-white p-4 shadow-sm transition-all duration-200 hover:border-gray-200 hover:shadow-lg ${
-          isLastSeen ? 'border-green-200 ring-2 ring-green-100' : ''
+        className={`relative h-full rounded-xl border border-border-light bg-surface p-4 shadow-sm transition-all duration-200 hover:border-border hover:shadow-lg ${
+          isLastSeen ? 'border-green-200 ring-2 ring-green-100 dark:border-green-700 dark:ring-green-900' : ''
         }`}
         data-is-last-seen={isLastSeen}
       >
@@ -99,12 +99,12 @@ export default function LiveTrack({
 
         <div className="space-y-1">
           {/* Track title */}
-          <div className="truncate leading-tight font-semibold text-gray-900 transition-colors group-hover:text-gray-700">
+          <div className="truncate leading-tight font-semibold text-foreground transition-colors group-hover:text-foreground-muted">
             {track.track.title}
           </div>
 
           {/* Artist name */}
-          <div className="text-sm font-medium text-gray-700">{track.source.artist?.name}</div>
+          <div className="text-sm font-medium text-foreground">{track.source.artist?.name}</div>
 
           {/* Venue and date info */}
           <div className="text-foreground-muted space-y-1 text-xs">

src/components/Menu.tsx

@@ -1,17 +1,21 @@
 import Column from './Column';
 import Row from './Row';
+import ThemeToggle from './ThemeToggle';
 
 // TODO: replace this with shadcn/radix
 
 const Menu = () => (
-  <div className="mt-2 mr-2 w-[120px] rounded-sm border bg-white shadow-lg">
+  <div className="mt-2 mr-2 w-[120px] rounded-sm border bg-surface shadow-lg">
     <Row href="/">Home</Row>
     <Row href="/about">About</Row>
     <Row href="/today">Today</Row>
     <Row href="/recently-played">Live</Row>
     <Row href="/sonos">Sonos</Row>
     <Row href="/app">App</Row>
     <Row href="/chat">Chat</Row>
+    <div className="flex items-center justify-center border-t border-border py-2">
+      <ThemeToggle />
+    </div>
   </div>
 );
 

src/components/NavBar.tsx

@@ -6,6 +6,7 @@ import * as Popover from '@/components/Popover';
 import RelistenAPI from '@/lib/RelistenAPI';
 import MainNavHeader from './MainNavHeader';
 import AndroidUpgradeNotification from './AndroidUpgradeNotification';
+import ThemeToggle from './ThemeToggle';
 import { MenuIcon } from 'lucide-react';
 import { headers } from 'next/headers';
 import parser from 'ua-parser-js';
@@ -39,7 +40,7 @@ export default async function NavBar() {
 
   return (
     <>
-      <div className="navigation text-foreground relative flex h-[50px] max-h-[50px] min-h-[50px] grid-cols-3 justify-between border-b-[1px] border-b-[#aeaeae] bg-white px-4 lg:grid">
+      <div className="navigation text-foreground relative flex h-[50px] max-h-[50px] min-h-[50px] grid-cols-3 justify-between border-b-[1px] border-b-border bg-surface px-4 lg:grid">
         <MainNavHeader
           artistSlugsToName={artistSlugsToName}
           indexOverride={isInIframe ? '/wsp' : undefined}
@@ -95,6 +96,9 @@ export default async function NavBar() {
               ABOUT
             </Link>
           </div>
+          <div className="h-full">
+            <ThemeToggle />
+          </div>
         </div>
       </div>
       {isAndroid && <AndroidUpgradeNotification />}

src/components/Player.tsx

@@ -113,7 +113,7 @@ const Player = ({ artistSlugsToName }: Props) => {
               <div>{durationToHHMMSS(playback.activeTrack.currentTime)}</div>
             </div>
             <Flex column className="justify-center pb-1">
-              <div className="song-title relative top-1 text-center text-[1em] text-gray-900">
+              <div className="song-title relative top-1 text-center text-[1em] text-foreground">
                 {activeTrack.title}
                 {false && (
                   <Flex className="text-foreground-muted absolute top-[2px] left-full ml-2 w-full items-center text-[0.8em]">
@@ -149,16 +149,16 @@ const Player = ({ artistSlugsToName }: Props) => {
             </div>
           </Flex>
           <div
-            className="absolute bottom-0 left-0 z-1 h-1 w-full cursor-pointer bg-[#bcbcbc]"
+            className="absolute bottom-0 left-0 z-1 h-1 w-full cursor-pointer bg-progress-bg"
             onClick={onProgressClick}
             style={{ opacity: playback.activeTrack.currentTime < 0.1 ? 0.8 : 1 }}
           >
             <div
-              className="absolute bottom-0 left-0 h-1 bg-[#707070]"
+              className="absolute bottom-0 left-0 h-1 bg-progress-fg"
               style={{ width: notchPosition ? notchPosition + 2 : 'auto' }}
             />
             <div
-              className="absolute bottom-0 left-0 z-1 h-2 w-[3px] bg-black"
+              className="absolute bottom-0 left-0 z-1 h-2 w-[3px] bg-foreground"
               style={{ transform: `translate(${notchPosition}px, 0)` }}
             />
           </div>
@@ -167,11 +167,11 @@ const Player = ({ artistSlugsToName }: Props) => {
       {activeTrack && (
         <div className="volume-control">
           <div
-            className="relative h-full w-[6px] cursor-pointer bg-[#0000001a]"
+            className="relative h-full w-[6px] cursor-pointer bg-progress-bg/20"
             onClick={updateVolume}
           >
             <div
-              className="pointer-events-none absolute right-0 bottom-0 left-0 bg-[#707070]"
+              className="pointer-events-none absolute right-0 bottom-0 left-0 bg-progress-fg"
               style={{
                 height: `${volume * 100}%`,
               }}

src/components/Row.tsx

@@ -69,7 +69,7 @@ const Row = ({
   return (
     <Link href={href ?? '/'} prefetch={false} onClick={onLinkClick} data-is-active={isActive}>
       <Flex
-        className={cn('relisten-row relative min-h-[46px] items-stretch border-b border-gray-100', {
+        className={cn('relisten-row relative min-h-[46px] items-stretch border-b border-border-light', {
           'opacity-70': isPending,
         })}
         // style={{ minHeight: height }}

src/components/RowHeader.tsx

@@ -8,7 +8,7 @@ type RowHeaderProps = {
 
 const RowHeader = ({ height, children }: RowHeaderProps) => (
   <Flex
-    className="min-h-[28px] items-center justify-between border-b border-gray-200/50 bg-gray-100/80 px-2 text-xs font-medium text-gray-600"
+    className="min-h-[28px] items-center justify-between border-b border-border-light bg-background-muted px-2 text-xs font-medium text-foreground-muted"
     style={{ minHeight: !children ? 16 : height }}
   >
     {children}

src/components/RowLoading.tsx

@@ -2,11 +2,11 @@ import type { JSX } from 'react';
 const RowLoading = (): JSX.Element => (
   <div className="content h-full animate-pulse">
     <div className="w-1/2">
-      <div className="h-[1em] w-full bg-[#dddddd]" />
+      <div className="h-[1em] w-full bg-skeleton" />
     </div>
     <div className="w-2/12">
-      <div className="h-[0.7em] w-full bg-[#dddddd]" />
-      <div className="h-[0.7em] w-full bg-[#dddddd]" />
+      <div className="h-[0.7em] w-full bg-skeleton" />
+      <div className="h-[0.7em] w-full bg-skeleton" />
     </div>
   </div>
 );

src/components/ThemeToggle.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { Moon, Sun } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+export default function ThemeToggle() {
+  const [theme, setTheme] = useState<'light' | 'dark'>('light');
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+
+    // Sync with current DOM state (set by blocking script)
+    const isDark = document.documentElement.classList.contains('dark');
+    setTheme(isDark ? 'dark' : 'light');
+  }, []);
+
+  const toggleTheme = () => {
+    const newTheme = theme === 'light' ? 'dark' : 'light';
+    setTheme(newTheme);
+    localStorage.setItem('theme', newTheme);
+    document.documentElement.classList.toggle('dark', newTheme === 'dark');
+  };
+
+  // Prevent hydration mismatch
+  if (!mounted) {
+    return <div className="h-5 w-5" />;
+  }
+
+  return (
+    <button
+      onClick={toggleTheme}
+      className="flex h-full items-center justify-center px-2 text-foreground-muted transition-colors hover:text-foreground active:relative active:top-[1px]"
+      aria-label="Toggle theme"
+      title={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
+    >
+      {theme === 'light' ? <Moon size={18} /> : <Sun size={18} />}
+    </button>
+  );
+}

src/components/TodayTrack.tsx

@@ -14,13 +14,13 @@ export default ({ day }: { day: Day }) => {
 
   return (
     <Link href={createURL(day)} prefetch={false}>
-      <Flex className="group relative w-full cursor-pointer px-6 py-4 transition-colors duration-200 hover:bg-black/5">
+      <Flex className="group relative w-full cursor-pointer px-6 py-4 transition-colors duration-200 hover:bg-background-muted">
         <div className="group-hover:bg-relisten-400/20 absolute top-0 bottom-0 left-0 w-1 bg-transparent transition-colors duration-200"></div>
         <div className="mr-6 w-28 flex-shrink-0">
           <div className="text-relisten-700 font-semibold">{day.display_date}</div>
         </div>
         <div className="min-w-0 flex-1">
-          <div className="truncate font-medium text-gray-900">
+          <div className="truncate font-medium text-foreground">
             {day.venue?.name || 'Unknown Venue'}
           </div>
           {day.venue?.location && (

src/styles/globals.css

@@ -17,13 +17,45 @@
   --color-relisten-900: #001D24;
   --color-relisten-950: #001114;
 
-  /* Basic foreground colors */
+  /* Light mode colors */
   --color-foreground: #333;
   --color-foreground-muted: var(--color-gray-500);
+  --color-background: #fefefe;
+  --color-background-muted: #f3f4f6;
+  --color-border: #aeaeae;
+  --color-border-light: var(--color-gray-100);
+  --color-surface: white;
+  --color-progress-bg: #bcbcbc;
+  --color-progress-fg: #707070;
+  --color-skeleton: #dddddd;
+}
 
-  /* Basic background colors */
+/* Explicit light mode */
+html:not(.dark) {
+  --color-foreground: #333;
+  --color-foreground-muted: var(--color-gray-500);
   --color-background: #fefefe;
   --color-background-muted: #f3f4f6;
+  --color-border: #aeaeae;
+  --color-border-light: var(--color-gray-100);
+  --color-surface: white;
+  --color-progress-bg: #bcbcbc;
+  --color-progress-fg: #707070;
+  --color-skeleton: #dddddd;
+}
+
+/* Dark mode */
+html.dark {
+  --color-foreground: #e5e5e5;
+  --color-foreground-muted: var(--color-gray-400);
+  --color-background: #0a0a0a;
+  --color-background-muted: #171717;
+  --color-border: #404040;
+  --color-border-light: var(--color-gray-800);
+  --color-surface: #1a1a1a;
+  --color-progress-bg: #404040;
+  --color-progress-fg: #a3a3a3;
+  --color-skeleton: #262626;
 }
 
 /*