The short answer
What the dark mode style is actually for
Done properly it is the best-looking option on this list, and it suits anybody whose thumbnails, album art or screenshots are already dark, because the page stops fighting the content.
It suits musicians, gamers, video creators and anybody whose work is already dark. If that is not you, the recipe still works; it just means you are picking a look rather than matching one.
The exact settings
Field for field, as the Design tab names them. Nothing here is a suggestion to interpret.
#0C0A09#FAFAF9#A8A29E#292524#FAFAF9What makes a dark mode page work
- Near-black, not black. Pure #000000 with white text produces a halation effect that makes body text genuinely harder to read, and it is worse for people with astigmatism. A very dark warm grey removes it and costs you nothing that anybody would notice.
- Soft buttons, not outlines. An outline button on a dark background has a thin light line as its only presence, which disappears on a phone in daylight. A slightly lighter surface reads as a button in every lighting condition.
- Dim the muted text less than you think. Secondary text at 40% opacity looks elegant on a monitor and is unreadable outdoors. The muted value above holds 4.5:1 against the background, which is the floor rather than the target.
- Watch your images. A photo with a white background dropped onto a dark page is a bright rectangle in a dark room. Either use images with transparent or dark backgrounds, or accept that each one is now the loudest thing on the page.
And then the part styling cannot fix
Every style on this site is a decision about how the page looks. The order of what is on it is a separate decision, it matters more, and it is the one nobody revisits. A beautifully styled page with the wrong thing at the top is still a page with the wrong thing at the top.
The way this one goes wrong
Pure white text on pure black. It is the highest contrast combination available and it is genuinely uncomfortable to read for more than a few seconds, which is why almost no professional dark interface uses it.
What this page says, in six lines
- Near-black, not black.
- Soft buttons, not outlines.
- Every colour above clears 4.5:1, so nothing gets corrected after you save.
- Styling is the smaller half. What is at the top of the page matters more.
The other recipes are on the library index, and if you would rather describe a look than enter values, the adaptive page covers what the product does once the styling is settled.
Build the dark mode version
Every setting below is a field in the Design tab. Free to build, and the paid plan is one payment rather than a subscription.
Keep reading
- A minimalist link in bioThe exact hex values and settings. The link count is the part that matters.
- A bold link in bioOne accent, on one element. And white on orange fails, which surprises people.
- The link in bio for musiciansWhy a smart link costs you the visit, and what to lead with instead.
- An aesthetic link in bioIt should read as low contrast without being low contrast. That is the whole craft.