Brendon/gameyfin
1
0
Fork 0
mirror of https://github.com/BrenBroZAYT/gameyfin.git synced 2026-06-16 00:30:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

WIP: Theme switcher

Browse Source 
- Light/Dark Toggle works
- Theme Preview works
- TODO: Theme switching
This commit is contained in:
grimsi
2024-04-08 11:33:47 +02:00
parent 5a2b26ee0c
commit 47f8febbd2
11 changed files with 662 additions and 683 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/theming/ThemePreview.tsx
+43 -45
View File
@@ -1,55 +1,53 @@
import {Theme} from "Frontend/@/registry/themes";
import {Card} from "Frontend/@/components/ui/card";
import {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from "Frontend/@/components/ui/tooltip";
import {Tooltip, TooltipContent, TooltipTrigger} from "Frontend/@/components/ui/tooltip";
import {useTheme} from "next-themes";
import GameyfinLogo from "Frontend/components/theming/GameyfinLogo";
import {hsl} from "Frontend/@/lib/utils";
export default function ThemePreview({theme}: { theme: Theme }) {
const {resolvedTheme} = useTheme();
//@ts-ignore
let resolvedTheme: "light" | "dark" = useTheme().resolvedTheme ?? "light";
const {setTheme} = useTheme();
function toggleMode() {
resolvedTheme = resolvedTheme === "light" ? "dark" : "light";
setTheme(resolvedTheme);
}
return (
<TooltipProvider>
<Tooltip delayDuration={0}>
<TooltipTrigger asChild>
<Card className="overflow-hidden flex place-self-center">
<svg width="228" height="120" viewBox="0 0 228 120" fill="none"
xmlns="http://www.w3.org/2000/svg">
{/*@ts-ignore*/}
<path id="background" d="M0 0H228V120H0V0Z" fill={theme.cssVars[resolvedTheme].background}/>
<rect id="background-secondary" x="29" y="54" width="144" height="53" rx="2"
fill="#30363D"/>
<rect x="184" y="54" width="32" height="36" rx="2" fill="#30363D"/>
<rect opacity="0.3" x="29" y="59" width="144" height="12" fill="#2EA043"/>
<path opacity="0.6" d="M0 0H228V23H0V0Z" fill="#484F58"/>
<rect x="13" y="9" width="32" height="6" rx="3" fill="#8B949E"/>
<rect x="29" y="36" width="48" height="6" rx="3" fill="#6E7681"/>
<rect x="34" y="62" width="64" height="6" rx="3" fill="#3FB950"/>
<rect x="210" y="36" width="6" height="6" rx="1" fill="#DA3633"/>
<rect x="202" y="36" width="6" height="6" rx="1" fill="#3FB950"/>
<rect x="53" y="9" width="32" height="6" rx="3" fill="#8B949E"/>
<rect x="93" y="9" width="32" height="6" rx="3" fill="#8B949E"/>
</svg>
</Card>
</TooltipTrigger>
<TooltipContent side="bottom">
<p className="capitalize">{theme.name}</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Card
className="overflow-hidden flex place-self-center justify-center p-6"
style={{background: hsl(theme.cssVars[resolvedTheme].background)}}>
<GameyfinLogo primary={theme.cssVars[resolvedTheme].primary}
secondary={theme.cssVars[resolvedTheme].secondary}
className="w-1/2"
/>
</Card>
</TooltipTrigger>
<TooltipContent side="bottom">
<p className="capitalize">{theme.name}</p>
</TooltipContent>
</Tooltip>
);
}
/*
<svg width="228" height="120" viewBox="0 0 228 120" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0H228V120H0V0Z" fill="#161B22"/>
<rect x="29" y="54" width="144" height="53" rx="2" fill="#30363D"/>
<rect x="184" y="54" width="32" height="36" rx="2" fill="#30363D"/>
<rect opacity="0.3" x="29" y="59" width="144" height="12" fill="#2EA043"/>
<path opacity="0.6" d="M0 0H228V23H0V0Z" fill="#484F58"/>
<rect x="13" y="9" width="32" height="6" rx="3" fill="#8B949E"/>
<rect x="29" y="36" width="48" height="6" rx="3" fill="#6E7681"/>
<rect x="34" y="62" width="64" height="6" rx="3" fill="#3FB950"/>
<rect x="210" y="36" width="6" height="6" rx="1" fill="#DA3633"/>
<rect x="202" y="36" width="6" height="6" rx="1" fill="#3FB950"/>
<rect x="53" y="9" width="32" height="6" rx="3" fill="#8B949E"/>
<rect x="93" y="9" width="32" height="6" rx="3" fill="#8B949E"/>
</svg>
*/
<svg width="228" height="120" viewBox="0 0 228 120" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="background" d="M0 0H228V120H0V0Z" fill={theme.cssVars[resolvedTheme].background}/>
<rect id="background-secondary" x="29" y="54" width="144" height="53" rx="2" fill="#30363D"/>
<rect x="184" y="54" width="32" height="36" rx="2" fill="#30363D"/>
<rect opacity="0.3" x="29" y="59" width="144" height="12" fill="#2EA043"/>
<path opacity="0.6" d="M0 0H228V23H0V0Z" fill="#484F58"/>
<rect x="13" y="9" width="32" height="6" rx="3" fill="#8B949E"/>
<rect x="29" y="36" width="48" height="6" rx="3" fill="#6E7681"/>
<rect x="34" y="62" width="64" height="6" rx="3" fill="#3FB950"/>
<rect x="210" y="36" width="6" height="6" rx="1" fill="#DA3633"/>
<rect x="202" y="36" width="6" height="6" rx="1" fill="#3FB950"/>
<rect x="53" y="9" width="32" height="6" rx="3" fill="#8B949E"/>
<rect x="93" y="9" width="32" height="6" rx="3" fill="#8B949E"/>
</svg>
*/