feat: update playground layout

Ohh-889 · Ohh-889 · commit b9eae530265b · 2025-07-21T02:18:43.000+08:00
diff --git a/playground/src/app/layout.tsx b/playground/src/app/layout.tsx
@@ -2,9 +2,11 @@ import type { Metadata } from 'next';
 import { Geist, Geist_Mono } from 'next/font/google';
 import '../css/globals.css';
 import Link from 'next/link';
+import { ThemeProvider } from 'next-themes';
 import { ButtonIcon, Card, Icon, Popover, Sonner } from 'soybean-react-ui';
 
 import ThemeCustomize from '../components/ThemeCustomize';
+import ThemeSchemaToggler from '../components/ThemeSchemaToggler';
 import config from '../config';
 
 const geistSans = Geist({
@@ -28,52 +30,74 @@ export default async function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html
+      lang="en"
+      suppressHydrationWarning={!config.isDev}
+    >
+      <head>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              try {
+                if (localStorage.theme === 'dark' || ((!('theme' in localStorage) || localStorage.theme === 'system') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+                  document.querySelector('meta[name="theme-color"]').setAttribute('content', '${config.META_THEME_COLORS.dark}')
+                }
+              } catch (_) {}
+            `
+          }}
+        />
+      </head>
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
         id="app"
       >
-        <div className="h-full">
-          <Card
-            flexHeight
-            className="h-full max-sm:h-auto"
-            title="Soybean UI Components"
-            extra={
-              <div className="flex items-center gap-3">
-                <Popover
-                  align="end"
-                  classNames={{ content: 'z-15' }}
-                  side="bottom"
-                  trigger={
-                    <ButtonIcon
-                      icon="lucide:swatch-book"
-                      size="lg"
-                    />
-                  }
-                >
-                  <ThemeCustomize />
-                </Popover>
+        <ThemeProvider
+          disableTransitionOnChange
+          attribute="class"
+        >
+          <div className="h-full">
+            <Card
+              className="h-full max-sm:h-auto"
+              title="Soybean UI Components"
+              extra={
+                <div className="flex items-center gap-3">
+                  <Popover
+                    align="end"
+                    classNames={{ content: 'z-15' }}
+                    side="bottom"
+                    trigger={
+                      <ButtonIcon
+                        icon="lucide:swatch-book"
+                        size="lg"
+                      />
+                    }
+                  >
+                    <ThemeCustomize />
+                  </Popover>
 
-                <ButtonIcon
-                  asChild
-                  size="lg"
-                >
-                  <Link
-                    href={config.githubUrl}
-                    rel="noopener noreferrer"
-                    target="_blank"
+                  <ButtonIcon
+                    asChild
+                    size="lg"
                   >
-                    <Icon icon="lucide:github" />
-                  </Link>
-                </ButtonIcon>
-              </div>
-            }
-          >
-            {children}
-          </Card>
-        </div>
+                    <Link
+                      href={config.githubUrl}
+                      rel="noopener noreferrer"
+                      target="_blank"
+                    >
+                      <Icon icon="lucide:github" />
+                    </Link>
+                  </ButtonIcon>
+
+                  <ThemeSchemaToggler />
+                </div>
+              }
+            >
+              {children}
+            </Card>
+          </div>
 
-        <Sonner />
+          <Sonner />
+        </ThemeProvider>
       </body>
     </html>
   );
diff --git a/playground/src/config.ts b/playground/src/config.ts
@@ -1,11 +1,11 @@
-class Config {
-  private _githubUrl = 'https://github.com/Ohh-889/soybean-react-ui';
-
-  get githubUrl() {
-    return this._githubUrl;
+const config = {
+  githubUrl: 'https://github.com/Ohh-889/soybean-react-ui',
+  // eslint-disable-next-line n/prefer-global/process
+  isDev: process.env.NODE_ENV === 'development',
+  META_THEME_COLORS: {
+    dark: '#030712',
+    light: '#fafafa'
   }
-}
-
-const config = new Config();
+} as const;
 
 export default config;
