[Showcase] Premium Midea Dehumidifier Card: Glassmorphism & Dynamic UI

Share your Projects! Dashboards & Frontend
, , ,
1

:gem: High-End Midea Dehumidifier Interface

Hello everyone,

I wanted to share a project I’ve been working on to elevate the UI/UX of my Midea Dehumidifier (and compatible units). While the standard cards are functional, I felt the need for something that looks more integrated, modern, and provides instant visual feedback.

:movie_camera: The Result

preview

:sparkles: Key Features

  • Glassmorphism Design: A unibody look using custom:mod-card to eliminate borders between the main card and its controls.
  • Dynamic Visual Feedback: The background gradient and border glow change based on the active mode (Auto, Manual, or Clothes-Dry).
  • SVG-Driven Animation: A real spinning fan icon (mdi:fan) with a stabilized rotation center that only activates when the unit is running.
  • Integrated Cockpit: Quick access to 3-speed fan control and modes without needing a “more-info” dialog.

:hammer_and_wrench: Under the Hood

This setup leverages the power of Mushroom Cards combined with advanced Card-Mod CSS injection to pierce the Shadow DOM and control internal SVG elements.

Technical Stack:

  • Mushroom Cards
  • Thomas Lovén’s Card-Mod & Mod-Card

:package: Get the Code

The full YAML and installation instructions are available on my GitHub repository. I’ve spent some time refining the Git history and documentation to make it as professional as possible!

:point_right: Link to GitHub Repo

I’m curious to get your feedback on this design! Any ideas to make it even better?

1 Like