Skip to content

smooth theme transition #1626

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sanjay-kv merged 2 commits into from
May 22, 2026
Merged

smooth theme transition #1626

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1aec579
smooth theme transition
hrx01-dev May 21, 2026
136a1a3
Merge remote-tracking branch 'upstream/main' into smooth-theme-transi…
hrx01-dev May 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
177 changes: 96 additions & 81 deletions src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand All @@ -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 */
Expand All @@ -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 {
Expand Down Expand Up @@ -1970,75 +2054,6 @@ main>div:not(.m-0) {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}

.blog-carousel-section {
padding: 1.5rem 0 !important;
margin: 1.5rem 0 !important;
}

/* Reduce section padding on mobile */
section,
[role="region"] {
padding: 1.5rem 0;
margin: 1.5rem 0;
}
}

/* Typography spacing for consistency */
h1:not(:first-child),
h2:not(:first-child),
h3:not(:first-child) {
margin-top: 2rem;
margin-bottom: 1rem;
}

h1:first-child,
h2:first-child,
h3:first-child {
margin-top: 0;
margin-bottom: 1rem;
}

/* --- CUSTOM MODERN SCROLLBAR --- */

::-webkit-scrollbar {
width: 6px !important;
height: 6px !important;
}

::-webkit-scrollbar-track {
background: transparent !important;
}

/* --- LIGHT THEME --- */
html[data-theme="light"] ::-webkit-scrollbar-thumb {
background-color: rgba(203, 213, 225, 1) !important;
border-radius: 10px !important;
}

html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
background-color: rgba(148, 163, 184, 1) !important;
}

/* --- DARK THEME --- */
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
background-color: rgba(51, 65, 85, 0.8) !important;
border-radius: 10px !important;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
background-color: #06b6d4 !important;
}

/* --- FIREFOX CORRECTIONS --- */
html[data-theme="light"] {
scrollbar-width: thin !important;
scrollbar-color: #cbd5e1 transparent !important;
}

html[data-theme="dark"] {
scrollbar-width: thin !important;
scrollbar-color: #334155 transparent !important;
}

/* =====================================================
Expand Down
4 changes: 3 additions & 1 deletion src/styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
17 changes: 12 additions & 5 deletions src/theme/ColorModeToggle/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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) => {
Expand All @@ -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)",
}}
Expand All @@ -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" />
Expand All @@ -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" />
Expand Down
Loading