Store

Skin Store

The built-in skin store lets you download and install community skins directly from the card editor.

---

How It Works

1. Browse — Open the card editor → click the Store button (shopping cart icon)
2. Download — Click Download on any skin
3. Install — The card fetches the skin package from the CDN and installs it via the skins-pro-hass integration
4. Apply — Select the downloaded skin from the skin dropdown in the card editor

---

Prerequisites

Required: skins-pro-hass Integration

The skin store requires the companion integration:

1. Install via HACS: Add https://github.com/ha-china/skins-pro-hass as a custom repository (category: Integration)
2. Or manually copy skins-pro-hass/custom_components/skins_pro_hass/ to your HA custom_components/ folder
3. Restart Home Assistant

If you only use the built-in modern skin, you don't need the integration. The store is only required for downloading additional skins.

Network Access

Your HA instance needs internet access to reach the CDN where skin packages are hosted.

---

Manual Installation

If the store doesn't work (network restrictions, no integration, etc.), you can install skins manually:

1. Get the skin files — Either:

   • Clone the skin-assets branch: git clone -b skin-assets https://github.com/ha-china/Skins-Pro.git
   • Or download from a community member's repository

2. Copy to HA:

   <HA config>/www/skins-pro/<skin-name>/
     ├── theme.css
     ├── strings.json
     ├── avatar.jpg
     ├── background.jpg
     ├── room-*.jpg
     ├── icon-*.jpg
     └── ... (all files from the skin directory)
   

3. Register the skin — In the card editor, add the skin name to downloaded_skins:

   "downloaded_skins": ["<skin-name>"]

4. Select — The skin now appears in the skin dropdown. Select it and hard refresh.

---

Skin Store Mechanics

CDN Hosting

Skin packages are built and uploaded to a CDN by the CI pipeline. Each skin package contains:

• Compiled CSS (theme.css)
• Processed images (resized, compressed)
• Metadata (strings.json)

Versioning

Each skin in the store has a version field in its strings.json. When a new version is available, the store shows a "New version" badge. The update is downloaded and replaces the old version.

Community Submissions

Community skins are submitted via PR. Once merged, CI:

1. Builds the skin (process images, generate CSS)
2. Uploads the package to CDN
3. Makes it available in the store

See Contributing a Skin for submission guidelines.

---

Available Skins

The store offers a variety of community-created skins beyond the built-in modern skin:

Skin	Style	Theme
modern (built-in)	White glassmorphism	Clean, blue-white, frosted glass
AEON	Dark futuristic	Neon accents, high contrast
AEON_glass	Glass dark	Translucent panels, blur effects
visionOS	Apple-inspired	Translucent, rounded, light
minecraft	Game-themed	Blocky, pixel art
free-layout	Cyberpunk neon	Grid-free, vertical layout
plush-3d	Cream fleece	Soft, warm, 3D elements
prism-tide	Gradient wave	Colorful, flowing gradients
paper-ink-morning	Paper texture	Clean, note-taking style
suzhou-moon-garden	Chinese garden	Elegant, nature-inspired
xuan-bamboo-shadow	Ink wash	Traditional Chinese painting

And more — check the store for the latest additions!