shadcn-ui/apps/www/components/themes-styles.tsx

"use client"

import { useThemesConfig } from "@/hooks/use-themes-config"

export function ThemesStyle() {
  const { themesConfig } = useThemesConfig()

  if (!themesConfig.activeTheme) {
    return null
  }

  return (
    <style>
      {`
.themes-wrapper,
[data-chart] {
  ${Object.entries(themesConfig.activeTheme.cssVars.light)
    .map(([key, value]) => `${key}: ${value};`)
    .join("\n")}
}

.dark .themes-wrapper,
.dark [data-chart] {
  ${Object.entries(themesConfig.activeTheme.cssVars.dark)
    .map(([key, value]) => `${key}: ${value};`)
    .join("\n")}
}
  `}
    </style>
  )
}