mirror of
https://github.com/BrenBroZAYT/gameyfin.git
synced 2026-06-13 16:40:01 +00:00
WIP/Experimental: Theme Switcher
This commit is contained in:
grimsi
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema.json",
|
||||
"style": "default",
|
||||
"rsc": false,
|
||||
"tsx": true,
|
||||
"tailwind": {
|
||||
"config": "tailwind.config.js",
|
||||
"css": "frontend/main.css",
|
||||
"baseColor": "slate",
|
||||
"cssVariables": false,
|
||||
"prefix": ""
|
||||
},
|
||||
"aliases": {
|
||||
"components": "@/components",
|
||||
"utils": "@/lib/utils"
|
||||
}
|
||||
}
|
||||
@@ -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)
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
import { type ClassValue, clsx } from "clsx"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -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]
|
||||
@@ -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
|
||||
}
|
||||
+1
-1
@@ -1,3 +1,3 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@tailwind utilities;
|
||||
|
||||
Generated
+785
-1062
File diff suppressed because it is too large
Load Diff
+6
-3
@@ -18,19 +18,24 @@
|
||||
"@hilla/react-components": "2.3.0",
|
||||
"@hilla/react-crud": "2.5.6",
|
||||
"@hilla/react-form": "2.5.6",
|
||||
"@material-tailwind/react": "^2.1.9",
|
||||
"@phosphor-icons/react": "^2.0.15",
|
||||
"@polymer/polymer": "3.5.1",
|
||||
"@vaadin/bundles": "24.3.0",
|
||||
"@vaadin/common-frontend": "0.0.19",
|
||||
"@vaadin/router": "1.7.5",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
"classnames": "^2.3.2",
|
||||
"clsx": "^2.1.0",
|
||||
"construct-style-sheets-polyfill": "3.1.0",
|
||||
"formik": "^2.4.5",
|
||||
"jotai": "^2.7.1",
|
||||
"lit": "3.1.0",
|
||||
"lucide-react": "^0.360.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.4.2",
|
||||
"tailwind-merge": "^2.2.2",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"yup": "^1.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -48,7 +53,6 @@
|
||||
"rollup-plugin-brotli": "3.1.0",
|
||||
"rollup-plugin-visualizer": "5.9.2",
|
||||
"strip-css-comments": "5.0.0",
|
||||
"tailwind-material-colors": "^2.0.2",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"transform-ast": "2.4.4",
|
||||
"typescript": "5.3.3",
|
||||
@@ -84,7 +88,6 @@
|
||||
"@hilla/react-crud": "$@hilla/react-crud",
|
||||
"@hilla/generator-typescript-plugin-backbone": "$@hilla/generator-typescript-plugin-backbone",
|
||||
"@hilla/generator-typescript-cli": "$@hilla/generator-typescript-cli",
|
||||
"@material-tailwind/react": "$@material-tailwind/react",
|
||||
"@phosphor-icons/react": "$@phosphor-icons/react",
|
||||
"formik": "$formik",
|
||||
"yup": "$yup"
|
||||
|
||||
+41
-18
@@ -1,20 +1,43 @@
|
||||
import withMT from "@material-tailwind/react/utils/withMT";
|
||||
import {withMaterialColors} from "tailwind-material-colors";
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default withMaterialColors(withMT({
|
||||
content: ["./frontend/index.html", "./frontend/**/*.{js,ts,jsx,tsx}"],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
'gf-primary': '#2332c8',
|
||||
'gf-secondary': '#6441a5'
|
||||
},
|
||||
}
|
||||
module.exports = {
|
||||
darkMode: ["class"],
|
||||
content: [
|
||||
'./frontend/index.html',
|
||||
'./frontend/**/*.{js,ts,jsx,tsx}',
|
||||
'./pages/**/*.{ts,tsx}',
|
||||
'./components/**/*.{ts,tsx}',
|
||||
'./app/**/*.{ts,tsx}',
|
||||
'./src/**/*.{ts,tsx}'
|
||||
],
|
||||
prefix: "",
|
||||
theme: {
|
||||
container: {
|
||||
center: true,
|
||||
padding: "2rem",
|
||||
screens: {
|
||||
"2xl": "1400px",
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}),
|
||||
{
|
||||
primary: "#2332c8"
|
||||
}
|
||||
);
|
||||
extend: {
|
||||
colors: {
|
||||
'gf-primary': '#2332c8',
|
||||
'gf-secondary': '#6441a5'
|
||||
},
|
||||
keyframes: {
|
||||
"accordion-down": {
|
||||
from: {height: "0"},
|
||||
to: {height: "var(--radix-accordion-content-height)"},
|
||||
},
|
||||
"accordion-up": {
|
||||
from: {height: "var(--radix-accordion-content-height)"},
|
||||
to: {height: "0"},
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
"accordion-down": "accordion-down 0.2s ease-out",
|
||||
"accordion-up": "accordion-up 0.2s ease-out",
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [require("tailwindcss-animate")],
|
||||
}
|
||||
Reference in New Issue
Block a user