feat: dark mode in ant design and can use tailwind

reference: ant-design/nextjs-registry#1
Li-Ninja · May 19, 2024 · 92b83b3 · 92b83b3
1 parent 8a14271
commit 92b83b3
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 2 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,6 +2,7 @@ import { GoogleTagManager } from '@next/third-parties/google';
 import classNames from 'classnames';
 import type { Metadata } from 'next';
 import { Noto_Sans_SC as noto } from 'next/font/google';
+import AntdRegistry from '@/component/global/antdRegistry';
 import Header from '@/component/global/header';
 import 'tw-elements-react/dist/css/tw-elements-react.min.css';
 import './globals.css';
@@ -23,8 +24,10 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={classNames('mx-2 mt-2', font.className)}>
-        <Header />
-        {children}
+        <AntdRegistry>
+          <Header />
+          {children}
+        </AntdRegistry>
       </body>
       {process.env.isProduction === 'true' && gtmId && <GoogleTagManager gtmId={gtmId} />}
     </html>

diff --git a/src/component/global/antdRegistry.tsx b/src/component/global/antdRegistry.tsx
@@ -0,0 +1,41 @@
+'use client';
+
+import {
+  StyleProvider, createCache, extractStyle,
+} from '@ant-design/cssinjs';
+import type Entity from '@ant-design/cssinjs/es/Cache';
+import {
+  ConfigProvider, theme,
+} from 'antd';
+import { useServerInsertedHTML } from 'next/navigation';
+import React from 'react';
+
+export default function AntdRegistry({ children }: React.PropsWithChildren) {
+  const isServerInserted = React.useRef<boolean>(false);
+  const cache = React.useMemo<Entity>(() => createCache(), []);
+  const { darkAlgorithm } = theme;
+
+  useServerInsertedHTML(() => {
+    if (isServerInserted.current) {
+      return;
+    }
+
+    isServerInserted.current = true;
+    return (
+      <style
+        id="antd"
+        dangerouslySetInnerHTML={{ __html: extractStyle(cache, true) }}
+      />
+    );
+  });
+  return (
+    <StyleProvider cache={cache}>
+      <ConfigProvider
+        theme={{
+          algorithm: darkAlgorithm,
+        }}>
+        {children}
+      </ConfigProvider>
+    </StyleProvider>
+  );
+}