feat: add custom theme switch component

examples/ui-demo/src/app/globals.css

@@ -2,22 +2,75 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
+@layer base {
   :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
   }
 }
 
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
   }
 }

examples/ui-demo/src/components/configuration/Styling.tsx

@@ -3,15 +3,30 @@ import { ColorPicker } from "./ColorPicker";
 import { useConfig } from "@/src/app/state";
 import { PhotoIcon } from "../icons/photo";
 import { PhotoUploads } from "./PhotoUpload";
+import { Switch } from "@/components/ui/switch";
+import { ThemeSwitch } from "../shared/ThemeSwitch";
+import { useState } from "react";
 
 export function Styling({ className }: { className?: string }) {
+  const { config, setConfig } = useConfig();
+
+  const onSwitchTheme = (isDarkMode: boolean) => {
+    setConfig(prev => ({
+      ...prev,
+      ui: {
+        ...prev.ui,
+        theme: isDarkMode ? "dark" : "light"
+      }
+    }))
+  }
   return (
     <div className={cn("flex flex-col", className)}>
-      <div className="flex flex-col gap-4 border-b border-static py-4">
+      <div className="flex flex-col gap-4 border-b border-static py-6">
         <p className="font-semibold text-secondary-foreground text-sm">Theme</p>
+        <ThemeSwitch checked={config.ui.theme === 'dark'} onCheckedChange={onSwitchTheme} />
       </div>
 
-      <div className="flex flex-col gap-4 border-b border-static py-4 items-start">
+      <div className="flex flex-col gap-4 border-b border-static py-6 items-start">
         <div className="flex flex-col gap-2">
           <p className="font-semibold text-secondary-foreground text-sm">
             Color
@@ -23,7 +38,7 @@ export function Styling({ className }: { className?: string }) {
         <ColorPicker />
       </div>
 
-      <div className="flex flex-col gap-4 border-b border-static py-4 items-start">
+      <div className="flex flex-col gap-4 border-b border-static py-6 items-start">
         <div className="flex flex-col gap-2">
           <p className="font-semibold text-secondary-foreground text-sm">
             Logo
@@ -36,7 +51,7 @@ export function Styling({ className }: { className?: string }) {
         </div>
       </div>
 
-      <div className="flex flex-col gap-4 border-b border-static py-4 items-start">
+      <div className="flex flex-col gap-4 border-b border-static py-6 items-start">
         <div className="flex flex-col gap-2 self-stretch">
           <p className="font-semibold text-secondary-foreground text-sm">
             Corner radius
@@ -45,7 +60,7 @@ export function Styling({ className }: { className?: string }) {
         </div>
       </div>
 
-      <div className="flex flex-col gap-4 py-4 items-start">
+      <div className="flex flex-col gap-4 py-6 items-start">
         <div className="flex flex-col gap-2 self-stretch">
           <p className="font-semibold text-secondary-foreground text-sm">
             Illustration style

examples/ui-demo/src/components/shared/ThemeSwitch.tsx

@@ -0,0 +1,38 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+import { Moon, Sun } from "lucide-react"
+
+const ThemeSwitch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "relative peer inline-flex h-10 w-48 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-gray-500 data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-9 w-24 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-[92px] data-[state=unchecked]:translate-x-0"
+      )}
+    ></SwitchPrimitives.Thumb>
+    <div className="absolute flex text-sm items-center right-[2px] left-[2px] top-[2px] bottom-[2px] z-10 justify-between bg-transparent">
+      <div className="flex items-center data-[state=unchecked]:font-medium text-gray-950 justify-center gap-1 flex-1 basis-0">
+        <Sun size={18} /><div className={cn(!props.checked && "font-medium")}>Light</div>
+      </div>
+      <div className="flex items-center justify-center gap-1 flex-1 basis-0">
+        <Moon size={18} /><div className={cn(props.checked && "font-medium")}>Dark</div>
+      </div>
+    </div>
+  </SwitchPrimitives.Root>
+))
+ThemeSwitch.displayName = SwitchPrimitives.Root.displayName
+
+export { ThemeSwitch }

examples/ui-demo/tailwind.config.ts

@@ -2,20 +2,81 @@ import { withAccountKitUi } from "@alchemy/aa-alchemy/tailwind";
 import { Config } from "tailwindcss";
 import plugin from "tailwindcss/plugin";
 
-const config: Config = withAccountKitUi({
-  darkMode: ['class'],
+const config = {
+  darkMode: ["class"],
   content: [
-    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {},
-  plugins: [
-    plugin(({ addComponents }) => {
-      // use this as a playground to test out new styles and components before moving them
-      addComponents({});
-    }),
-  ],
-});
+    './pages/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './app/**/*.{ts,tsx}',
+    './src/**/*.{ts,tsx}',
+	],
+  prefix: "",
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+} satisfies Config
 
-export default config;
+export default withAccountKitUi(config);