96 lines
2.3 KiB
Markdown
96 lines
2.3 KiB
Markdown
# Homarr Themes Configuration
|
|
|
|
## Dark Theme (Matching lemonlink.eu aesthetic)
|
|
|
|
### Primary Board Theme (Public)
|
|
```json
|
|
{
|
|
"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)
|
|
```json
|
|
{
|
|
"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
|
|
|
|
```css
|
|
/* 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;
|
|
}
|
|
```
|