WIP. A little custom music server
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

use shadcn's theme

+41 -93
+41 -43
web/src/styles.css
··· 4 4 @custom-variant dark (&:is(.dark *)); 5 5 6 6 :root { 7 + --radius: 0.65rem; 7 8 --background: oklch(1 0 0); 8 - --foreground: oklch(0.145 0 0); 9 + --foreground: oklch(0.141 0.005 285.823); 9 10 --card: oklch(1 0 0); 10 - --card-foreground: oklch(0.145 0 0); 11 + --card-foreground: oklch(0.141 0.005 285.823); 11 12 --popover: oklch(1 0 0); 12 - --popover-foreground: oklch(0.145 0 0); 13 - --primary: oklch(0.205 0 0); 14 - --primary-foreground: oklch(0.985 0 0); 15 - --secondary: oklch(0.97 0 0); 16 - --secondary-foreground: oklch(0.205 0 0); 17 - --muted: oklch(0.97 0 0); 18 - --muted-foreground: oklch(0.556 0 0); 19 - --accent: oklch(0.97 0 0); 20 - --accent-foreground: oklch(0.205 0 0); 13 + --popover-foreground: oklch(0.141 0.005 285.823); 14 + --primary: oklch(0.705 0.213 47.604); 15 + --primary-foreground: oklch(0.98 0.016 73.684); 16 + --secondary: oklch(0.967 0.001 286.375); 17 + --secondary-foreground: oklch(0.21 0.006 285.885); 18 + --muted: oklch(0.967 0.001 286.375); 19 + --muted-foreground: oklch(0.552 0.016 285.938); 20 + --accent: oklch(0.967 0.001 286.375); 21 + --accent-foreground: oklch(0.21 0.006 285.885); 21 22 --destructive: oklch(0.577 0.245 27.325); 22 - --destructive-foreground: oklch(0.577 0.245 27.325); 23 - --border: oklch(0.922 0 0); 24 - --input: oklch(0.922 0 0); 25 - --ring: oklch(0.708 0 0); 23 + --border: oklch(0.92 0.004 286.32); 24 + --input: oklch(0.92 0.004 286.32); 25 + --ring: oklch(0.705 0.213 47.604); 26 26 --chart-1: oklch(0.646 0.222 41.116); 27 27 --chart-2: oklch(0.6 0.118 184.704); 28 28 --chart-3: oklch(0.398 0.07 227.392); 29 29 --chart-4: oklch(0.828 0.189 84.429); 30 30 --chart-5: oklch(0.769 0.188 70.08); 31 - --radius: 0.625rem; 32 31 --sidebar: oklch(0.985 0 0); 33 - --sidebar-foreground: oklch(0.145 0 0); 34 - --sidebar-primary: oklch(0.205 0 0); 35 - --sidebar-primary-foreground: oklch(0.985 0 0); 36 - --sidebar-accent: oklch(0.97 0 0); 37 - --sidebar-accent-foreground: oklch(0.205 0 0); 38 - --sidebar-border: oklch(0.922 0 0); 39 - --sidebar-ring: oklch(0.708 0 0); 32 + --sidebar-foreground: oklch(0.141 0.005 285.823); 33 + --sidebar-primary: oklch(0.705 0.213 47.604); 34 + --sidebar-primary-foreground: oklch(0.98 0.016 73.684); 35 + --sidebar-accent: oklch(0.967 0.001 286.375); 36 + --sidebar-accent-foreground: oklch(0.21 0.006 285.885); 37 + --sidebar-border: oklch(0.92 0.004 286.32); 38 + --sidebar-ring: oklch(0.705 0.213 47.604); 40 39 } 41 40 42 41 .dark { 43 - --background: oklch(0.145 0 0); 42 + --background: oklch(0.141 0.005 285.823); 44 43 --foreground: oklch(0.985 0 0); 45 - --card: oklch(0.145 0 0); 44 + --card: oklch(0.21 0.006 285.885); 46 45 --card-foreground: oklch(0.985 0 0); 47 - --popover: oklch(0.145 0 0); 46 + --popover: oklch(0.21 0.006 285.885); 48 47 --popover-foreground: oklch(0.985 0 0); 49 - --primary: oklch(0.985 0 0); 50 - --primary-foreground: oklch(0.205 0 0); 51 - --secondary: oklch(0.269 0 0); 48 + --primary: oklch(0.646 0.222 41.116); 49 + --primary-foreground: oklch(0.98 0.016 73.684); 50 + --secondary: oklch(0.274 0.006 286.033); 52 51 --secondary-foreground: oklch(0.985 0 0); 53 - --muted: oklch(0.269 0 0); 54 - --muted-foreground: oklch(0.708 0 0); 55 - --accent: oklch(0.269 0 0); 52 + --muted: oklch(0.274 0.006 286.033); 53 + --muted-foreground: oklch(0.705 0.015 286.067); 54 + --accent: oklch(0.274 0.006 286.033); 56 55 --accent-foreground: oklch(0.985 0 0); 57 - --destructive: oklch(0.396 0.141 25.723); 58 - --destructive-foreground: oklch(0.637 0.237 25.331); 59 - --border: oklch(0.269 0 0); 60 - --input: oklch(0.269 0 0); 61 - --ring: oklch(0.439 0 0); 56 + --destructive: oklch(0.704 0.191 22.216); 57 + --border: oklch(1 0 0 / 10%); 58 + --input: oklch(1 0 0 / 15%); 59 + --ring: oklch(0.646 0.222 41.116); 62 60 --chart-1: oklch(0.488 0.243 264.376); 63 61 --chart-2: oklch(0.696 0.17 162.48); 64 62 --chart-3: oklch(0.769 0.188 70.08); 65 63 --chart-4: oklch(0.627 0.265 303.9); 66 64 --chart-5: oklch(0.645 0.246 16.439); 67 - --sidebar: oklch(0.205 0 0); 65 + --sidebar: oklch(0.21 0.006 285.885); 68 66 --sidebar-foreground: oklch(0.985 0 0); 69 - --sidebar-primary: oklch(0.488 0.243 264.376); 70 - --sidebar-primary-foreground: oklch(0.985 0 0); 71 - --sidebar-accent: oklch(0.269 0 0); 67 + --sidebar-primary: oklch(0.646 0.222 41.116); 68 + --sidebar-primary-foreground: oklch(0.98 0.016 73.684); 69 + --sidebar-accent: oklch(0.274 0.006 286.033); 72 70 --sidebar-accent-foreground: oklch(0.985 0 0); 73 - --sidebar-border: oklch(0.269 0 0); 74 - --sidebar-ring: oklch(0.439 0 0); 71 + --sidebar-border: oklch(1 0 0 / 10%); 72 + --sidebar-ring: oklch(0.646 0.222 41.116); 75 73 } 76 74 77 75 @theme inline {
-50
web/tailwind.config.ts
··· 2 2 3 3 export default { 4 4 content: ["./src/**/*.{ts,tsx}"], 5 - theme: { 6 - extend: { 7 - colors: { 8 - brand: { 9 - orange: { 10 - DEFAULT: "oklch(0.7154 0.1862 42.53)", 11 - light: "oklch(0.7154 0.1862 42.53 / 8%)", 12 - }, 13 - }, 14 - border: "hsl(var(--border))", 15 - input: "hsl(var(--input))", 16 - ring: "hsl(var(--ring))", 17 - background: "hsl(var(--background))", 18 - foreground: "hsl(var(--foreground))", 19 - primary: { 20 - DEFAULT: "hsl(var(--primary))", 21 - foreground: "hsl(var(--primary-foreground))", 22 - }, 23 - secondary: { 24 - DEFAULT: "hsl(var(--secondary))", 25 - foreground: "hsl(var(--secondary-foreground))", 26 - }, 27 - destructive: { 28 - DEFAULT: "hsl(var(--destructive))", 29 - foreground: "hsl(var(--destructive-foreground))", 30 - }, 31 - muted: { 32 - DEFAULT: "hsl(var(--muted))", 33 - foreground: "hsl(var(--muted-foreground))", 34 - }, 35 - accent: { 36 - DEFAULT: "hsl(var(--accent))", 37 - foreground: "hsl(var(--accent-foreground))", 38 - }, 39 - popover: { 40 - DEFAULT: "hsl(var(--popover))", 41 - foreground: "hsl(var(--popover-foreground))", 42 - }, 43 - card: { 44 - DEFAULT: "hsl(var(--card))", 45 - foreground: "hsl(var(--card-foreground))", 46 - }, 47 - }, 48 - borderRadius: { 49 - lg: "var(--radius)", 50 - md: "calc(var(--radius) - 2px)", 51 - sm: "calc(var(--radius) - 4px)", 52 - }, 53 - }, 54 - }, 55 5 } satisfies Config;