nixos/templates/homepage.css

/* Matugen-generated Homepage theme based on wallpaper */

/* Page background — overrides body default */
html, body, #__next, main {
  background-color: {{colors.surface.default.hex}} !important;
  color: {{colors.on_surface.default.hex}} !important;
}

/* Override Tailwind's slate palette (homepage's default color scheme).
   Each slate shade maps to the closest matugen surface/text color so
   the built-in theme classes render with wallpaper colors. */
.bg-slate-50, .dark\:bg-slate-50 { background-color: {{colors.surface_container_high.default.hex}} !important; }
.bg-slate-100, .dark\:bg-slate-100 { background-color: {{colors.surface_container_high.default.hex}} !important; }
.bg-slate-200, .dark\:bg-slate-200 { background-color: {{colors.surface_container.default.hex}} !important; }
.bg-slate-300, .dark\:bg-slate-300 { background-color: {{colors.surface_container.default.hex}} !important; }
.bg-slate-400, .dark\:bg-slate-400 { background-color: {{colors.surface_container_low.default.hex}} !important; }
.bg-slate-500, .dark\:bg-slate-500 { background-color: {{colors.surface_container_low.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; }

.text-slate-50, .dark\:text-slate-50 { color: {{colors.on_surface.default.hex}} !important; }
.text-slate-100, .dark\:text-slate-100 { 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; }

.border-slate-50, .dark\:border-slate-50,
.border-slate-100, .dark\:border-slate-100,
.border-slate-200, .dark\:border-slate-200,
.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; }

/* Accent — used on links, active states, progress bars */
a:hover, .service-container:hover .service-name,
.resources .progress-bar, .resources .usage-bar-fill {
  color: {{colors.primary.default.hex}} !important;
}

.bg-theme-500, .bg-theme-600, .bg-theme-400 {
  background-color: {{colors.primary.default.hex}} !important;
}