Add dark mode

README.md

@@ -1,6 +1,7 @@
 # Counterscale
 
-![](/public/counterscale-logo-300x300.webp)
+![](/public/counterscale-logo-300x300.webp#gh-light-mode-only)
+![](/public/counterscale-logo-dark-300x300.webp#gh-dark-mode-only)
 
 ![ci status](https://github.com/benvinegar/counterscale/actions/workflows/ci.yaml/badge.svg)
 [![License](https://img.shields.io/github/license/benvinegar/counterscale)](https://github.com/benvinegar/counterscale/blob/master/LICENSE)

app/components/PaginationButtons.tsx

@@ -23,7 +23,7 @@ const PaginationButtons: React.FC<PaginationButtonsProps> = ({
                 className={
                     page > 1
                         ? `text-primary hover:cursor-pointer`
-                        : `text-orange-300`
+                        : `text-orange-300 dark:text-gray-700`
                 }
             >
                 <ArrowLeft />
@@ -35,7 +35,7 @@ const PaginationButtons: React.FC<PaginationButtonsProps> = ({
                 className={
                     hasMore
                         ? "text-primary hover:cursor-pointer"
-                        : "text-orange-300"
+                        : "text-orange-300 dark:text-gray-700"
                 }
             >
                 <ArrowRight />

app/components/TimeSeriesChart.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from "react";
 import PropTypes, { InferProps } from "prop-types";
 
 import {
@@ -14,6 +15,17 @@ export default function TimeSeriesChart({
     data,
     intervalType,
 }: InferProps<typeof TimeSeriesChart.propTypes>) {
+    const [isDarkMode, setIsDarkMode] = useState(false);
+
+    useEffect(() => {
+        const mediaQuery = window.matchMedia?.("(prefers-color-scheme: dark)");
+        setIsDarkMode(mediaQuery?.matches ?? false);
+        const handleChange = (e: MediaQueryListEvent) =>
+            setIsDarkMode(e.matches);
+        mediaQuery?.addEventListener("change", handleChange);
+        return () => mediaQuery?.removeEventListener("change", handleChange);
+    }, []);
+
     // chart doesn't really work no data points, so just bail out
     if (data.length === 0) {
         return null;
@@ -60,6 +72,14 @@ export default function TimeSeriesChart({
         });
     }
 
+    const chartColors = {
+        background: isDarkMode ? "hsl(222.2 84% 3.9%)" : "hsl(42 69% 88%)",
+        text: isDarkMode ? "hsl(210 20% 55%)" : "hsl(164 14% 21%)",
+        grid: isDarkMode ? "#222" : "#ccc",
+        areaStroke: isDarkMode ? "hsl(217.2 32.6% 37.5%)" : "#F46A3D",
+        areaFill: isDarkMode ? "hsl(220deg 39.76% 16.27%)" : "#F99C35",
+    };
+
     return (
         <ResponsiveContainer width="100%" height="100%">
             <AreaChart
@@ -73,17 +93,35 @@ export default function TimeSeriesChart({
                     bottom: 0,
                 }}
             >
-                <CartesianGrid strokeDasharray="3 3" />
-                <XAxis dataKey="date" tickFormatter={xAxisDateFormatter} />
+                <CartesianGrid
+                    strokeDasharray="3 3"
+                    stroke={chartColors.grid}
+                />
+                <XAxis
+                    dataKey="date"
+                    tickFormatter={xAxisDateFormatter}
+                    stroke={chartColors.text}
+                />
 
                 {/* manually setting maxViews vs using recharts "dataMax" key cause it doesnt seem to work */}
-                <YAxis dataKey="views" domain={[0, maxViews]} />
-                <Tooltip labelFormatter={tooltipDateFormatter} />
+                <YAxis
+                    dataKey="views"
+                    domain={[0, maxViews]}
+                    stroke={chartColors.text}
+                />
+                <Tooltip
+                    labelFormatter={tooltipDateFormatter}
+                    contentStyle={{
+                        backgroundColor: chartColors.background,
+                        color: chartColors.text,
+                        borderColor: chartColors.grid,
+                    }}
+                />
                 <Area
                     dataKey="views"
-                    stroke="#F46A3D"
+                    stroke={chartColors.areaStroke}
                     strokeWidth="2"
-                    fill="#F99C35"
+                    fill={chartColors.areaFill}
                 />
             </AreaChart>
         </ResponsiveContainer>

app/components/ui/table.tsx

@@ -71,7 +71,7 @@ const TableRow = React.forwardRef<
             style={
                 width !== undefined
                     ? {
-                          background: `linear-gradient(90deg, #F7BA70 ${width}, transparent ${width})`,
+                          background: `linear-gradient(90deg, var(--bar-color) ${width}, transparent ${width})`,
                       }
                     : {}
             }

app/globals.css

@@ -32,37 +32,43 @@
         --input: 15 90% 60%;
         --ring: 222.2 84% 4.9%;
 
+        --bar-color: #f7ba70;
+
         --radius: 0.5rem;
     }
 
-    .dark {
-        --background: 222.2 84% 4.9%;
-        --foreground: 210 40% 98%;
+    @media (prefers-color-scheme: dark) {
+        :root {
+            --background: 222.2 84% 3.9%;
+            --foreground: 210 40% 85%;
 
-        --card: 222.2 84% 4.9%;
-        --card-foreground: 210 40% 98%;
+            --card: 222.2 84% 5.1%;
+            --card-foreground: 210 40% 85%;
 
-        --popover: 222.2 84% 4.9%;
-        --popover-foreground: 210 40% 98%;
+            --popover: 222.2 84% 5.1%;
+            --popover-foreground: 210 40% 85%;
 
-        --primary: 210 40% 98%;
-        --primary-foreground: 222.2 47.4% 11.2%;
+            --primary: 210 40% 85%;
+            --primary-foreground: 222.2 47.4% 11.2%;
 
-        --secondary: 217.2 32.6% 17.5%;
-        --secondary-foreground: 210 40% 98%;
+            --secondary: 217.2 32.6% 27.5%;
+            --secondary-foreground: 210 40% 85%;
 
-        --muted: 217.2 32.6% 17.5%;
-        --muted-foreground: 215 20.2% 65.1%;
+            --muted: 217.2 32.6% 12.5%;
+            --muted-foreground: 215 20.2% 65.1%;
 
-        --accent: 217.2 32.6% 17.5%;
-        --accent-foreground: 210 40% 98%;
+            --accent: 217.2 32.6% 27.5%;
+            --accent-foreground: 210 40% 85%;
 
-        --destructive: 0 62.8% 30.6%;
-        --destructive-foreground: 210 40% 98%;
+            --destructive: 0 62.8% 30.6%;
+            --destructive-foreground: 210 40% 85%;
+
+            --border: 217.2 32.6% 27.5%;
+            --input: 217.2 32.6% 27.5%;
+            --ring: 212.7 26.8% 83.9%;
 
-        --border: 217.2 32.6% 17.5%;
-        --input: 217.2 32.6% 17.5%;
-        --ring: 212.7 26.8% 83.9%;
+            --bar-color: hsl(220deg 39.76% 16.27%);
+        }
     }
 }
 

app/routes/_index.tsx

@@ -39,10 +39,20 @@ export default function Index() {
                     </span>
                 </div>
                 <div className="max-w-md">
-                    <img
-                        src="/counterscale-logo.webp"
-                        alt="CounterScale Logo"
-                    />
+                    <picture>
+                        <source
+                            media="(prefers-color-scheme: dark)"
+                            srcSet="/counterscale-logo-dark.webp"
+                        />
+                        <source
+                            media="(prefers-color-scheme: light)"
+                            srcSet="/counterscale-logo.webp"
+                        />
+                        <img
+                            src="/counterscale-logo.webp"
+                            alt="CounterScale Logo"
+                        />
+                    </picture>
                 </div>
             </div>
 

tailwind.config.js

@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-    darkMode: ["class"],
+    // darkMode: ["class"],
     content: [
         "./pages/**/*.{ts,tsx}",
         "./components/**/*.{ts,tsx}",