Theme Switch

Light/dark theme toggle for the Dali Agents console at daliagents.com, with five switch variants used across the Dali Agents UI.

Dali AgentsbyLiana Pepanyan

"use client";

import React from "react";
import ThemeSwitch from "@/components/ui/theme-switch";
import { ThemeProvider } from "next-themes";

export default function ThemeDemoWithLabel() {
  return (
    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
      <div className="min-h-[50vh] grid place-items-center px-6">
        <div className="flex flex-col items-center gap-3">
          <div className="flex items-center gap-4 rounded-xl border p-4">
            <div className="grid">
              <span className="font-medium">Dali console theme</span>
              <span className="text-sm text-muted-foreground">
                Light or dark for your agent console
              </span>
            </div>
            <ThemeSwitch className="ml-6" />
          </div>
          <a
            href="https://daliagents.com"
            target="_blank"
            rel="noreferrer"
            className="text-[10px] tracking-wide text-muted-foreground/60 transition-colors hover:text-muted-foreground"
          >
            daliagents.com
          </a>
        </div>
      </div>
    </ThemeProvider>
  );
}