fix(examples): make next-rwa example for dark mode

chakrihacker · web-flow · commit f6043d8b04d3 · 2026-03-13T13:20:48.000+05:30
diff --git a/examples/next-rwa/package.json b/examples/next-rwa/package.json
@@ -12,17 +12,22 @@
   "dependencies": {
     "@auth0/nextjs-auth0": "^4.13.2",
     "@auth0/universal-components-react": "workspace:*",
+    "@radix-ui/react-slot": "^1.2.3",
     "@tailwindcss/postcss": "^4.1.17",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "execa": "^9.1.0",
     "i18next": "^25.2.1",
     "lucide-react": "^0.511.0",
     "next": "16.1.5",
     "ora": "^8.0.1",
     "postcss": "^8.5.5",
+    "radix-ui": "^1.4.3",
     "react": "^19.2.1",
     "react-dom": "^19.2.1",
     "react-hook-form": "^7.57.0",
     "react-i18next": "^15.5.3",
+    "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.1.17"
   },
   "devDependencies": {
diff --git a/examples/next-rwa/src/app/domain-management/page.tsx b/examples/next-rwa/src/app/domain-management/page.tsx
@@ -1,11 +1,11 @@
 'use client';
 
-import { DomainTable } from '@auth0/universal-components-react/rwa';
+// import { DomainTable } from '@auth0/universal-components-react/rwa';
 
 export default function DomainManagementPage() {
   return (
     <div className="p-6 pt-8 space-y-6">
-      <p>
+      <p className="text-primary">
         Follow{' '}
         <a
           href="https://github.com/auth0/auth0-ui-components/tree/main/examples/next-rwa#adding-a-universal-component-to-your-app"
@@ -15,7 +15,7 @@ export default function DomainManagementPage() {
         </a>{' '}
         on how to add Domain Management component.
       </p>
-      <DomainTable />
+      {/* <DomainTable /> */}
     </div>
   );
 }
diff --git a/examples/next-rwa/src/app/globals.css b/examples/next-rwa/src/app/globals.css
@@ -1,9 +1,28 @@
 /* Import Tailwind CSS v4 */
 @import 'tailwindcss';
+@import '../styles/light.css';
+@import '../styles/dark.css';
 @import '@auth0/universal-components-react/styles';
 
 @theme {
-  --color-background: var(--background);
+  --color-page: var(--color-page);
+  --color-background: var(--color-background);
+  --color-foreground: var(--color-foreground);
+
+  --color-card: var(--color-card);
+  --color-card-foreground: var(--color-card-foreground);
+
+  --color-primary: var(--color-primary);
+  --color-primary-foreground: var(--color-primary-foreground);
+
+  --color-accent: var(--color-accent);
+  --color-accent-foreground: var(--color-accent-foreground);
+
+  --color-muted: var(--color-muted);
+  --color-muted-foreground: var(--color-muted-foreground);
+
+  --color-border: var(--color-border);
+  --color-ring: oklch(from var(--color-ring) l c h / 50%);
 }
 
 /* Minimal Next.js specific fixes - keep only essential z-index fixes */
@@ -26,5 +45,4 @@ body {
   min-width: 320px;
   min-height: 100vh;
   height: 100%;
-  background-color: white;
 }
diff --git a/examples/next-rwa/src/app/layout.tsx b/examples/next-rwa/src/app/layout.tsx
@@ -19,7 +19,7 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en" className="h-full">
-      <body className={`${inter.className} h-full`}>
+      <body className={`${inter.className} h-full overflow-hidden bg-background`}>
         <Auth0Provider>
           <ClientProvider>
             <div className="flex flex-col h-screen bg-background">
diff --git a/examples/next-rwa/src/app/organization-management/page.tsx b/examples/next-rwa/src/app/organization-management/page.tsx
@@ -4,7 +4,7 @@ import { OrganizationDetailsEdit } from '@auth0/universal-components-react/rwa';
 
 export default function OrganizationManagementPage() {
   return (
-    <div className="p-6 pt-8 space-y-6">
+    <div className="space-y-6">
       <OrganizationDetailsEdit />
     </div>
   );
diff --git a/examples/next-rwa/src/app/page.tsx b/examples/next-rwa/src/app/page.tsx
@@ -2,7 +2,7 @@ import { HeroSection } from '@/components/hero-section';
 
 export default function HomePage() {
   return (
-    <main className="bg-white pt-16">
+    <main>
       <HeroSection />
     </main>
   );
diff --git a/examples/next-rwa/src/components/hero-section.tsx b/examples/next-rwa/src/components/hero-section.tsx
@@ -1,13 +1,13 @@
 'use client';
 
-import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { Button } from './ui/button';
 
 export function HeroSection() {
   const { t } = useTranslation();
 
   return (
-    <div className="dark:bg-gray-900">
+    <div>
       <div className="relative isolate px-6 lg:px-8 flex items-center">
         <div className="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
           <div className="text-center">
@@ -17,20 +17,22 @@ export function HeroSection() {
             <p className="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-300">
               {t('hero-section.description')}
             </p>
+
             <div className="mt-10 flex items-center justify-center gap-x-6">
-              <a
-                href="https://auth0-ui-components.vercel.app/"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="px-5 py-2 mt-6 text-sm font-medium leading-5 text-center text-white capitalize bg-slate-900 rounded-lg hover:bg-slate-700 lg:mx-0 lg:w-auto focus:outline-none"
-              >
-                {t('hero-section.get-started-button')}
-              </a>
+              <Button className="cursor-pointer">
+                <a
+                  href="https://auth0-ui-components.vercel.app/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {t('hero-section.get-started-button')}
+                </a>
+              </Button>
               <a
                 href="https://auth0.com/docs"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="px-5 py-2 mt-6 text-sm font-semibold leading-6 text-gray-900 dark:text-white"
+                className="px-5 py-2 text-sm font-semibold leading-6 text-gray-900 dark:text-white"
               >
                 {t('hero-section.learn-more-button')}
                 <span aria-hidden="true">→</span>
diff --git a/examples/next-rwa/src/components/navigation/navbar.tsx b/examples/next-rwa/src/components/navigation/navbar.tsx
@@ -2,24 +2,33 @@
 
 import { useUser } from '@auth0/nextjs-auth0';
 import Link from 'next/link';
+import { useRouter } from 'next/navigation';
 import type React from 'react';
 import { useTranslation } from 'react-i18next';
-
+import { useDarkMode } from '@/hooks/use-dark-mode';
 import { ProfileDropdown } from './profile-dropdown';
+import { Button } from '../ui/button';
+
+const LOGO_ON_LIGHT =
+  'https://cdn.auth0.com/quantum-assets/dist/2.0.2/logos/auth0/auth0-lockup-en-onlight.svg';
+const LOGO_ON_DARK =
+  'https://cdn.auth0.com/quantum-assets/dist/2.0.2/logos/auth0/auth0-lockup-en-ondark.svg';
 
 export function Navbar() {
   const { user, isLoading } = useUser();
+  const router = useRouter();
   const { t } = useTranslation();
+  const isDarkMode = useDarkMode();
 
   return (
     <header className="w-full h-16 z-50">
-      <nav className=" border-b border-gray-200 px-4 py-3 shadow-sm dark:bg-gray-900 dark:border-gray-700 h-full">
+      <nav className="px-4 py-3 shadow-sm h-full bg-white dark:bg-black">
         <div className="mx-auto flex justify-between items-center px-4 sm:px-6 lg:px-8 h-full">
           <div className="flex lg:flex-1">
             <Link href="/" className="-m-1.5 p-1.5">
               <img
                 className="h-8 w-auto"
-                src="https://cdn.auth0.com/quantum-assets/dist/2.0.2/logos/auth0/auth0-lockup-en-onlight.svg"
+                src={isDarkMode ? LOGO_ON_DARK : LOGO_ON_LIGHT}
                 alt="auth0 logo"
               />
             </Link>
@@ -30,12 +39,9 @@ export function Navbar() {
               (user ? (
                 <ProfileDropdown />
               ) : (
-                <a
-                  className="px-4 py-2 text-sm font-medium leading-5 text-center text-white capitalize bg-slate-900 rounded-lg hover:bg-slate-700 lg:mx-0 lg:w-auto focus:outline-none"
-                  href="/auth/login"
-                >
+                <Button className="cursor-pointer" onClick={() => router.push('/auth/login')}>
                   {t('nav-bar.sign-in-button')}
-                </a>
+                </Button>
               ))}
           </div>
         </div>
diff --git a/examples/next-rwa/src/components/navigation/profile-dropdown.tsx b/examples/next-rwa/src/components/navigation/profile-dropdown.tsx
@@ -34,7 +34,7 @@ export function ProfileDropdown() {
     <div className="relative" ref={dropdownRef}>
       <button
         onClick={() => setIsOpen(!isOpen)}
-        className="flex items-center space-x-2 p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800"
+        className="flex items-center space-x-2 p-2 rounded-md transition-colors hover:bg-accent/60"
       >
         {user.picture ? (
           <img className="h-8 w-8 rounded-full" src={user.picture} alt={user.name || 'Profile'} />
@@ -49,10 +49,10 @@ export function ProfileDropdown() {
       </button>
 
       {isOpen && (
-        <div className="absolute right-0 mt-2 w-48 bg-gray-800 rounded-md shadow-lg py-1 z-50 border border-gray-700">
+        <div className="absolute right-0 mt-2 w-48 bg-card rounded-md shadow-lg py-1 z-50 border border-gray-700">
           <Link
             href="/profile"
-            className="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"
+            className="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:hover:bg-accent/60"
             onClick={() => setIsOpen(false)}
           >
             <div className="flex items-center space-x-2">
@@ -62,7 +62,7 @@ export function ProfileDropdown() {
           </Link>
           <a
             href="/auth/logout"
-            className="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"
+            className="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-accent/60"
           >
             <div className="flex items-center space-x-2">
               <LogOut className="h-4 w-4" />
diff --git a/examples/next-rwa/src/components/navigation/side-bar.tsx b/examples/next-rwa/src/components/navigation/side-bar.tsx
@@ -13,7 +13,7 @@ export const Sidebar: React.FC = () => {
   const { t } = useTranslation();
   return (
     user && (
-      <div className="w-64 flex-shrink-0 bg-gray-900 border-r border-gray-700 shadow-lg pt-4 overflow-y-auto">
+      <div className="w-64 flex-shrink-0 bg-white dark:bg-black shadow-lg pt-4 h-full">
         <div className="p-4 space-y-6">
           {/* My Account Section */}
           {featuresConfig.enableMyAccount && (
diff --git a/examples/next-rwa/src/components/profile-page.tsx b/examples/next-rwa/src/components/profile-page.tsx
@@ -42,11 +42,11 @@ export function ProfilePage() {
   }
 
   return (
-    <div className="min-h-screen bg-gray-900 pt-20">
+    <div className="min-h-screen bg-background pt-20">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         <div className="space-y-8">
           {/* Profile Header */}
-          <div className="bg-gray-800 shadow rounded-lg p-6">
+          <div className="bg-card shadow rounded-lg p-6">
             <div className="flex items-center space-x-4">
               {user.picture ? (
                 <img
diff --git a/examples/next-rwa/src/components/ui/button.tsx b/examples/next-rwa/src/components/ui/button.tsx
@@ -0,0 +1,57 @@
+'use client';
+
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Slot as SlotPrimitive } from 'radix-ui';
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+const Slot = SlotPrimitive.Slot;
+
+const buttonVariants = cva(
+  "focus-visible:ring-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive theme-default:active:scale-[0.99] relative box-border inline-flex shrink-0 items-center justify-center gap-2 overflow-hidden text-sm font-medium whitespace-nowrap transition-all duration-150 ease-in-out outline-none focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        primary:
+          "shadow-button-resting hover:shadow-button-hover hover:border-primary/50 border-primary bg-primary text-primary-foreground hover:bg-primary/90 theme-default:before:from-primary-foreground/0 theme-default:before:to-primary-foreground/15 theme-default:before:absolute theme-default:before:top-0 theme-default:before:left-0 theme-default:before:block theme-default:before:h-full theme-default:before:w-full theme-default:before:bg-gradient-to-t theme-default:before:content-[''] border",
+        outline:
+          "dark:bg-muted/50 hover:text-accent-foreground shadow-button-outlined-resting hover:shadow-button-outlined-hover hover:border-accent bg-background hover:bg-muted text-primary border-primary/35 theme-default:before:from-primary/5 theme-default:before:to-primary/0 theme-default:before:absolute theme-default:before:top-0 theme-default:before:left-0 theme-default:before:block theme-default:before:h-full theme-default:before:w-full theme-default:before:bg-gradient-to-t theme-default:before:content-[''] border",
+        ghost: 'hover:bg-muted text-primary bg-transparent',
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-button-destructive-resting hover:shadow-button-destructive-hover border-destructive-border/25 hover:border-destructive-border/50 theme-default:before:to-primary-foreground/50 theme-default:before:absolute theme-default:before:top-0 theme-default:before:left-0 theme-default:before:block theme-default:before:h-full theme-default:before:w-full theme-default:before:bg-gradient-to-t theme-default:before:content-[''] theme-default:border",
+        link: 'text-foreground underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 rounded-2xl px-4 py-2.5 has-[>svg]:px-3',
+        xs: 'h-7 rounded-md px-2 py-1.5 text-xs has-[>svg]:px-2',
+        sm: 'h-8 gap-1.5 rounded-xl px-3 py-2 text-xs has-[>svg]:px-2.5',
+        lg: 'h-12 rounded-3xl px-6 py-3 text-base has-[>svg]:px-4',
+        icon: 'size-7 rounded-xl',
+      },
+    },
+    defaultVariants: {
+      variant: 'primary',
+      size: 'default',
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  as?: boolean;
+}
+
+function Button({
+  className,
+  variant,
+  size,
+  as,
+  ...props
+}: React.ComponentProps<'button'> & ButtonProps) {
+  const Comp = as ? Slot : 'button';
+
+  return <Comp className={cn(buttonVariants({ variant, size }), className)} {...props} />;
+}
+
+export { Button, buttonVariants };
diff --git a/examples/next-rwa/src/hooks/use-dark-mode.ts b/examples/next-rwa/src/hooks/use-dark-mode.ts
@@ -0,0 +1,21 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+export function useDarkMode(): boolean {
+  const [isDarkMode, setIsDarkMode] = useState(() =>
+    typeof window !== 'undefined'
+      ? window.matchMedia('(prefers-color-scheme: dark)').matches
+      : false,
+  );
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const handler = (e: MediaQueryListEvent) => setIsDarkMode(e.matches);
+
+    mediaQuery.addEventListener('change', handler);
+    return () => mediaQuery.removeEventListener('change', handler);
+  }, []);
+
+  return isDarkMode;
+}
diff --git a/examples/next-rwa/src/lib/utils.ts b/examples/next-rwa/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/examples/next-rwa/src/providers/client-provider.tsx b/examples/next-rwa/src/providers/client-provider.tsx
@@ -3,6 +3,7 @@
 import { Auth0ComponentProvider } from '@auth0/universal-components-react/rwa';
 import React from 'react';
 
+import { useDarkMode } from '../hooks/use-dark-mode';
 import { clientConfig } from '../config/features';
 
 import { I18nProvider } from './i18n-provider';
@@ -12,6 +13,8 @@ interface ClientProviderProps {
 }
 
 export function ClientProvider({ children }: ClientProviderProps) {
+  const isDarkMode = useDarkMode();
+
   return (
     <I18nProvider>
       <Auth0ComponentProvider
@@ -20,7 +23,7 @@ export function ClientProvider({ children }: ClientProviderProps) {
           domain: clientConfig.auth0Domain,
         }}
         themeSettings={{
-          mode: 'light',
+          mode: isDarkMode ? 'dark' : 'light',
           theme: 'default',
         }}
       >
diff --git a/examples/next-rwa/src/styles/dark.css b/examples/next-rwa/src/styles/dark.css
@@ -0,0 +1,17 @@
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-page: oklch(21.34% 0 0);
+    --color-background: oklch(0.2103 0.0059 285.89);
+    --color-foreground: oklch(94.91% 0 0);
+    --color-card: oklch(0% 0 0);
+    --color-card-foreground: oklch(100% 0 0);
+    --color-primary: oklch(94.65% 0.0058 84.57);
+    --color-primary-foreground: oklch(0% 0 0);
+    --color-muted: oklch(25.2% 0 0);
+    --color-muted-foreground: oklch(58.29% 0 0);
+    --color-accent: oklch(53.82% 0 0);
+    --color-accent-foreground: oklch(94.91% 0 0);
+    --color-border: oklch(34.85% 0 0);
+    --color-ring: oklch(40.17% 0 0 / 50%);
+  }
+}
diff --git a/examples/next-rwa/src/styles/light.css b/examples/next-rwa/src/styles/light.css
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
