fix(examples): improve theme switch in finefood-antd example

examples/finefoods-antd/src/components/header/index.tsx

@@ -27,6 +27,7 @@ import {
 
 import { useTranslation } from "react-i18next";
 import debounce from "lodash/debounce";
+import { flushSync } from "react-dom";
 
 import { useConfigProvider } from "../../context";
 import { IconMoon, IconSun } from "../../components/icons";
@@ -262,9 +263,51 @@ export const Header: React.FC = () => {
             <Button
               className={styles.themeSwitch}
               type="text"
+              shape="circle"
               icon={mode === "light" ? <IconMoon /> : <IconSun />}
-              onClick={() => {
-                setMode(mode === "light" ? "dark" : "light");
+              onClick={async (e) => {
+                const nextMode = mode === "light" ? "dark" : "light";
+                if (!document.startViewTransition) {
+                  setMode(nextMode);
+                  return;
+                }
+                const x = e.clientX || window.innerWidth / 2;
+                const y = e.clientY || window.innerHeight / 2;
+                document.documentElement.style.setProperty(
+                  "--click-x",
+                  `${x}px`,
+                );
+                document.documentElement.style.setProperty(
+                  "--click-y",
+                  `${y}px`,
+                );
+                document.documentElement.classList.remove(
+                  "light-transition",
+                  "dark-transition",
+                );
+                document.documentElement.classList.add(
+                  `${nextMode}-transition`,
+                );
+                const styleId = "theme-transition-styles";
+                let styleElement = document.getElementById(
+                  styleId,
+                ) as HTMLStyleElement;
+                if (!styleElement) {
+                  styleElement = document.createElement("style");
+                  styleElement.id = styleId;
+                  document.head.appendChild(styleElement);
+                }
+                styleElement.textContent = "* { transition: none !important; }";
+                const transition = document.startViewTransition(() => {
+                  flushSync(() => {
+                    setMode(nextMode);
+                  });
+                });
+                await transition.finished;
+                document.documentElement.classList.remove(
+                  `${nextMode}-transition`,
+                );
+                styleElement.textContent = "";
               }}
             />
 

examples/finefoods-antd/src/components/header/styled.tsx

@@ -39,6 +39,17 @@ export const useStyles = createStyles(({ token }) => ({
     borderRadius: "50%",
     cursor: "pointer",
     backgroundColor: token.colorBgTextHover,
+    padding: "0 !important",
+    border: "none",
+    transition: "background-color 0.3s ease",
+    "& > span": {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    "&:hover": {
+      backgroundColor: token.colorBgTextActive,
+    },
   },
   userName: {
     display: "flex !important",

examples/finefoods-antd/src/context/configProvider/config.css

@@ -1,38 +1,75 @@
 .ant-table-wrapper .ant-table {
-    border-radius: 8px;
+  border-radius: 8px;
 }
 
 .ant-table-wrapper .ant-table-tbody > tr:last-child > td:first-child {
-    border-bottom-left-radius: 8px;
+  border-bottom-left-radius: 8px;
 }
 
 .ant-table-wrapper .ant-table-tbody > tr:last-child > td:last-child {
-    border-bottom-right-radius: 8px;
+  border-bottom-right-radius: 8px;
 }
 
 .ant-pagination {
-    display: flex;
-    align-items: center;
+  display: flex;
+  align-items: center;
 }
 
 .ant-table-pagination.ant-pagination {
-    border-radius: 0px;
-    border-bottom-right-radius: 8px;
-    border-bottom-left-radius: 8px;
+  border-radius: 0px;
+  border-bottom-right-radius: 8px;
+  border-bottom-left-radius: 8px;
 }
 
 .ant-pagination-total-text {
-    margin-right: auto !important;
-    font-size: 14px !important;
-    margin-inline-end: auto !important;
+  margin-right: auto !important;
+  font-size: 14px !important;
+  margin-inline-end: auto !important;
 }
 
 .ant-col {
-    height: 100%;
+  height: 100%;
 }
 
 html[data-theme="dark"] {
-    .ant-table-filter-dropdown {
-        background-color: #000;
-    }
+  .ant-table-filter-dropdown {
+    background-color: #000;
+  }
+}
+
+::view-transition-group(root) {
+  animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
+}
+
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+
+.dark-transition::view-transition-old(root) {
+  z-index: 1;
+}
+
+.dark-transition::view-transition-new(root) {
+  z-index: 9999;
+  animation: clip-path-reveal 0.6s forwards;
+}
+
+.light-transition::view-transition-old(root) {
+  z-index: 1;
+}
+
+.light-transition::view-transition-new(root) {
+  z-index: 9999;
+  animation: clip-path-reveal 0.6s forwards;
+}
+
+@keyframes clip-path-reveal {
+  0% {
+    clip-path: circle(0px at var(--click-x, 50%) var(--click-y, 50%));
+  }
+  100% {
+    clip-path: circle(150% at var(--click-x, 50%) var(--click-y, 50%));
+  }
 }

examples/finefoods-antd/src/context/configProvider/index.tsx

@@ -48,7 +48,7 @@ export const ConfigProvider = ({
   useEffect(() => {
     const html = document.querySelector("html");
     html?.setAttribute("data-theme", mode);
-  }, []);
+  }, [mode]);
 
   return (
     <ConfigProviderContext.Provider value={{ mode, setMode: handleSetMode }}>