mirror of
https://github.com/farion1231/cc-switch.git
synced 2026-08-03 19:12:04 +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,
|
useMemo,
|
||||||
useState,
|
useState,
|
||||||
} from "react";
|
} from "react";
|
||||||
import { isLinux } from "@/lib/platform";
|
|
||||||
import { invoke } from "@tauri-apps/api/core";
|
import { invoke } from "@tauri-apps/api/core";
|
||||||
|
|
||||||
type Theme = "light" | "dark" | "system";
|
type Theme = "light" | "dark" | "system";
|
||||||
@@ -131,35 +130,9 @@ export function ThemeProvider({
|
|||||||
const value = useMemo<ThemeContextValue>(
|
const value = useMemo<ThemeContextValue>(
|
||||||
() => ({
|
() => ({
|
||||||
theme,
|
theme,
|
||||||
setTheme: (nextTheme: Theme, event?: React.MouseEvent) => {
|
setTheme: (nextTheme: Theme) => {
|
||||||
// Skip if same theme
|
|
||||||
if (nextTheme === theme) return;
|
if (nextTheme === theme) return;
|
||||||
|
setThemeState(nextTheme);
|
||||||
// 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);
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
[theme],
|
[theme],
|
||||||
|
|||||||
@@ -191,41 +191,3 @@ input[type="password"]::-ms-reveal,
|
|||||||
input[type="password"]::-ms-clear {
|
input[type="password"]::-ms-clear {
|
||||||
display: none;
|
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