Dark Mode (OLED)

Stylegeneral

Dark theme, low light, high contrast, deep black, midnight blue, eye-friendly, OLED, night mode, power efficient. Best for Night-mode apps, coding platforms, entertainment, eye-strain prevention, OLED devices, low-light.

Dark theme low light high contrast deep black midnight blue eye-friendly OLED night mode

#000000

#121212

#0A0E27

#39FF14

#0080FF

#FFD700

#BF00FF

Preview

A sample page drawn from this style’s tokens — a guide to the look, not the exact output.

New · weekly review

Plan the week in ten minutes

Pull in every task, see what matters, and share one clear plan with the team.

Get startedSee how it worksDocs

Tasks done1,284+12% this week

Emailyou@example.com

Remember meContinue

Today

Review roadmapDone

Ship onboardingIn progress

Team sync3 pm

Prompt

Paste into any AI assistant before describing what to build — or attach it to a project below.

# Visual style: Dark Mode (OLED)

Keywords: Dark theme, low light, high contrast, deep black, midnight blue, eye-friendly, OLED, night mode, power efficient
Primary colours: Deep Black #000000, Dark Grey #121212, Midnight Blue #0A0E27
Secondary colours: Vibrant accents: Neon Green #39FF14, Electric Blue #0080FF, Gold #FFD700, Plasma Purple #BF00FF
Effects & animation: Minimal glow (text-shadow: 0 0 10px), dark-to-light transitions, low white emission, high readability, visible focus
Best for: Night-mode apps, coding platforms, entertainment, eye-strain prevention, OLED devices, low-light
Do not use for: Print-first content, high-brightness outdoor, color-accuracy-critical

## Prompt keywords
Create an OLED-optimized dark interface with deep black (#000000), dark grey (#121212), midnight blue accents. Use minimal glow effects, vibrant neon accents (green, blue, gold, purple), high contrast text. Optimize for eye comfort and OLED power saving.

## CSS / technical
background: #000000 or #121212, color: #FFFFFF or #E0E0E0, text-shadow: 0 0 10px neon-color (sparingly), filter: brightness(0.8) if needed, color-scheme: dark

## Implementation checklist
☐ Deep black #000000 or #121212, ☐ Vibrant neon accents used, ☐ Text contrast 7:1+, ☐ Minimal glow effects, ☐ OLED power optimization, ☐ No white (#FFFFFF) background

## Design system variables
--bg-black: #000000, --bg-dark-grey: #121212, --text-primary: #FFFFFF, --accent-neon: neon colors, --glow-effect: minimal, --oled-optimized: true

Use it in an app

Create a free account to attach this style to a project: the hub adds it to the prompt your AI assistant gets, so it builds every page in this look.

Start building — free I already have an account

From UI/UX Pro Max (MIT, commit 477bcb2).View source