Skip to content

The Skin System

Jump to bottom
Jason edited this page Sep 2, 2026 · 1 revision

The Skin System

Playdock's library has two independent axes, both changeable in Settings → Library Look:

  • Layout (LibraryLayoutStyle) - the structure: Grid, Shelves, Sidebar, List, Steam-style, Poster Carousel. Real, distinct navigation models researched against actual apps (PS5/Xbox home screens, Music.app, Playnite, Apple TV), not the same grid reskinned six times.
  • Skin (PlaydockSkin) - the look: 10 real visual identities (Quiet Luxury, Glass, Neobrutalist, Cyber Terminal, Soft UI, Editorial, Pixel Arcade, Console Unit, Minimal, Vaporwave).

Any layout can be paired with any skin.

How the Grid layout is rendered

The Grid view - the default, most-used layout - is rendered by a real WKWebView (Sources/ExeDock/Support/SkinWebGridView.swift), loading the actual per-skin HTML/CSS from Sources/ExeDock/Resources/SkinTemplate/ (index.html, skins.css, skins.js). This isn't an approximation rebuilt in SwiftUI - it's the literal mockup markup and stylesheet each skin was designed from, populated with real game data (title, genre, description, art, running/custom state) via a small JSON bridge, with clicks routed back to Swift through window.webkit.messageHandlers.playdock.

If you want to add a new skin or tweak an existing one's look, edit skins.css/skins.js directly - that's the real source of truth for what Grid looks like, and it takes effect on the next rebuild with no SwiftUI changes needed.

How the other five layouts are rendered

Shelves, Sidebar, List, Steam-style, and Poster Carousel are real native SwiftUI (Sources/ExeDock/Views/LibraryLayouts.swift), reading the same PlaydockSkin tokens (accent color, corner radius, font, border weight) through cardSurface()/tileSurface() (Sources/ExeDock/Support/DesignSystem.swift) and SkinBackground (Sources/ExeDock/Support/SkinBackgrounds.swift) for the per-skin background treatment.

Light and dark

Every skin has a genuinely separate light and dark identity - not every skin's original design had both (four were designed dark-only), so those got real light variants built for them rather than just being left dark regardless of system setting. The whole app follows the Mac's actual current appearance; no skin is pinned to one mode.

Real fonts

Skins with a strong typographic identity register their own bundled OFL-licensed display face at launch (Sources/ExeDock/Support/SkinFonts.swift, files under Sources/ExeDock/Resources/Fonts/) for their SwiftUI-rendered titles (grid cards use the WebView's own Google Fonts <link> instead, matching the mockup exactly).

Clone this wiki locally