fix(www): themes page

Author: shadcn

apps/www/app/(app)/themes/page.tsx

@@ -1,7 +1,12 @@
 import { CardsDemo } from "@/components/cards"
+import { ThemeWrapper } from "@/components/theme-wrapper"
 
 import "public/registry/themes.css"
 
 export default function ThemesPage() {
-  return <CardsDemo />
+  return (
+    <ThemeWrapper>
+      <CardsDemo />
+    </ThemeWrapper>
+  )
 }

apps/www/components/cards/activity-goal.tsx

@@ -2,10 +2,8 @@
 
 import * as React from "react"
 import { Minus, Plus } from "lucide-react"
-import { useTheme } from "next-themes"
-import { Bar, BarChart, ResponsiveContainer } from "recharts"
+import { Bar, BarChart } from "recharts"
 
-import { useConfig } from "@/hooks/use-config"
 import { Button } from "@/registry/new-york/ui/button"
 import {
   Card,
@@ -16,7 +14,6 @@ import {
   CardTitle,
 } from "@/registry/new-york/ui/card"
 import { ChartConfig, ChartContainer } from "@/registry/new-york/ui/chart"
-import { baseColors } from "@/registry/registry-base-colors"
 
 const data = [
   {
@@ -63,10 +60,7 @@ const data = [
 const chartConfig = {
   goal: {
     label: "Goal",
-    theme: {
-      light: "black",
-      dark: "white",
-    },
+    color: "hsl(var(--primary))",
   },
 } satisfies ChartConfig
 

apps/www/components/cards/metric.tsx

@@ -1,9 +1,7 @@
 "use client"
 
-import { useTheme } from "next-themes"
-import { Line, LineChart, ResponsiveContainer, Tooltip } from "recharts"
+import { Line, LineChart } from "recharts"
 
-import { useConfig } from "@/hooks/use-config"
 import {
   Card,
   CardContent,
@@ -17,7 +15,6 @@ import {
   ChartTooltip,
   ChartTooltipContent,
 } from "@/registry/new-york/ui/chart"
-import { baseColors } from "@/registry/registry-base-colors"
 
 const data = [
   {
@@ -57,7 +54,7 @@ const chartConfig = {
   },
   average: {
     label: "Average",
-    color: "hsl(var(--muted-foreground))",
+    color: "hsl(var(--primary))",
   },
 } satisfies ChartConfig
 
@@ -71,7 +68,7 @@ export function CardsMetric() {
         </CardDescription>
       </CardHeader>
       <CardContent className="pb-4">
-        <ChartContainer config={chartConfig} className="h-[200px] w-full">
+        <ChartContainer config={chartConfig} className="w-full md:h-[200px]">
           <LineChart
             data={data}
             margin={{
@@ -86,6 +83,7 @@ export function CardsMetric() {
               strokeWidth={2}
               dataKey="average"
               stroke="var(--color-average)"
+              strokeOpacity={0.5}
               activeDot={{
                 r: 6,
                 fill: "var(--color-average)",

apps/www/components/cards/stats.tsx

@@ -48,17 +48,11 @@ const data = [
 const chartConfig = {
   revenue: {
     label: "Revenue",
-    theme: {
-      light: "black",
-      dark: "white",
-    },
+    color: "hsl(var(--primary))",
   },
   subscription: {
     label: "Subscriptions",
-    theme: {
-      light: "black",
-      dark: "white",
-    },
+    color: "hsl(var(--primary))",
   },
 } satisfies ChartConfig
 
@@ -88,11 +82,10 @@ export function CardsStats() {
                 type="monotone"
                 strokeWidth={2}
                 dataKey="revenue"
+                stroke="var(--color-revenue)"
                 activeDot={{
                   r: 6,
-                  fill: "var(--color-revenue)",
                 }}
-                stroke="var(--color-revenue)"
               />
             </LineChart>
           </ChartContainer>