Onefold
Start free

Dark mode design tokens, built from your own colors.

Onefold builds your dark theme from the same color scales as your light one, checks the contrast and exports CSS variables and a Tailwind dark mode theme that switch the way your product does.

Create your DESIGN.md

Dark values from your own scales

Dark themefrom one scale
RoleLightDark
color-background
color-surface
color-text18.4:1 AA
color-action7.4:1 AA

Ready for your Tailwind theme

theme.cssTailwind theme

@custom-variant dark (&:where(.dark, .dark *));

@theme { … }

@layer base {

.dark {

color-scheme: dark;

--color-background: …;

--color-action: …;

Components use role tokens that change value in dark, so nobody has to add dark: overrides by hand.

Dark mode by guesswork looks different on every screen.

Ask an agent to add dark mode and it inverts your grays, picks a new accent by eye and sprinkles dark: classes across every component. Each screen looks a little different in dark, and some text becomes hard to read.

Dark mode holds together when it is a set of tokens, not a set of guesses. Onefold names a dark value for every role, from your own colors, and writes down how the theme turns on. If your product is light only, the file says so, and agents stop adding a dark theme nobody asked for.

One file, the decisions agents need.

01

Dark colors that belong to you

Every dark value comes from the same scales as your light theme, so your brand still looks like your brand at night.

02

Contrast you don’t have to check

Text and button labels are checked against their dark backgrounds, and shadows get a faint ring so layers stay visible.

03

The switch your product uses

System setting, a .dark class or a data-theme attribute. CSS variables and the Tailwind dark variant follow your choice.

Built for the way agents read a project.

  1. 1

    Start from your colors or your website.

    If your site already has a dark theme, Onefold reads it and how it switches. Otherwise it suggests one from your scales.

  2. 2

    Adjust any role you want.

    See light and dark side by side on a live preview. Change a background or accent, or decide your product stays light only.

  3. 3

    Export tokens that switch on their own.

    Paste the CSS variables or Tailwind theme into your stylesheet. DESIGN.md tells agents to use roles, not hand-picked dark colors.

One set of colors, two themes that agree.

Build your dark theme from the colors you already have, and give every agent the same answer to “what does this look like in dark?”
Start free