Gaming App — Skin Previews

Modern · Glass

Frosted glass cards, gradient auras, soft shadows. Premium tech-brand feel.

Welcome back

Johnson

👑

Total Balance

Gold Chest

1,284 credits

Lucky

892

Bonus

392

Promo

Lunar Blind Box Event

Play now

See all

⚔️

Duel

1v1 battles

🎰

4 Pearls

Lucky draw

🎁

Blind Box

Open & win

🍡

串串

Group game

Neon · Cyberpunk

Dark arcade feel, neon edges, glow. Leans hard into gaming/blind-box energy.

// player

JOHNSON_03

👑

⬢ Total balance

GOLD // CHEST

1,284

credits

Lucky

892

Bonus

392

— Event Drop —

LUNAR BLIND BOX

× 2 credits weekend

▶ Arcade

see all →

⚔️

DUEL

1v1 · stake

🎰

4 PEARLS

pick · win

🎁

BLIND BOX

rare drop

🍡

串串

group · co-op

Minimal · Elegant

Editorial typography, lots of whitespace, warm monochrome. Luxury / boutique feel.

Welcome

Johnson.

Balance

1,284 cr

Lucky

892

Bonus

392

Your Chest

Gold Chest

Rank 04 · Keep winning to unlock Black Gold

👑

Current

Lunar Blind Box Event.

2× credits all weekend — Apr 19 → Apr 21.

Play

Duel

1v1 · staked matches

›

4 Pearls

Pick four · instant outcome

›

Blind Box

Mystery prizes · rare drops

›

串串 — Chuan

Group chain game

›

How the skin system works

Each phone above renders from the same API payload. Only the presentation layer changes.

Layer 1 · Shared

API + Store + Types

Your existing src/api/ and src/store/ stay exactly as they are. Zero risk to working endpoints.

Layer 2 · Theme tokens

CSS variables per skin

Colors, fonts, radii, shadows live in skins/<name>/tokens.css. Swap a class on <html> to flip themes instantly.

Layer 3 · Layouts

Per-skin components

Bigger structural changes live in skins/<name>/pages/. A <SkinProvider> picks the right one at runtime.

src/
  api/              // shared, untouched
  store/            // shared, untouched
  components/ui/    // shared primitives (Button, Modal, Input)
  skins/
    default/        // your current UI — preserved
    modern/         // new skin #1
    neon/           // new skin #2
    minimal/        // new skin #3
  lib/
    skinProvider.tsx   // picks skin from localStorage / ?skin= / user profile
  App.tsx           // wraps routes in <SkinProvider>

Switcher UX: dropdown in header/settings. Selection persists in localStorage and syncs to the user profile on next login, so the skin follows them across devices.