StyleKit
← All collections

Dark Mode Design Styles for Web & App UI

Dark mode is more than inverting colors — the best dark interfaces manage contrast, elevation, and glare so surfaces stay legible and calm at night. These styles are built dark-first, each with tuned color tokens, readable surface hierarchies, and accent colors that stay vivid on deep backgrounds. Pick one, copy its tokens, and ship a consistent dark theme in your AI coding tool.

Arcade CRT

80-90s arcade monitor aesthetics featuring scanlines, screen curvature, neon glow, and RGB chromatic aberration effects. Ideal for gaming, retro tech, and creative projects.

Creative
retrohigh-contrastdark-themegame-ui

Broadcast Glitch

The motion packaging of a dying broadcast signal. On CRT black: crawling scanlines, red-cyan channel jitter, SMPTE color bars and stepped glitch jumps. A revival of 90s TV idents and VHS glitch, not a synthwave sunset.

CreativePortfolio
retrodark-themehigh-contrasttexture-heavy

Cinematic Video Hero

A cinematic opener led by a short looping video. A poster frame paints first as the LCP; the muted video autoplays and loops only in view; dark grading builds a trailer-like immersive entrance.

MarketingCreative
dark-theme

Cyber Anime

Fusing cyberpunk sci-fi UI with anime aesthetics, featuring HUD overlays, holographic projection panels, mecha-frame borders, and multi-layer neon glow effects for a futuristic anime interface style.

Creative
high-contrastdark-themeanime-aestheticgame-ui

Cyber Chinese

A collision and fusion of traditional Chinese aesthetics with cyberpunk sci-fi -- vermilion and gold paired with neon blue-purple, dragon-phoenix seals intertwined with neon lanterns in a futuristic Eastern fantasy.

Creative
high-contrastdark-themeanime-aesthetic

Cyber Wafuu

A Japanese cyber aesthetic where seigaiha wave patterns merge with circuit traces, torii gate navigation frames, asanoha hemp leaf grids, kintsugi gold repair lines, and shoji screen grid panels -- traditional patterns 'hacked' by technology.

Creative
high-contrastdark-themeanime-aesthetic

Cyberpunk Neon

A futuristic cyberpunk style with neon glow effects, dark backgrounds, and high-tech UI elements. Ideal for games, tech products, and creative studios.

CreativeMarketing
high-contrastdark-themecolorful

Dark Academia

Classical university libraries, leather-bound books, classical literature, and vintage campus aesthetics. Deep brown and dark green palette with antique gold accents -- a warm and contemplative scholarly atmosphere.

BlogEditorial
retrodark-themetexture-heavy

Dark Gallery

A dark photography gallery portfolio: near-black canvases let full-bleed images command absolute attention; warm amber accents highlight metadata and captions while ultra-light typography retreats into the background. For photographers, filmmakers, and visual artists whose work speaks louder than chrome.

PortfolioBlog
dark-themeresponsive

Dark Mode

Elegant dark interface design with low-contrast layering, subtle borders and highlights. Ideal for developer tools, professional applications, and night reading mode.

PortfolioSaaS / B2B
dark-theme

Data Dense

High-density admin panel style with compact spacing and small components. Prioritizes data tables and operational efficiency.

AdminDashboard
dark-themeresponsive

Developer Terminal

Turn a website into a terminal session: phosphor-green mono text, prompt prefixes, paired command-and-output blocks, and a tmux status bar. Tool authenticity as developer identity.

PortfolioBlog
high-contrastdark-theme

Film Noir

A dramatic visual style drawn from classic 1940-50s film noir. Extreme light-dark contrast, deep grayscale layers, diagonal shadows, and a mysterious atmosphere, suited for story-driven products, photography portfolios, and premium brands.

CreativeMarketing
high-contrastdark-theme

Gothic

Medieval Gothic architectural aesthetics -- pointed arches, rose windows, manuscript decorations, and cathedral atmosphere. Deep purple and blood red palette with gold ornamental lines, filled with dark and solemn mystery.

CreativeEditorial
retrohigh-contrastdark-theme

Gothic Lolita

Victorian lace, black ribbons, crosses and roses in dark elegance -- a dark romantic aesthetic blending Gothic architectural ornamentation with Lolita's exquisite details.

CreativeE-Commerce
retrodark-theme

Holographic

Rainbow spectrum iridescent gradient aesthetics simulating holographic prismatic refraction and dynamic light effects for an otherworldly iridescent experience.

CreativeMarketing
high-contrastdark-themecolorfulgradient

Immersive Photo

Photography is the interface. Full-bleed images fill the viewport with text over readability scrims; a slow Ken Burns drift lets stills breathe, a blur-up placeholder loads first and the real frame fades in.

CreativeMarketing
dark-theme

JRPG

