Light and Dark Theme CSS from an Image

Updated September 10, 2026

A light and dark theme from an image is a paired CSS theme (background, surface, text, accent, border) derived from colors extracted from one photo. PhotoTones Pro builds both modes in your browser, with WCAG-checked foregrounds, then packs them into theme CSS or a brand kit ZIP.

Build light and dark themes from a photo in 3 steps

Choose a photo, logo, or UI screenshot on PhotoTones. The file stays in memory. Nothing is uploaded.
Generate a palette. Free users get hex, RGB, and HSL. Pro can extract 8, 10, or 12 colors.
On PhotoTones Pro, copy light theme CSS, dark theme CSS, or both. Or download the brand kit ZIP, which includes code/theme-light.css and code/theme-dark.css.

Paired themes from one image

Semantic light and dark CSS with WCAG-checked foregrounds. $7/month, cancel anytime.

Get the Brand Kit for $7/month Extract a palette first

What the theme CSS contains

PhotoTones Pro maps the extracted palette to semantic roles, then writes CSS custom properties for each mode:

background and surface for the canvas and cards
text and text-muted for body and captions
primary, secondary, and accent for interactive color
border and ring for edges and focus

Light mode uses :root and [data-theme="light"]. Dark mode uses [data-theme="dark"]. Foreground colors are checked against the fill so buttons stay readable.

Free palette vs Pro theme CSS

The free tool extracts up to 6 colors with hex, RGB, and HSL copy. You can assign those codes to a theme by hand. PhotoTones Pro generates the paired CSS, a workspace preview, Tailwind v4 @theme output, and the full brand kit ZIP.

If you only need codes, stay on the free tool. If you need a shippable light and dark theme, Pro is the path.

Choose a reference that works in both modes

Pick an image with a clear value range: a light area for surfaces, a deep area for dark backgrounds, and one saturated accent. Product shots, interiors, and cinematic stills work well. Flat pure-black or pure-white frames give the extractor less to map.

You can edit a swatch before export if one extracted color is off. Theme CSS and the brand kit use the edited palette.

Theme CSS, then the full kit

Light and dark files live in the brand kit ZIP with tokens and Figma JSON. $7/month, cancel anytime.

Get the Brand Kit for $7/month Design tokens from an image

Related workflows

For mapping dark UI by hand, see dark mode color palette from an image. For token files, use design tokens from an image. For CSS variables without a paired theme, see how to export a color palette to CSS.

Frequently Asked Questions

Can I generate light and dark theme CSS from an image?

Yes. PhotoTones Pro maps colors extracted from your photo to semantic light and dark tokens, then exports CSS custom properties. The original image never leaves your browser.

Is theme CSS included in the brand kit ZIP?

Yes. The kit includes code/theme-light.css and code/theme-dark.css, plus Tailwind, SCSS, and CSS variables. You can also copy the themes from the workspace without downloading the ZIP.

Does PhotoTones upload my image to build a theme?

No. Extraction and theme generation run in your browser. PhotoTones never uploads, stores, or transmits your photos.

Do I need PhotoTones Pro for light and dark theme CSS?

Yes. Theme CSS, the workspace preview, and the brand kit ZIP are PhotoTones Pro deliverables at $7/month. Hex, RGB, and HSL copy stay free.

How does PhotoTones pick dark mode colors?

Pro derives dark backgrounds and surfaces from the extracted neutrals, keeps the accent hue, and sets text and button foregrounds that pass a contrast check against each fill.