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

Finish theming implementation (finally...)

Browse Source
This commit is contained in:
grimsi
2024-05-14 10:22:17 +02:00
parent 47f8febbd2
commit f9d4e16604
45 changed files with 475 additions and 14951 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/theming/GameyfinLogo.tsx
+6 -16
View File
@@ -1,26 +1,16 @@
import {hsl} from "Frontend/@/lib/utils";
export default function GameyfinLogo({primary, secondary, className}: {
primary: string,
secondary: string,
export default function GameyfinLogo({className}: {
className?: string
}) {
const primaryColor = hsl(primary)
const secondaryColor = (secondary === null || secondary === undefined) ? primaryColor : hsl(secondary);
return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 365.58 336.34" className={className}>
<polygon points="190.1 49.13 190.1 69.24 207.98 44.13 190.1 49.13" fill={secondaryColor}/>
<polygon points="365.58 0 263.22 28.66 205.64 95.97 365.58 51.18 365.58 0" fill={secondaryColor}/>
<polygon points="190.1 49.13 190.1 69.24 207.98 44.13 190.1 49.13"/>
<polygon points="365.58 0 263.22 28.66 205.64 95.97 365.58 51.18 365.58 0"/>
<polygon
points="190.1 283.11 248.6 266.73 248.6 149.74 365.58 116.99 365.58 73.12 190.1 122.25 190.1 283.11"
fill={secondaryColor}/>
points="190.1 283.11 248.6 266.73 248.6 149.74 365.58 116.99 365.58 73.12 190.1 122.25 190.1 283.11"/>
<polygon
points="58.49 144.48 155.98 117.18 175.48 89.79 175.48 53.23 0 102.36 0 336.34 58.49 254.15 58.49 144.48"
fill={primaryColor}/>
points="58.49 144.48 155.98 117.18 175.48 89.79 175.48 53.23 0 102.36 0 336.34 58.49 254.15 58.49 144.48"/>
<polygon
points="116.99 199.59 116.99 245.09 65.81 259.42 0 336.34 175.48 287.2 175.48 170.22 131.61 182.5 116.99 199.59"
fill={primaryColor}/>
points="116.99 199.59 116.99 245.09 65.81 259.42 0 336.34 175.48 287.2 175.48 170.22 131.61 182.5 116.99 199.59"/>
</svg>
);
}
frontend/components/theming/ThemePreview.tsx
+14 -30
View File
@@ -1,41 +1,25 @@
import {Theme} from "Frontend/@/registry/themes";
import {Card} from "Frontend/@/components/ui/card";
import {Tooltip, TooltipContent, TooltipTrigger} from "Frontend/@/components/ui/tooltip";
import {useTheme} from "next-themes";
import {Theme} from "Frontend/theming/theme";
import {Card, Tooltip} from "@nextui-org/react";
import GameyfinLogo from "Frontend/components/theming/GameyfinLogo";
import {hsl} from "Frontend/@/lib/utils";
export default function ThemePreview({theme}: { theme: Theme }) {
//@ts-ignore
let resolvedTheme: "light" | "dark" = useTheme().resolvedTheme ?? "light";
const {setTheme} = useTheme();
function toggleMode() {
resolvedTheme = resolvedTheme === "light" ? "dark" : "light";
setTheme(resolvedTheme);
}
export default function ThemePreview({theme, mode, isSelected}: {
theme: Theme,
mode: "light" | "dark",
isSelected?: boolean
}) {
return (
<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 content={<p className="capitalize">{theme.name?.replace("-", " ")}</p>} placement="bottom">
<Card
shadow="none"
className={`${theme.name}-${mode} flex-row justify-center p-6 border-2 ${isSelected ? "border-focus" : "border-foreground-200 hover:border-focus"}`}
>
<GameyfinLogo className="w-1/2 fill-primary"/>
</Card>
</Tooltip>
);
}
/*
<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"/>