Store

🇨🇳 中文 | 🇺🇸 English

Home · Troubleshooting · Changelog

---

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 60+ community-created skins beyond the built-in modern skin. Click a thumbnail to view the full preview.

🎮 Game & Anime

Skin	Preview
animal-crossing
black-myth-wukong
cs-go
deltaforce
dota-2
genshin
golden-spatula
gta-6
gundam
hearthstone
honor-of-kings
league-of-legends
legend-of-zelda
maplestory
need-for-speed
plants-vs-zombies
pocket-monsters
spirited-away
stardew-valley
street-fighter-6
teyvat-assets
tom-and-jerry
ultraman
valorant
wall-e
witcher-3
world-cup-championship-night

🎨 Art & Design

Skin	Preview
blue-and-white-porcelain
chinese-ink-wash-painting
oil-painting-classic
paper-ink-morning
starry-night
xuan-bamboo-shadow

🏠 Smart Home & Minimal

Skin	Preview
free-layout
glass-smart-home
ios-27-light
plush-3d
prism-tide
quiet-luxury
red-smart-home
retro-luxury
smarto-minimal
soft-home
suzhou-moon-garden
warm-glass

🎬 Movie & TV

Skin	Preview
chinese-odyssey-cinderella
chinese-odyssey-pandora
fantasy-westward-journey
farewell-my-concubine
forrest-gump
hongse-youhuo
iron-man
nezha-demon-child
peacekeeper-elite
resident-evil
romance-three-kingdoms

🌙 Dark & Ambiance

Skin	Preview
amblyopia-dark
claude-quiet
grok
red-dead-redemption-2

🎲 Card & Board

Skin	Preview
doudizhu
happy-match