smooth theme transition

Author: hrx01-dev

src/css/custom.css

@@ -370,21 +370,67 @@ html[data-theme="dark"] .menu__link--active::after {
 }
 
 /* ======= SECTION 9 :Smooth theme transitions ========== */
-html,
-body {
-  transition:
-    background-color 150ms ease,
-    color 150ms ease;
-}
 
+/* Global smooth theme transitions for all color-related properties */
+html,
+body,
 .navbar,
+.navbar__inner,
+.navbar__brand,
+.navbar__link,
+.navbar__item,
 .footer,
+.footer__link,
 .sidebar,
-.main-wrapper {
+.sidebar__link,
+.main-wrapper,
+.theme-doc-sidebar-container,
+.theme-doc-toc-desktop,
+.theme-doc-sidebar-item,
+.article-card,
+.blog-card,
+.card,
+.menu__link,
+.menu__caret,
+.pagination,
+.pagination__item,
+.breadcrumbs,
+[class*="breadcrumb"],
+[class*="button"],
+[class*="btn"],
+.badge,
+.pill,
+.tag,
+.button-group,
+.admonition,
+.alert,
+.docusaurus-highlight-code-line,
+pre,
+code,
+input,
+textarea,
+select,
+[role="button"] {
+  transition:
+    background-color 300ms ease-in-out,
+    color 300ms ease-in-out,
+    border-color 300ms ease-in-out,
+    box-shadow 300ms ease-in-out,
+    fill 300ms ease-in-out,
+    stroke 300ms ease-in-out,
+    opacity 300ms ease-in-out !important;
+}
+
+/* SVG and icon transitions */
+svg,
+i,
+[class*="icon"] {
   transition:
-    background-color 150ms ease,
-    color 150ms ease,
-    border-color 150ms ease;
+    fill 300ms ease-in-out,
+    stroke 300ms ease-in-out,
+    color 300ms ease-in-out,
+    filter 300ms ease-in-out,
+    opacity 300ms ease-in-out !important;
 }
 
 /* Navbar icon styling */
@@ -395,6 +441,7 @@ body {
   margin-right: 4px;
   min-width: 18px;
   min-height: 18px;
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 /* Navbar social icon styles */
@@ -406,8 +453,45 @@ body {
   border-radius: 6px;
   color: var(--ifm-navbar-link-color);
   transition:
-    color 0.2s ease,
-    background-color 0.2s ease;
+    color 250ms cubic-bezier(0.4, 0, 0.2, 1),
+    background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),
+    filter 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Form elements smooth transitions */
+input,
+textarea,
+select,
+button,
+[role="button"] {
+  transition:
+    background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),
+    color 250ms cubic-bezier(0.4, 0, 0.2, 1),
+    border-color 250ms cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Code block transitions */
+code,
+pre,
+.code-block,
+.highlight,
+[class*="hljs"] {
+  transition:
+    background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),
+    color 250ms cubic-bezier(0.4, 0, 0.2, 1),
+    border-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Icon transitions */
+svg,
+i,
+[class*="icon"] {
+  transition:
+    fill 250ms cubic-bezier(0.4, 0, 0.2, 1),
+    stroke 250ms cubic-bezier(0.4, 0, 0.2, 1),
+    color 250ms cubic-bezier(0.4, 0, 0.2, 1),
+    filter 250ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .navbar-social-icon:hover {
@@ -2039,4 +2123,4 @@ html[data-theme="light"] {
 html[data-theme="dark"] {
   scrollbar-width: thin !important;
   scrollbar-color: #334155 transparent !important;
-}
+}

src/styles/globals.css

@@ -118,7 +118,9 @@
   * {
     @apply border-border outline-ring/50;
   }
+
   body {
     @apply bg-background text-foreground;
+    transition: background-color 300ms ease-in-out, color 300ms ease-in-out !important;
   }
-}
+}

src/theme/ColorModeToggle/index.tsx

@@ -8,8 +8,11 @@ export default function ColorModeToggle(): JSX.Element {
   // Safe setColorMode that works with DOM
   const setColorMode = (mode: "light" | "dark") => {
     if (!ExecutionEnvironment.canUseDOM) return;
+    // Set DOM attribute immediately for instant visual feedback
     document.documentElement.setAttribute("data-theme", mode);
-    // Also trigger Docusaurus's internal theme change if available
+    // Also store in localStorage
+    localStorage.setItem("theme", mode);
+    // Trigger Docusaurus's internal theme change if available
     try {
       const {
         setColorMode: docusaurusSetColorMode,
@@ -39,7 +42,7 @@ export default function ColorModeToggle(): JSX.Element {
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
-        transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+        transition: "all 200ms ease-out",
         transform: "scale(1)",
       }}
       onMouseEnter={(e) => {
@@ -51,7 +54,7 @@ export default function ColorModeToggle(): JSX.Element {
     >
       <div
         style={{
-          transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+          transition: "all 300ms ease-in-out",
           opacity: 1,
           transform: "rotate(0deg)",
         }}
@@ -63,8 +66,10 @@ export default function ColorModeToggle(): JSX.Element {
             viewBox="0 0 24 24"
             fill="currentColor"
             style={{
-              transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+              transition: "all 300ms ease-in-out",
               filter: "drop-shadow(0 0 4px rgba(255, 193, 7, 0.3))",
+              opacity: 1,
+              transform: "rotate(0deg) scale(1)",
             }}
           >
             <path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z" />
@@ -76,8 +81,10 @@ export default function ColorModeToggle(): JSX.Element {
             viewBox="0 0 24 24"
             fill="currentColor"
             style={{
-              transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+              transition: "all 300ms ease-in-out",
               filter: "drop-shadow(0 0 4px rgba(99, 102, 241, 0.3))",
+              opacity: 1,
+              transform: "rotate(0deg) scale(1)",
             }}
           >
             <path d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z" />