Theming

Style

• Blueprint

  What the components draw by default.

  HTMLCopy

  <html>

• Soft

  Add data-style="soft" to <html>, or to any element around the components to make just those Soft. Tooltips sit on the page, so they keep the page's style.

  HTMLCopy

  <html data-style="soft">

designme.dev opens in Soft and remembers the style you pick in the header.

Light and dark

Without data-theme, the components follow the device's setting. Set it to fix the theme:

<html data-theme="dark">   <!-- or data-theme="light" -->

To switch from your own control, change the attribute. Remove it to follow the device again:

document.documentElement.setAttribute('data-theme', 'dark');
document.documentElement.removeAttribute('data-theme');

The accent and its roles

One accent runs through every component. It has a few roles, so a light colour like lime stays readable:

Fields and focus rings are grey, never the accent. A field (a text field, a search box, a dropdown) has a dimmed grey edge, --field-line (--dm-field-line), that steps up to --field-line-strong (--dm-field-line-strong) while it has the focus.

The contrast targets hold on the surface, and on the grey chips and tinted rows the accent sits on.

The defaults

• Soft is blue, #116ff8, with white text on it, in light and dark mode. Accent text is #0f5fd5 in light mode and #9dc4ff in dark mode.
• Blueprint is lime, #d4f84a, with dark text and icons on it. In dark mode, text and marks are lime too. In light mode, lime is too light to read on white, so accent text uses the ink colour and marks use a darker lime, #7a8e2b.

Your own accent

Set the roles together. Mark them !important: each style and theme sets the accent with a more specific selector, so a plain :root rule only reaches Soft in light mode.

:root{
  --accent:#ffe600 !important;       /* fills */
  --accent-2:#f2d900 !important;     /* fills on hover */
  --accent-bg:#fffbd6 !important;    /* tints */
  --on-accent:#121212 !important;    /* text on fills */
  --accent-fg:#121212 !important;    /* the accent as text, 4.5:1 */
  --accent-mark:#988900 !important;  /* lines, rings and chart marks, 3:1 */
}

In React, use the same names with dm- in front: --dm-accent, --dm-on-accent and so on. For other shades in dark mode, repeat the rule under :root[data-theme="dark"] and under @media (prefers-color-scheme: dark) with :root:not([data-theme="light"]).

Picking an accent on designme.dev

On the homepage, the dot beside the style switch picks an accent. On smaller screens it is in the menu. The site then works out the other roles from your colour:

• Text on a fill is white or near-black, whichever APCA says reads better. The fill then moves a little darker or lighter until that text reaches 4.5:1 and APCA Lc 60.
• Text and marks start from your colour and are darkened on a light page, or lightened on a dark one, until text reaches 4.5:1 and APCA Lc 60, and marks 3:1. If text would need too big a change, it uses the ink colour instead.

This runs on the site only. In your project, set the roles yourself as shown above.

Charts follow the accent

A chart's first colour is the accent's mark: --c1 (--dm-c1 in React) is --accent-mark. --a2 to --a4 mix it toward the surface for lighter steps. So Line chart, Bar chart and Donut chart change with the accent. Other series use fixed colours, --c2 to --c6.

Fonts

The components use Inter and JetBrains Mono, and fall back to the system font. In React, override --dm-sans and --dm-mono to use others, for example the families next/font gives you.