Classic Japanese RPG menu and dialogue box aesthetics with beveled borders, gradient backgrounds, status bars, and ornate frames. Ideal for game interfaces, interactive narratives, and fantasy-style products.

Creative
retrohigh-contrastdark-themeanime-aestheticgame-ui

Linear Style

A restrained dark interface inspired by Linear, combining precise typography, subtle motion, fine borders, and a polished developer-tool aesthetic.

SaaS / B2BBlog
dark-theme

macOS Vibrancy

Native macOS dark vibrancy style. Multi-layer dark gray panels, system-level backdrop-blur, and extreme restraint create the calm, professional feel of a desktop application.

SaaS / B2BDashboard
dark-themeglassmorphic

Magic Circle

A fantasy visual style featuring concentric nested ring systems, hexagram geometric cores, runic inscriptions along circular paths, Flower of Life sacred geometry, golden radiant glow, and interwoven alchemical symbols.

Creative
dark-themegeometricanime-aesthetic

Mecha

Design style inspired by mecha anime like Gundam/EVA -- tech panels, warning signs, mechanical textures, military green and navy blue base with warning yellow and danger red, brimming with industrial power.

Creative
high-contrastdark-themegame-uianime-aesthetic

Neon Gradient

Vivid gradient cards on dark backgrounds with thick colored borders and neon glow effects. Ideal for tech products, SaaS landing pages, and youth-oriented brands.

MarketingSaaS / B2B
dark-themegradient

Neon Samurai

A collision of traditional Japanese samurai aesthetics with neon cyberpunk, weaving katana slash lines, vermillion torii gate frames, calligraphy brushstrokes, and dual-color neon glow effects -- ukiyo-e meets neon lights in a futuristic urban bushido.

Creative
high-contrastdark-themeanime-aesthetic

Neon Tokyo

Tokyo Kabukicho neon nightscape style with rain-slicked street reflections, layered neon signage, and cyberpunk urban night vibes. Unlike cyberpunk-neon's sci-fi feel, this leans toward authentic urban nightscapes.

CreativeMarketing
high-contrastdark-themegradient

Outrun

80s sunsets, palm tree silhouettes, sports cars, grid horizons, and retro wave aesthetics. Magenta and purple neon with cyan skies -- brimming with speed and nostalgic futurism.

CreativeMarketing
retrohigh-contrastdark-themecolorfulgradient

Particle System

A floating particle network on deep dark tech backgrounds, using connection lines, pulses, and trails to create a sense of data flow. Ideal for tech companies, data visualization, and creative portfolios.

CreativeMarketing
dark-theme

Pastel Goth

A unique fusion of dark aesthetics and candy colors, pairing soft hues like pastel purple and pastel blue with gothic elements such as skulls and crosses. Dark backgrounds with pastel highlights.

Creative
high-contrastdark-theme

Pixel Anime

Merging classic JRPG game UI with pixel anime aesthetics, featuring RPG dialogue boxes, status bars, pixel borders, and NES color palette for a nostalgic 8-bit game interface style.

Creative
retrodark-themeanime-aestheticgame-ui

Sci-Fi HUD

A holographic display interface inspired by starship cockpits and tactical command centers. Deep space backgrounds, cyan glowing borders, translucent glass panels, and radar sweep animations create an immersive experience of operating high-tech equipment.

DashboardCreative
high-contrastdark-themegame-ui
Layout

Scrollytelling

Scrolling is the narrative timeline. A sticky canvas pins to the viewport while text steps trigger discrete state changes — numbers count, shapes morph, layers light up, revealing the story frame by frame like a data feature.

EditorialMarketing
dark-theme

Steampunk

Victorian-era industrial machinery aesthetics with brass and copper metallic elements, gear mechanism decorations, and steam pipe rivet details. Ideal for retro sci-fi, industrial style, and creative showcase projects.

CreativeEditorial
retrohigh-contrastdark-themetexture-heavy

Synthwave

80s retro-futuristic music aesthetic with neon pink-purple palette, grid horizon, sunset gradients, and vintage tech feel -- brimming with nostalgic visions of the future.

CreativeMarketing
retrohigh-contrastdark-themecolorfulgradient

VHS Aesthetic

80-90s VHS tape visual aesthetics with color distortion, scanline noise, and signal glitch effects. Ideal for nostalgia, retro tech, and creative video projects.

CreativeEditorial
retrohigh-contrastdark-themetexture-heavy

Visual Novel

A design style inspired by ADV visual novel game UI, featuring semi-transparent dialogue panels, character nameplate badges, ornate corner decorations, branching choice buttons, and save screen interfaces for an immersive interactive storytelling experience.

Creative
dark-themegame-uianime-aesthetic

Witchcore

Occult aesthetic style with tarot cards, moon phase symbols, crystals, and herbal elements. Deep purple tones paired with golden mystical runes and shimmering stardust effects on dark backgrounds.

CreativeE-Commerce
high-contrastdark-theme