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

WIP/Experimental: Theme Switcher

Browse Source
This commit is contained in:
grimsi
2024-03-22 10:44:21 +01:00
parent ce9351f56b
commit 9424263c4a
10 changed files with 3092 additions and 1084 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/@/hooks/useConfig.ts
+20
View File
@@ -0,0 +1,20 @@
import {useAtom} from "jotai"
import {atomWithStorage} from "jotai/utils"
import {Theme} from "@/registry/themes"
type Config = {
theme: Theme["name"]
mode: "light" | "dark",
radius: number
}
const configAtom = atomWithStorage<Config>("config", {
theme: "zinc",
mode: "light",
radius: 0.5,
})
export function useConfig() {
return useAtom(configAtom)
}
frontend/@/lib/utils.ts
+6
View File
@@ -0,0 +1,6 @@
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
frontend/@/registry/colors.ts
+1556
View File
File diff suppressed because it is too large Load Diff
frontend/@/registry/themes.ts
+636
View File
@@ -0,0 +1,636 @@
export const themes = [
{
name: "zinc",
label: "Zinc",
activeColor: {
light: "240 5.9% 10%",
dark: "240 5.2% 33.9%",
},
cssVars: {
light: {
background: "0 0% 100%",
foreground: "240 10% 3.9%",
card: "0 0% 100%",
"card-foreground": "240 10% 3.9%",
popover: "0 0% 100%",
"popover-foreground": "240 10% 3.9%",
primary: "240 5.9% 10%",
"primary-foreground": "0 0% 98%",
secondary: "240 4.8% 95.9%",
"secondary-foreground": "240 5.9% 10%",
muted: "240 4.8% 95.9%",
"muted-foreground": "240 3.8% 46.1%",
accent: "240 4.8% 95.9%",
"accent-foreground": "240 5.9% 10%",
destructive: "0 84.2% 60.2%",
"destructive-foreground": "0 0% 98%",
border: "240 5.9% 90%",
input: "240 5.9% 90%",
ring: "240 5.9% 10%",
radius: "0.5rem",
},
dark: {
background: "240 10% 3.9%",
foreground: "0 0% 98%",
card: "240 10% 3.9%",
"card-foreground": "0 0% 98%",
popover: "240 10% 3.9%",
"popover-foreground": "0 0% 98%",
primary: "0 0% 98%",
"primary-foreground": "240 5.9% 10%",
secondary: "240 3.7% 15.9%",
"secondary-foreground": "0 0% 98%",
muted: "240 3.7% 15.9%",
"muted-foreground": "240 5% 64.9%",
accent: "240 3.7% 15.9%",
"accent-foreground": "0 0% 98%",
destructive: "0 62.8% 30.6%",
"destructive-foreground": "0 0% 98%",
border: "240 3.7% 15.9%",
input: "240 3.7% 15.9%",
ring: "240 4.9% 83.9%",
},
},
},
{
name: "slate",
label: "Slate",
activeColor: {
light: "215.4 16.3% 46.9%",
dark: "215.3 19.3% 34.5%",
},
cssVars: {
light: {
background: "0 0% 100%",
foreground: "222.2 84% 4.9%",
card: "0 0% 100%",
"card-foreground": "222.2 84% 4.9%",
popover: "0 0% 100%",
"popover-foreground": "222.2 84% 4.9%",
primary: "222.2 47.4% 11.2%",
"primary-foreground": "210 40% 98%",
secondary: "210 40% 96.1%",
"secondary-foreground": "222.2 47.4% 11.2%",
muted: "210 40% 96.1%",
"muted-foreground": "215.4 16.3% 46.9%",
accent: "210 40% 96.1%",
"accent-foreground": "222.2 47.4% 11.2%",
destructive: "0 84.2% 60.2%",
"destructive-foreground": "210 40% 98%",
border: "214.3 31.8% 91.4%",
input: "214.3 31.8% 91.4%",
ring: "222.2 84% 4.9%",
radius: "0.5rem",
},
dark: {
background: "222.2 84% 4.9%",
foreground: "210 40% 98%",
card: "222.2 84% 4.9%",
"card-foreground": "210 40% 98%",
popover: "222.2 84% 4.9%",
"popover-foreground": "210 40% 98%",
primary: "210 40% 98%",
"primary-foreground": "222.2 47.4% 11.2%",
secondary: "217.2 32.6% 17.5%",
"secondary-foreground": "210 40% 98%",
muted: "217.2 32.6% 17.5%",
"muted-foreground": "215 20.2% 65.1%",
accent: "217.2 32.6% 17.5%",
"accent-foreground": "210 40% 98%",
destructive: "0 62.8% 30.6%",
"destructive-foreground": "210 40% 98%",
border: "217.2 32.6% 17.5%",
input: "217.2 32.6% 17.5%",
ring: "212.7 26.8% 83.9",
},
},
},
{
name: "stone",
label: "Stone",
activeColor: {
light: "25 5.3% 44.7%",
dark: "33.3 5.5% 32.4%",
},
cssVars: {
light: {
background: "0 0% 100%",
foreground: "20 14.3% 4.1%",
card: "0 0% 100%",
"card-foreground": "20 14.3% 4.1%",
popover: "0 0% 100%",
"popover-foreground": "20 14.3% 4.1%",
primary: "24 9.8% 10%",
"primary-foreground": "60 9.1% 97.8%",
secondary: "60 4.8% 95.9%",
"secondary-foreground": "24 9.8% 10%",
muted: "60 4.8% 95.9%",
"muted-foreground": "25 5.3% 44.7%",
accent: "60 4.8% 95.9%",
"accent-foreground": "24 9.8% 10%",
destructive: "0 84.2% 60.2%",
"destructive-foreground": "60 9.1% 97.8%",
border: "20 5.9% 90%",
input: "20 5.9% 90%",
ring: "20 14.3% 4.1%",
radius: "0.95rem",
},
dark: {
background: "20 14.3% 4.1%",
foreground: "60 9.1% 97.8%",
card: "20 14.3% 4.1%",
"card-foreground": "60 9.1% 97.8%",
popover: "20 14.3% 4.1%",
"popover-foreground": "60 9.1% 97.8%",
primary: "60 9.1% 97.8%",
"primary-foreground": "24 9.8% 10%",
secondary: "12 6.5% 15.1%",
"secondary-foreground": "60 9.1% 97.8%",
muted: "12 6.5% 15.1%",
"muted-foreground": "24 5.4% 63.9%",
accent: "12 6.5% 15.1%",
"accent-foreground": "60 9.1% 97.8%",
destructive: "0 62.8% 30.6%",
"destructive-foreground": "60 9.1% 97.8%",
border: "12 6.5% 15.1%",
input: "12 6.5% 15.1%",
ring: "24 5.7% 82.9%",
},
},
},
{
name: "gray",
label: "Gray",
activeColor: {
light: "220 8.9% 46.1%",
dark: "215 13.8% 34.1%",
},
cssVars: {
light: {
background: "0 0% 100%",
foreground: "224 71.4% 4.1%",
card: "0 0% 100%",
"card-foreground": "224 71.4% 4.1%",
popover: "0 0% 100%",
"popover-foreground": "224 71.4% 4.1%",
primary: "220.9 39.3% 11%",
"primary-foreground": "210 20% 98%",
secondary: "220 14.3% 95.9%",
"secondary-foreground": "220.9 39.3% 11%",
muted: "220 14.3% 95.9%",
"muted-foreground": "220 8.9% 46.1%",
accent: "220 14.3% 95.9%",
"accent-foreground": "220.9 39.3% 11%",
destructive: "0 84.2% 60.2%",
"destructive-foreground": "210 20% 98%",
border: "220 13% 91%",
input: "220 13% 91%",
ring: "224 71.4% 4.1%",
radius: "0.35rem",
},
dark: {
background: "224 71.4% 4.1%",
foreground: "210 20% 98%",
card: "224 71.4% 4.1%",
"card-foreground": "210 20% 98%",
popover: "224 71.4% 4.1%",
"popover-foreground": "210 20% 98%",
primary: "210 20% 98%",
"primary-foreground": "220.9 39.3% 11%",
secondary: "215 27.9% 16.9%",
"secondary-foreground": "210 20% 98%",
muted: "215 27.9% 16.9%",
"muted-foreground": "217.9 10.6% 64.9%",
accent: "215 27.9% 16.9%",
"accent-foreground": "210 20% 98%",
destructive: "0 62.8% 30.6%",
"destructive-foreground": "210 20% 98%",
border: "215 27.9% 16.9%",
input: "215 27.9% 16.9%",
ring: "216 12.2% 83.9%",
},
},
},
{
name: "neutral",
label: "Neutral",
activeColor: {
light: "0 0% 45.1%",
dark: "0 0% 32.2%",
},
cssVars: {
light: {
background: "0 0% 100%",
foreground: "0 0% 3.9%",
card: "0 0% 100%",
"card-foreground": "0 0% 3.9%",
popover: "0 0% 100%",
"popover-foreground": "0 0% 3.9%",
primary: "0 0% 9%",
"primary-foreground": "0 0% 98%",
secondary: "0 0% 96.1%",
"secondary-foreground": "0 0% 9%",
muted: "0 0% 96.1%",
"muted-foreground": "0 0% 45.1%",
accent: "0 0% 96.1%",
"accent-foreground": "0 0% 9%",
destructive: "0 84.2% 60.2%",
"destructive-foreground": "0 0% 98%",
border: "0 0% 89.8%",
input: "0 0% 89.8%",
ring: "0 0% 3.9%",
},
dark: {
background: "0 0% 3.9%",
foreground: "0 0% 98%",
card: "0 0% 3.9%",
"card-foreground": "0 0% 98%",
popover: "0 0% 3.9%",
"popover-foreground": "0 0% 98%",
primary: "0 0% 98%",
"primary-foreground": "0 0% 9%",
secondary: "0 0% 14.9%",
"secondary-foreground": "0 0% 98%",
muted: "0 0% 14.9%",
"muted-foreground": "0 0% 63.9%",
accent: "0 0% 14.9%",
"accent-foreground": "0 0% 98%",
destructive: "0 62.8% 30.6%",
"destructive-foreground": "0 0% 98%",
border: "0 0% 14.9%",
input: "0 0% 14.9%",
ring: "0 0% 83.1%",
},
},
},
{
name: "red",
label: "Red",
activeColor: {
light: "0 72.2% 50.6%",
dark: "0 72.2% 50.6%",
},
cssVars: {
light: {
background: "0 0% 100%",
foreground: "0 0% 3.9%",
card: "0 0% 100%",
"card-foreground": "0 0% 3.9%",
popover: "0 0% 100%",
"popover-foreground": "0 0% 3.9%",
primary: "0 72.2% 50.6%",
"primary-foreground": "0 85.7% 97.3%",
secondary: "0 0% 96.1%",
"secondary-foreground": "0 0% 9%",
muted: "0 0% 96.1%",
"muted-foreground": "0 0% 45.1%",
accent: "0 0% 96.1%",
"accent-foreground": "0 0% 9%",
destructive: "0 84.2% 60.2%",
"destructive-foreground": "0 0% 98%",
border: "0 0% 89.8%",
input: "0 0% 89.8%",
ring: "0 72.2% 50.6%",
radius: "0.4rem",
},
dark: {
background: "0 0% 3.9%",
foreground: "0 0% 98%",
card: "0 0% 3.9%",
"card-foreground": "0 0% 98%",
popover: "0 0% 3.9%",
"popover-foreground": "0 0% 98%",
primary: "0 72.2% 50.6%",
"primary-foreground": "0 85.7% 97.3%",
secondary: "0 0% 14.9%",
"secondary-foreground": "0 0% 98%",
muted: "0 0% 14.9%",
"muted-foreground": "0 0% 63.9%",
accent: "0 0% 14.9%",
"accent-foreground": "0 0% 98%",
destructive: "0 62.8% 30.6%",
"destructive-foreground": "0 0% 98%",
border: "0 0% 14.9%",
input: "0 0% 14.9%",
ring: "0 72.2% 50.6%",
},
},
},
{
name: "rose",
label: "Rose",
activeColor: {
light: "346.8 77.2% 49.8%",
dark: "346.8 77.2% 49.8%",
},
cssVars: {
light: {
background: "0 0% 100%",
foreground: "240 10% 3.9%",
card: "0 0% 100%",
"card-foreground": "240 10% 3.9%",
popover: "0 0% 100%",
"popover-foreground": "240 10% 3.9%",
primary: "346.8 77.2% 49.8%",
"primary-foreground": "355.7 100% 97.3%",
secondary: "240 4.8% 95.9%",
"secondary-foreground": "240 5.9% 10%",
muted: "240 4.8% 95.9%",
"muted-foreground": "240 3.8% 46.1%",
accent: "240 4.8% 95.9%",
"accent-foreground": "240 5.9% 10%",
destructive: "0 84.2% 60.2%",
"destructive-foreground": "0 0% 98%",
border: "240 5.9% 90%",
input: "240 5.9% 90%",
ring: "346.8 77.2% 49.8%",
radius: "0.5rem",
},
dark: {
background: "20 14.3% 4.1%",
foreground: "0 0% 95%",
popover: "0 0% 9%",
"popover-foreground": "0 0% 95%",
card: "24 9.8% 10%",
"card-foreground": "0 0% 95%",
primary: "346.8 77.2% 49.8%",
"primary-foreground": "355.7 100% 97.3%",
secondary: "240 3.7% 15.9%",
"secondary-foreground": "0 0% 98%",
muted: "0 0% 15%",
"muted-foreground": "240 5% 64.9%",
accent: "12 6.5% 15.1%",
"accent-foreground": "0 0% 98%",
destructive: "0 62.8% 30.6%",
"destructive-foreground": "0 85.7% 97.3%",
border: "240 3.7% 15.9%",
input: "240 3.7% 15.9%",
ring: "346.8 77.2% 49.8%",
},
},
},
{
name: "orange",
label: "Orange",
activeColor: {
light: "24.6 95% 53.1%",
dark: "20.5 90.2% 48.2%",
},
cssVars: {
light: {
background: "0 0% 100%",
foreground: "20 14.3% 4.1%",
card: "0 0% 100%",
"card-foreground": "20 14.3% 4.1%",
popover: "0 0% 100%",
"popover-foreground": "20 14.3% 4.1%",
primary: "24.6 95% 53.1%",
"primary-foreground": "60 9.1% 97.8%",
secondary: "60 4.8% 95.9%",
"secondary-foreground": "24 9.8% 10%",
muted: "60 4.8% 95.9%",
"muted-foreground": "25 5.3% 44.7%",
accent: "60 4.8% 95.9%",
"accent-foreground": "24 9.8% 10%",
destructive: "0 84.2% 60.2%",
"destructive-foreground": "60 9.1% 97.8%",
border: "20 5.9% 90%",
input: "20 5.9% 90%",
ring: "24.6 95% 53.1%",
radius: "0.95rem",
},
dark: {
background: "20 14.3% 4.1%",
foreground: "60 9.1% 97.8%",
card: "20 14.3% 4.1%",
"card-foreground": "60 9.1% 97.8%",
popover: "20 14.3% 4.1%",
"popover-foreground": "60 9.1% 97.8%",
primary: "20.5 90.2% 48.2%",
"primary-foreground": "60 9.1% 97.8%",
secondary: "12 6.5% 15.1%",
"secondary-foreground": "60 9.1% 97.8%",
muted: "12 6.5% 15.1%",
"muted-foreground": "24 5.4% 63.9%",
accent: "12 6.5% 15.1%",
"accent-foreground": "60 9.1% 97.8%",
destructive: "0 72.2% 50.6%",
"destructive-foreground": "60 9.1% 97.8%",
border: "12 6.5% 15.1%",
input: "12 6.5% 15.1%",
ring: "20.5 90.2% 48.2%",
},
},
},
{
name: "green",
label: "Green",
activeColor: {
light: "142.1 76.2% 36.3%",
dark: "142.1 70.6% 45.3%",
},
cssVars: {
light: {
background: "0 0% 100%",
foreground: "240 10% 3.9%",
card: "0 0% 100%",
"card-foreground": "240 10% 3.9%",
popover: "0 0% 100%",
"popover-foreground": "240 10% 3.9%",
primary: "142.1 76.2% 36.3%",
"primary-foreground": "355.7 100% 97.3%",
secondary: "240 4.8% 95.9%",
"secondary-foreground": "240 5.9% 10%",
muted: "240 4.8% 95.9%",
"muted-foreground": "240 3.8% 46.1%",
accent: "240 4.8% 95.9%",
"accent-foreground": "240 5.9% 10%",
destructive: "0 84.2% 60.2%",
"destructive-foreground": "0 0% 98%",
border: "240 5.9% 90%",
input: "240 5.9% 90%",
ring: "142.1 76.2% 36.3%",
},
dark: {
background: "20 14.3% 4.1%",
foreground: "0 0% 95%",
popover: "0 0% 9%",
"popover-foreground": "0 0% 95%",
card: "24 9.8% 10%",
"card-foreground": "0 0% 95%",
primary: "142.1 70.6% 45.3%",
"primary-foreground": "144.9 80.4% 10%",
secondary: "240 3.7% 15.9%",
"secondary-foreground": "0 0% 98%",
muted: "0 0% 15%",
"muted-foreground": "240 5% 64.9%",
accent: "12 6.5% 15.1%",
"accent-foreground": "0 0% 98%",
destructive: "0 62.8% 30.6%",
"destructive-foreground": "0 85.7% 97.3%",
border: "240 3.7% 15.9%",
input: "240 3.7% 15.9%",
ring: "142.4 71.8% 29.2%",
},
},
},
{
name: "blue",
label: "Blue",
activeColor: {
light: "221.2 83.2% 53.3%",
dark: "217.2 91.2% 59.8%",
},
cssVars: {
light: {
background: "0 0% 100%",
foreground: "222.2 84% 4.9%",
card: "0 0% 100%",
"card-foreground": "222.2 84% 4.9%",
popover: "0 0% 100%",
"popover-foreground": "222.2 84% 4.9%",
primary: "221.2 83.2% 53.3%",
"primary-foreground": "210 40% 98%",
secondary: "210 40% 96.1%",
"secondary-foreground": "222.2 47.4% 11.2%",
muted: "210 40% 96.1%",
"muted-foreground": "215.4 16.3% 46.9%",
accent: "210 40% 96.1%",
"accent-foreground": "222.2 47.4% 11.2%",
destructive: "0 84.2% 60.2%",
"destructive-foreground": "210 40% 98%",
border: "214.3 31.8% 91.4%",
input: "214.3 31.8% 91.4%",
ring: "221.2 83.2% 53.3%",
},
dark: {
background: "222.2 84% 4.9%",
foreground: "210 40% 98%",
card: "222.2 84% 4.9%",
"card-foreground": "210 40% 98%",
popover: "222.2 84% 4.9%",
"popover-foreground": "210 40% 98%",
primary: "217.2 91.2% 59.8%",
"primary-foreground": "222.2 47.4% 11.2%",
secondary: "217.2 32.6% 17.5%",
"secondary-foreground": "210 40% 98%",
muted: "217.2 32.6% 17.5%",
"muted-foreground": "215 20.2% 65.1%",
accent: "217.2 32.6% 17.5%",
"accent-foreground": "210 40% 98%",
destructive: "0 62.8% 30.6%",
"destructive-foreground": "210 40% 98%",
border: "217.2 32.6% 17.5%",
input: "217.2 32.6% 17.5%",
ring: "224.3 76.3% 48%",
},
},
},
{
name: "yellow",
label: "Yellow",
activeColor: {
light: "47.9 95.8% 53.1%",
dark: "47.9 95.8% 53.1%",
},
cssVars: {
light: {
background: "0 0% 100%",
foreground: "20 14.3% 4.1%",
card: "0 0% 100%",
"card-foreground": "20 14.3% 4.1%",
popover: "0 0% 100%",
"popover-foreground": "20 14.3% 4.1%",
primary: "47.9 95.8% 53.1%",
"primary-foreground": "26 83.3% 14.1%",
secondary: "60 4.8% 95.9%",
"secondary-foreground": "24 9.8% 10%",
muted: "60 4.8% 95.9%",
"muted-foreground": "25 5.3% 44.7%",
accent: "60 4.8% 95.9%",
"accent-foreground": "24 9.8% 10%",
destructive: "0 84.2% 60.2%",
"destructive-foreground": "60 9.1% 97.8%",
border: "20 5.9% 90%",
input: "20 5.9% 90%",
ring: "20 14.3% 4.1%",
radius: "0.95rem",
},
dark: {
background: "20 14.3% 4.1%",
foreground: "60 9.1% 97.8%",
card: "20 14.3% 4.1%",
"card-foreground": "60 9.1% 97.8%",
popover: "20 14.3% 4.1%",
"popover-foreground": "60 9.1% 97.8%",
primary: "47.9 95.8% 53.1%",
"primary-foreground": "26 83.3% 14.1%",
secondary: "12 6.5% 15.1%",
"secondary-foreground": "60 9.1% 97.8%",
muted: "12 6.5% 15.1%",
"muted-foreground": "24 5.4% 63.9%",
accent: "12 6.5% 15.1%",
"accent-foreground": "60 9.1% 97.8%",
destructive: "0 62.8% 30.6%",
"destructive-foreground": "60 9.1% 97.8%",
border: "12 6.5% 15.1%",
input: "12 6.5% 15.1%",
ring: "35.5 91.7% 32.9%",
},
},
},
{
name: "violet",
label: "Violet",
activeColor: {
light: "262.1 83.3% 57.8%",
dark: "263.4 70% 50.4%",
},
cssVars: {
light: {
background: "0 0% 100%",
foreground: "224 71.4% 4.1%",
card: "0 0% 100%",
"card-foreground": "224 71.4% 4.1%",
popover: "0 0% 100%",
"popover-foreground": "224 71.4% 4.1%",
primary: "262.1 83.3% 57.8%",
"primary-foreground": "210 20% 98%",
secondary: "220 14.3% 95.9%",
"secondary-foreground": "220.9 39.3% 11%",
muted: "220 14.3% 95.9%",
"muted-foreground": "220 8.9% 46.1%",
accent: "220 14.3% 95.9%",
"accent-foreground": "220.9 39.3% 11%",
destructive: "0 84.2% 60.2%",
"destructive-foreground": "210 20% 98%",
border: "220 13% 91%",
input: "220 13% 91%",
ring: "262.1 83.3% 57.8%",
},
dark: {
background: "224 71.4% 4.1%",
foreground: "210 20% 98%",
card: "224 71.4% 4.1%",
"card-foreground": "210 20% 98%",
popover: "224 71.4% 4.1%",
"popover-foreground": "210 20% 98%",
primary: "263.4 70% 50.4%",
"primary-foreground": "210 20% 98%",
secondary: "215 27.9% 16.9%",
"secondary-foreground": "210 20% 98%",
muted: "215 27.9% 16.9%",
"muted-foreground": "217.9 10.6% 64.9%",
accent: "215 27.9% 16.9%",
"accent-foreground": "210 20% 98%",
destructive: "0 62.8% 30.6%",
"destructive-foreground": "210 20% 98%",
border: "215 27.9% 16.9%",
input: "215 27.9% 16.9%",
ring: "263.4 70% 50.4%",
},
},
},
] as const
export type Theme = (typeof themes)[number]
frontend/components/theming/ThemeSwitcher.tsx
+24
View File
@@ -0,0 +1,24 @@
"use client"
import * as React from "react"
import {useConfig} from "@/hooks/use-config"
export function ThemeSwitcher() {
const [config] = useConfig()
React.useEffect(() => {
document.body.classList.forEach((className) => {
if (className.match(/^theme.*/)) {
document.body.classList.remove(className)
}
})
const theme = segment === "themes" ? config.theme : null
if (theme) {
return document.body.classList.add(`theme-${theme}`)
}
}, [segment, config])
return null
}
frontend/main.css
+1 -1
View File
@@ -1,3 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind utilities;