refactor(theme): remove circular reveal animation for theme switching

The View Transitions API used here crashes WebKitGTK with SIGSEGV on
Linux. Rather than gating document.startViewTransition per platform
(see PR #2502), drop the animation entirely — it's a low-value visual
flourish on a low-frequency action that doesn't justify a permanent
platform branch.

Removes the ::view-transition-* CSS block and the coordinate plumbing
in setTheme. The optional event parameter is kept on the API surface
to keep call sites compiling; they'll be cleaned up in a follow-up
commit.
This commit is contained in:
Jason
2026-05-02 17:38:21 +08:00
parent 72ab8a5cfd
commit bc1f9341f4
2 changed files with 2 additions and 67 deletions
+2 -29
View File
@@ -5,7 +5,6 @@ import React, {
useMemo,
useState,
} from "react";
import { isLinux } from "@/lib/platform";
import { invoke } from "@tauri-apps/api/core";
type Theme = "light" | "dark" | "system";
@@ -131,35 +130,9 @@ export function ThemeProvider({
const value = useMemo<ThemeContextValue>(
() => ({
theme,
setTheme: (nextTheme: Theme, event?: React.MouseEvent) => {
// Skip if same theme
setTheme: (nextTheme: Theme) => {
if (nextTheme === theme) return;
// Set transition origin coordinates from click event
const x = event?.clientX ?? window.innerWidth / 2;
const y = event?.clientY ?? window.innerHeight / 2;
document.documentElement.style.setProperty(
"--theme-transition-x",
`${x}px`,
);
document.documentElement.style.setProperty(
"--theme-transition-y",
`${y}px`,
);
// Use View Transitions API if available, otherwise fall back to instant change
// Disable for Linux, since WebKitGTK crashes on `document.startViewTransition`
if (
typeof document !== "undefined" &&
document.startViewTransition &&
!isLinux()
) {
document.startViewTransition(() => {
setThemeState(nextTheme);
});
} else {
setThemeState(nextTheme);
}
setThemeState(nextTheme);
},
}),
[theme],
-38
View File
@@ -191,41 +191,3 @@ input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
display: none;
}
::view-transition-old(root),
::view-transition-new(root) {
animation: none;
mix-blend-mode: normal;
}
::view-transition-old(root) {
z-index: 1;
}
::view-transition-new(root) {
z-index: 9999;
}
@keyframes theme-circle-expand {
from {
clip-path: circle(
0% at var(--theme-transition-x, 50%) var(--theme-transition-y, 50%)
);
}
to {
clip-path: circle(
150% at var(--theme-transition-x, 50%) var(--theme-transition-y, 50%)
);
}
}
::view-transition-new(root) {
animation: theme-circle-expand 0.4s ease-out;
}
@media (prefers-reduced-motion: reduce) {
::view-transition-new(root) {
animation: none;
}
}