rope/nixos
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Override Homepage's Tailwind slate classes instead of CSS variables

Browse source 
The previous template targeted CSS variables that Homepage doesn't
actually expose at runtime, so only a handful of containers picked up
the theme. Targeting .bg-slate-*/text-slate-* directly replaces the
compiled Tailwind palette with matugen colors across the dashboard.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
ediblerope 2026-04-16 20:36:38 +01:00
parent 2709805c84
commit 916c1d1c2d
1 changed files with 39 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

94
templates/homepage.css
View file

@ -1,69 +1,53 @@
/* Matugen-generated Homepage theme based on wallpaper */ /* Matugen-generated Homepage theme based on wallpaper */
/* Background + text for the whole dashboard */ /* Page background — overrides body default */
html, body, main, .information-widget { html, body, #__next, main {
background-color: {{colors.surface.default.hex}} !important; background-color: {{colors.surface.default.hex}} !important;
color: {{colors.on_surface.default.hex}} !important; color: {{colors.on_surface.default.hex}} !important;
} }
/* Service and widget cards */ /* Override Tailwind's slate palette (homepage's default color scheme).
#information-widgets > *, Each slate shade maps to the closest matugen surface/text color so
.services-group .service, the built-in theme classes render with wallpaper colors. */
.bookmark-group .bookmark, .bg-slate-50, .dark\:bg-slate-50 { background-color: {{colors.surface_container_high.default.hex}} !important; }
.information-widget-datetime, .bg-slate-100, .dark\:bg-slate-100 { background-color: {{colors.surface_container_high.default.hex}} !important; }
.information-widget-resources, .bg-slate-200, .dark\:bg-slate-200 { background-color: {{colors.surface_container.default.hex}} !important; }
.information-widget-search { .bg-slate-300, .dark\:bg-slate-300 { background-color: {{colors.surface_container.default.hex}} !important; }
background-color: {{colors.surface_container.default.hex}} !important; .bg-slate-400, .dark\:bg-slate-400 { background-color: {{colors.surface_container_low.default.hex}} !important; }
color: {{colors.on_surface.default.hex}} !important; .bg-slate-500, .dark\:bg-slate-500 { background-color: {{colors.surface_container_low.default.hex}} !important; }
border-color: {{colors.outline_variant.default.hex}} !important; .bg-slate-600, .dark\:bg-slate-600 { background-color: {{colors.surface_container_low.default.hex}} !important; }
} .bg-slate-700, .dark\:bg-slate-700 { background-color: {{colors.surface_container.default.hex}} !important; }
.bg-slate-800, .dark\:bg-slate-800 { background-color: {{colors.surface_container.default.hex}} !important; }
.bg-slate-900, .dark\:bg-slate-900 { background-color: {{colors.surface.default.hex}} !important; }
.bg-slate-950, .dark\:bg-slate-950 { background-color: {{colors.surface.default.hex}} !important; }
/* Group headings */ .text-slate-50, .dark\:text-slate-50 { color: {{colors.on_surface.default.hex}} !important; }
h1, h2, h3, .services-group h2, .bookmark-group h2 { .text-slate-100, .dark\:text-slate-100 { color: {{colors.on_surface.default.hex}} !important; }
color: {{colors.on_surface.default.hex}} !important; .text-slate-200, .dark\:text-slate-200 { color: {{colors.on_surface.default.hex}} !important; }
} .text-slate-300, .dark\:text-slate-300 { color: {{colors.on_surface.default.hex}} !important; }
.text-slate-400, .dark\:text-slate-400 { color: {{colors.on_surface_variant.default.hex}} !important; }
.text-slate-500, .dark\:text-slate-500 { color: {{colors.on_surface_variant.default.hex}} !important; }
.text-slate-600, .dark\:text-slate-600 { color: {{colors.outline.default.hex}} !important; }
.text-slate-700, .dark\:text-slate-700 { color: {{colors.on_surface.default.hex}} !important; }
.text-slate-800, .dark\:text-slate-800 { color: {{colors.on_surface.default.hex}} !important; }
.text-slate-900, .dark\:text-slate-900 { color: {{colors.on_surface.default.hex}} !important; }
/* Muted / secondary text */ .border-slate-50, .dark\:border-slate-50,
.service-description, .bookmark-description, .border-slate-100, .dark\:border-slate-100,
.service .service-sub, .information-widget .label { .border-slate-200, .dark\:border-slate-200,
color: {{colors.on_surface_variant.default.hex}} !important; .border-slate-300, .dark\:border-slate-300,
} .border-slate-400, .dark\:border-slate-400,
.border-slate-500, .dark\:border-slate-500,
.border-slate-600, .dark\:border-slate-600,
.border-slate-700, .dark\:border-slate-700,
.border-slate-800, .dark\:border-slate-800 { border-color: {{colors.outline_variant.default.hex}} !important; }
/* Search input */ /* Accent — used on links, active states, progress bars */
input, .search input[type="text"] { a:hover, .service-container:hover .service-name,
background-color: {{colors.surface_container_high.default.hex}} !important; .resources .progress-bar, .resources .usage-bar-fill {
color: {{colors.on_surface.default.hex}} !important;
border-color: {{colors.outline.default.hex}} !important;
}
/* Accent — used on highlights, progress bars, links */
a, .service a:hover, .bookmark a:hover,
.resources .resource .progress .progress-bar,
button:hover, .service-container:hover {
color: {{colors.primary.default.hex}} !important; color: {{colors.primary.default.hex}} !important;
} }
.resources .resource .progress .progress-bar, .bg-theme-500, .bg-theme-600, .bg-theme-400 {
.resources .resource .usage-bar-fill {
background-color: {{colors.primary.default.hex}} !important; background-color: {{colors.primary.default.hex}} !important;
} }
/* Dividers */
hr, .service-container, .bookmark-container {
border-color: {{colors.outline_variant.default.hex}} !important;
}
/* Override Tailwind's slate palette so built-in theme uses wallpaper colors */
:root {
--color-slate-50: {{colors.on_surface.default.hex}};
--color-slate-100: {{colors.on_surface.default.hex}};
--color-slate-200: {{colors.on_surface.default.hex}};
--color-slate-300: {{colors.on_surface_variant.default.hex}};
--color-slate-400: {{colors.on_surface_variant.default.hex}};
--color-slate-500: {{colors.outline.default.hex}};
--color-slate-600: {{colors.outline_variant.default.hex}};
--color-slate-700: {{colors.surface_container_high.default.hex}};
--color-slate-800: {{colors.surface_container.default.hex}};
--color-slate-900: {{colors.surface.default.hex}};
--color-slate-950: {{colors.surface.default.hex}};
}