Glance Catppuccin Frappe CSS

This project integrates the Glance Catppuccin Frappe theme into:

• Homepage
• Uptime-Kuma
• Material for Mkdocs
• Home Assistant

Homepage elements have been documented so you can go with your own theme if you choose, mkdocs and kuma both work but there may be some elements that look little off.

Home assistant example is for basic entity but you can iframe in your whole dashboard if you wanted.

Happily will accept pull requests for more glance themes and other selfhosted apps that support custom css

You can further integrate your apps by using the iframe widget in glance (see screenshots)

For those with larger monitors have look at glances page width options

---

Installation

Homepage

• Copy homepage.css to your homepage config folder
• Rename to custom.css
• Restart your homepage instance
• Ensure you choose slate as the your homepage theme

Material for MKdocs

• Copy mkdocs.css to stylesheets folder
• Rename to extra.css
• update mkdocs yaml folder to include extra.css file
• Restart your mkdocs instance

Uptime-Kuma Status Page

• Copy the contents of kuma.css
• Create and edit a status page
• Paste into custom.css section

Home Assistant

Prerequisites

• CardMod installed: https://github.com/thomasloven/lovelace-card-mod
• Kiosk Mode installed: https://github.com/NemesisRE/kiosk-mode

Process

• Allow Home Assistant to be iframed by adding the following to configuration.yaml:

  http:
    use_x_frame_options: false

• Create the CatppuccinFrappe theme and apply it under your user profile.

• Create a new dashboard for glance-style display.

• Add entities to the dashboard using example YAML as needed.

• Add an iframe widget to your glance page.

• Set the source URL to: http://yourha/yourdashboard/0?kiosk

---

Screenshot Examples

Glance Start Page

Home Assistant

Homepage

Material for MKdocs

Uptime Kuma