feat: components with custom background use transparent background

This commit is contained in:
hamster1963
2024-12-19 10:40:11 +08:00
parent d8c68ffe5f
commit 3d66582a3a
10 changed files with 106 additions and 8 deletions
+7 -1
View File
@@ -17,6 +17,10 @@ export function ModeToggle() {
const { t } = useTranslation()
const { setTheme, theme } = useTheme()
const customBackgroundImage =
// @ts-expect-error ShowNetTransfer is a global variable
(window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
const handleSelect = (e: Event, newTheme: Theme) => {
e.preventDefault()
setTheme(newTheme)
@@ -28,7 +32,9 @@ export function ModeToggle() {
<Button
variant="outline"
size="sm"
className="rounded-full px-[9px] bg-white dark:bg-black"
className={cn("rounded-full px-[9px] bg-white dark:bg-black", {
"bg-white/50 dark:bg-black/50": customBackgroundImage,
})}
>
<Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />