mirror of
https://github.com/farion1231/cc-switch.git
synced 2026-05-21 04:40:18 +08:00
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:
@@ -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],
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user