https://github.com/arumes31/heimdall-design

🎨 A premium, highly-polished theme gallery and advanced layout engine for Heimdall dashboards. Features 15 gorgeous glassmorphic themes, smart auto-sizing, content-fitted clock & greeting cards, widget gap controls, and a floating customization panel.
https://github.com/arumes31/heimdall-design

custom-css custom-javascript dashboard-design dashboard-themes front-end glassmorphism heimdall heimdall-dashboard homelab self-hosted user-interface web-design

Last synced: 9 days ago
JSON representation

🎨 A premium, highly-polished theme gallery and advanced layout engine for Heimdall dashboards. Features 15 gorgeous glassmorphic themes, smart auto-sizing, content-fitted clock & greeting cards, widget gap controls, and a floating customization panel.

• Host: GitHub
• URL: https://github.com/arumes31/heimdall-design
• Owner: arumes31
• Created: 2026-05-31T08:30:54.000Z (21 days ago)
• Default Branch: main
• Last Pushed: 2026-05-31T10:01:50.000Z (21 days ago)
• Last Synced: 2026-05-31T10:14:11.223Z (21 days ago)
• Topics: custom-css, custom-javascript, dashboard-design, dashboard-themes, front-end, glassmorphism, heimdall, heimdall-dashboard, homelab, self-hosted, user-interface, web-design
• Language: CSS
• Size: 53.7 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 🎨 HEIMDALL MASTER ENGINE v2.5

Transform your Heimdall dashboard into a state-of-the-art interface! This version introduces a clean, premium dashboard redesign containing **40 highly-polished built-in themes** toggleable instantly on-the-fly.

---

## 🌟 Advanced Injected Features

1.  **🎛️ Ultra-Compact Smart Sizing**: Redesigned from the ground up to be even more space-efficient than the native Heimdall view. Fits up to 14 widgets per row on desktop while automatically expanding for detailed metrics.

2.  **🐍 Precision Snake Borders**: A high-end animated border effect that features a sharp glowing line traveling around the perimeter of your app cards on hover.

3.  **💓 Health Pulse Status**: Service-aware animation. Any card detected as offline will automatically pulse with a soft red warning glow.

4.  **🎨 40 Injected Themes**: Includes popular styles like Tokyo Midnight, Catppuccin, Nord, Rose Pine, Dracula Pro, and many more.

5.  **💎 Glassmorphic Ripple Effects**: Rich tactile response when clicking any dashboard card.

6.  **📈 Self-Host Ping Monitors**: Real-time connectivity dots that indicate the status of your services.

7.  **🌸 Ambient Particles & Auroras**: Togglable flowing background effects for a premium "living" dashboard feel.

8.  **✨ Animated SVG Engine**: Automatically inlines icons to enable internal path animations (spinning gears, pulsing hearts, etc.).

---

## 🚀 How to Apply

1. Open your **Heimdall Dashboard**.

2. Click the **Settings** icon (⚙️).

3. Scroll to **Advanced**.

4. Copy and paste **[custom.css](file:///c:/DR/Nextcloud/BUILD/heimdall-mod/master-theme/custom.css)** into **Custom CSS**.

5. Copy and paste **[custom.js](file:///c:/DR/Nextcloud/BUILD/heimdall-mod/master-theme/custom.js)** into **Custom JavaScript**.

6. Click **Save**!

---

## 🎨 Featured Themes (40 Total)

1.  **🌌 Tokyo Midnight**: Deep indigo glass with electric accents.

2.  **📐 Swiss Brutalism**: High-contrast black and white.

3.  **❄️ Nord Polar**: Frosty blue arctic palette.

4.  **🐱 Catppuccin**: Soothing pastel mocha.

5.  **🌹 Rose Pine**: Ethereal twilight aesthetic.

6.  **🧛 Dracula Pro**: The ultimate dark mode.

7.  **📦 Gruvbox**: Retro-modern "retro-groove" look.

8.  **🌑 One Dark**: Refined syntax-style dark theme.

9.  **🍋 Cyber Lime**: High-energy neon green on obsidian.

10. **🥊 Cyber Red**: Intense red-line hacker aesthetic.

*...and 30 other premium profiles included!*