admin/vibetorrent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 6 Wiki Activity

feat(ui): add more themes (cupcake, dracula, cyberpunk, emerald, sunset)

Browse Source
This commit is contained in:
spinline
2026-02-04 23:21:12 +03:00
parent a6a40997fb
commit efcee71f56
3 changed files with 169 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/input.css
View File

@@ -2,11 +2,11 @@
@config "./tailwind.config.js";
@plugin "daisyui" {
themes: light, dark, dim, nord;
themes:
light, dark, dim, nord, cupcake, dracula, cyberpunk, emerald, sunset;
}
@layer base {
html,
body {
@apply min-h-[100dvh] w-full overflow-hidden bg-base-100 text-base-content overscroll-y-none;
@@ -28,4 +28,4 @@
:focus {
outline: none !important;
}
}

165
frontend/public/tailwind.css
View File

@@ -2596,6 +2596,171 @@
--noise: 0;
}
}
@layer base {
:root:has(input.theme-controller[value=cupcake]:checked),[data-theme=cupcake] {
color-scheme: light;
--color-base-100: oklch(97.788% 0.004 56.375);
--color-base-200: oklch(93.982% 0.007 61.449);
--color-base-300: oklch(91.586% 0.006 53.44);
--color-base-content: oklch(23.574% 0.066 313.189);
--color-primary: oklch(85% 0.138 181.071);
--color-primary-content: oklch(43% 0.078 188.216);
--color-secondary: oklch(89% 0.061 343.231);
--color-secondary-content: oklch(45% 0.187 3.815);
--color-accent: oklch(90% 0.076 70.697);
--color-accent-content: oklch(47% 0.157 37.304);
--color-neutral: oklch(27% 0.006 286.033);
--color-neutral-content: oklch(92% 0.004 286.32);
--color-info: oklch(68% 0.169 237.323);
--color-info-content: oklch(29% 0.066 243.157);
--color-success: oklch(69% 0.17 162.48);
--color-success-content: oklch(26% 0.051 172.552);
--color-warning: oklch(79% 0.184 86.047);
--color-warning-content: oklch(28% 0.066 53.813);
--color-error: oklch(64% 0.246 16.439);
--color-error-content: oklch(27% 0.105 12.094);
--radius-selector: 1rem;
--radius-field: 2rem;
--radius-box: 1rem;
--size-selector: 0.25rem;
--size-field: 0.25rem;
--border: 2px;
--depth: 1;
--noise: 0;
}
}
@layer base {
:root:has(input.theme-controller[value=dracula]:checked),[data-theme=dracula] {
color-scheme: dark;
--color-base-100: oklch(28.822% 0.022 277.508);
--color-base-200: oklch(26.805% 0.02 277.508);
--color-base-300: oklch(24.787% 0.019 277.508);
--color-base-content: oklch(97.747% 0.007 106.545);
--color-primary: oklch(75.461% 0.183 346.812);
--color-primary-content: oklch(15.092% 0.036 346.812);
--color-secondary: oklch(74.202% 0.148 301.883);
--color-secondary-content: oklch(14.84% 0.029 301.883);
--color-accent: oklch(83.392% 0.124 66.558);
--color-accent-content: oklch(16.678% 0.024 66.558);
--color-neutral: oklch(39.445% 0.032 275.524);
--color-neutral-content: oklch(87.889% 0.006 275.524);
--color-info: oklch(88.263% 0.093 212.846);
--color-info-content: oklch(17.652% 0.018 212.846);
--color-success: oklch(87.099% 0.219 148.024);
--color-success-content: oklch(17.419% 0.043 148.024);
--color-warning: oklch(95.533% 0.134 112.757);
--color-warning-content: oklch(19.106% 0.026 112.757);
--color-error: oklch(68.22% 0.206 24.43);
--color-error-content: oklch(13.644% 0.041 24.43);
--radius-selector: 1rem;
--radius-field: 0.5rem;
--radius-box: 1rem;
--size-selector: 0.25rem;
--size-field: 0.25rem;
--border: 1px;
--depth: 0;
--noise: 0;
}
}
@layer base {
:root:has(input.theme-controller[value=cyberpunk]:checked),[data-theme=cyberpunk] {
color-scheme: light;
--color-base-100: oklch(94.51% 0.179 104.32);
--color-base-200: oklch(91.51% 0.179 104.32);
--color-base-300: oklch(85.51% 0.179 104.32);
--color-base-content: oklch(0% 0 0);
--color-primary: oklch(74.22% 0.209 6.35);
--color-primary-content: oklch(14.844% 0.041 6.35);
--color-secondary: oklch(83.33% 0.184 204.72);
--color-secondary-content: oklch(16.666% 0.036 204.72);
--color-accent: oklch(71.86% 0.217 310.43);
--color-accent-content: oklch(14.372% 0.043 310.43);
--color-neutral: oklch(23.04% 0.065 269.31);
--color-neutral-content: oklch(94.51% 0.179 104.32);
--color-info: oklch(72.06% 0.191 231.6);
--color-info-content: oklch(0% 0 0);
--color-success: oklch(64.8% 0.15 160);
--color-success-content: oklch(0% 0 0);
--color-warning: oklch(84.71% 0.199 83.87);
--color-warning-content: oklch(0% 0 0);
--color-error: oklch(71.76% 0.221 22.18);
--color-error-content: oklch(0% 0 0);
--radius-selector: 0rem;
--radius-field: 0rem;
--radius-box: 0rem;
--size-selector: 0.25rem;
--size-field: 0.25rem;
--border: 1px;
--depth: 0;
--noise: 0;
}
}
@layer base {
:root:has(input.theme-controller[value=emerald]:checked),[data-theme=emerald] {
color-scheme: light;
--color-base-100: oklch(100% 0 0);
--color-base-200: oklch(93% 0 0);
--color-base-300: oklch(86% 0 0);
--color-base-content: oklch(35.519% 0.032 262.988);
--color-primary: oklch(76.662% 0.135 153.45);
--color-primary-content: oklch(33.387% 0.04 162.24);
--color-secondary: oklch(61.302% 0.202 261.294);
--color-secondary-content: oklch(100% 0 0);
--color-accent: oklch(72.772% 0.149 33.2);
--color-accent-content: oklch(0% 0 0);
--color-neutral: oklch(35.519% 0.032 262.988);
--color-neutral-content: oklch(98.462% 0.001 247.838);
--color-info: oklch(72.06% 0.191 231.6);
--color-info-content: oklch(0% 0 0);
--color-success: oklch(64.8% 0.15 160);
--color-success-content: oklch(0% 0 0);
--color-warning: oklch(84.71% 0.199 83.87);
--color-warning-content: oklch(0% 0 0);
--color-error: oklch(71.76% 0.221 22.18);
--color-error-content: oklch(0% 0 0);
--radius-selector: 1rem;
--radius-field: 0.5rem;
--radius-box: 1rem;
--size-selector: 0.25rem;
--size-field: 0.25rem;
--border: 1px;
--depth: 0;
--noise: 0;
}
}
@layer base {
:root:has(input.theme-controller[value=sunset]:checked),[data-theme=sunset] {
color-scheme: dark;
--color-base-100: oklch(22% 0.019 237.69);
--color-base-200: oklch(20% 0.019 237.69);
--color-base-300: oklch(18% 0.019 237.69);
--color-base-content: oklch(77.383% 0.043 245.096);
--color-primary: oklch(74.703% 0.158 39.947);
--color-primary-content: oklch(14.94% 0.031 39.947);
--color-secondary: oklch(72.537% 0.177 2.72);
--color-secondary-content: oklch(14.507% 0.035 2.72);
--color-accent: oklch(71.294% 0.166 299.844);
--color-accent-content: oklch(14.258% 0.033 299.844);
--color-neutral: oklch(26% 0.019 237.69);
--color-neutral-content: oklch(70% 0.019 237.69);
--color-info: oklch(85.559% 0.085 206.015);
--color-info-content: oklch(17.111% 0.017 206.015);
--color-success: oklch(85.56% 0.085 144.778);
--color-success-content: oklch(17.112% 0.017 144.778);
--color-warning: oklch(85.569% 0.084 74.427);
--color-warning-content: oklch(17.113% 0.016 74.427);
--color-error: oklch(85.511% 0.078 16.886);
--color-error-content: oklch(17.102% 0.015 16.886);
--radius-selector: 1rem;
--radius-field: 0.5rem;
--radius-box: 1rem;
--size-selector: 0.25rem;
--size-field: 0.25rem;
--border: 1px;
--depth: 0;
--noise: 0;
}
}
@layer base {
:root {
--fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E");

2
frontend/src/components/layout/statusbar.rs
View File

@@ -254,7 +254,7 @@ pub fn StatusBar() -> impl IntoView {
>
{
let themes = vec![
"light", "dark", "dim", "nord"
"light", "dark", "dim", "nord", "cupcake", "dracula", "cyberpunk", "emerald", "sunset"
];
let close = close_dropdown.clone();
themes.into_iter().map(|theme| {