GameCNRuntime Themes
Compare the five GameCN themes side by side.
Each theme ships as CSS variables for GameCN component anatomy. Components inherit the closest data-gamecn-theme attribute, so a full app, a route, or a single preview can switch game UI style without a React provider. The page shell is intentionally unchanged; themes affect the GameCN controls, panels, meters, cards, overlays, and blocks.
rpg: ornate high-fantasy with gold filigree, gemstones, carved frames, and premium MMO controls.fantasy-parchment: medieval adventure with parchment, leather, heraldic shields, iron trim, and rivets.sci-fi: clean command UI with thin rails, holographic blue panels, precise tabs, and compact telemetry.cyberpunk: neon glitch HUD with magenta/cyan cuts, scanlines, black chrome, and dense labels.horror: post-apocalyptic survival with rusted metal, hazard tape, torn paper, and distressed edges.
RPG Fantasy
Ornate high-fantasy MMO styling with gold filigree, gemstone ornaments, carved frames, and premium quest controls.
HUD Treatment
Quest Surface
Typography, paper material, borders, and list states inherit the selected component style.
Cyberpunk
Neon glitch interface with black chrome, magenta and cyan cuts, scanlines, dense labels, and high-contrast HUD treatments.
HUD Treatment
Quest Surface
Typography, paper material, borders, and list states inherit the selected component style.
Post-Apocalyptic
Rugged survival UI with rusted metal, hazard-strip controls, torn paper, distressed borders, and utility-first hierarchy.
HUD Treatment
Quest Surface
Typography, paper material, borders, and list states inherit the selected component style.
Sci-Fi
Clean command interface with thin blue rails, holographic panels, precise tabs, luminous cyan strokes, and compact telemetry.
HUD Treatment
Quest Surface
Typography, paper material, borders, and list states inherit the selected component style.
Medieval
Worn medieval UI with parchment surfaces, heraldic shields, leather panels, riveted iron trim, and grounded adventure controls.
HUD Treatment
Quest Surface
Typography, paper material, borders, and list states inherit the selected component style.
<main data-gamecn-theme="cyberpunk">
<PlayerHud />
</main>Use the global docs selector to test GameCN component styles alongside normal light and dark mode.