homarr-dashboard/config/homarr-themes.md

Homarr Themes Configuration

Dark Theme (Matching lemonlink.eu aesthetic)

Primary Board Theme (Public)

{
  "name": "LemonLink Dark",
  "primaryColor": "#6366f1",
  "secondaryColor": "#8b5cf6",
  "background": "#0a0a0f",
  "backgroundGradient": "linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 100%)",
  "cardBackground": "rgba(255, 255, 255, 0.05)",
  "cardBorder": "rgba(255, 255, 255, 0.1)",
  "textColor": "#e2e8f0",
  "textMuted": "#94a3b8",
  "accentColor": "#fbbf24",
  "successColor": "#22c55e",
  "warningColor": "#f59e0b",
  "errorColor": "#ef4444",
  "infoColor": "#3b82f6",
  "glassEffect": true,
  "transparency": 0.8,
  "borderRadius": 16,
  "shadowIntensity": "high"
}

Secondary Board Theme (Private/Admin)

{
  "name": "LemonLink Deep",
  "primaryColor": "#06b6d4",
  "secondaryColor": "#3b82f6",
  "background": "#0f172a",
  "backgroundGradient": "linear-gradient(135deg, #0f172a 0%, #1e293b 100%)",
  "cardBackground": "rgba(15, 23, 42, 0.8)",
  "cardBorder": "rgba(6, 182, 212, 0.2)",
  "textColor": "#f1f5f9",
  "textMuted": "#64748b",
  "accentColor": "#22d3ee",
  "glassEffect": true,
  "transparency": 0.9,
  "borderRadius": 12
}

Custom CSS for Advanced Styling

/* Glassmorphism Cards */
.homarr-card {
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  transition: all 0.3s ease !important;
}

.homarr-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
  border-color: rgba(99, 102, 241, 0.3) !important;
}

/* Animated Gradient Background */
.dashboard-background {
  background: linear-gradient(-45deg, #0a0a0f, #1a1a2e, #0f172a, #1e1b4b);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Glowing Text Effect */
.glow-text {
  text-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.5);
  border-radius: 4px;
}