Theme Builder

One colour in. A whole WunderUI theme out — light, dark, checked.

All checks pass

50#F2F7F6

100#EBF2F1

200#D6E5E3

300#ADCBC7

400#83B2AD

500#599B93

600#0F766E

700#216A63

800#194F4A

900#123531

1000#091A18

lightTint badge

Revenue

$48.2k

12.4%

Read the release notes or press Tab to see the focus ring.

darkTint badge

Revenue

$48.2k

12.4%

Read the release notes or press Tab to see the focus ring.

Light

AaButton text on primary5.47 : 1

AaLink on page5.47 : 1

AaTint text on tint8.59 : 1

AaFocus ring on page5.47 : 1

Dark

AaButton text on primary5.47 : 1

AaLink on page7.56 : 1

AaLink on card7.17 : 1

AaTint text on tint7.69 : 1

AaFocus ring on page7.56 : 1

theme.css

css

/* WunderUI brand theme — #0F766E. Import after @wunderui/react/styles.css. */
:root,
.light {
  --brand-50: #F2F7F6;
  --brand-100: #EBF2F1;
  --brand-200: #D6E5E3;
  --brand-300: #ADCBC7;
  --brand-400: #83B2AD;
  --brand-500: #599B93;
  --brand-600: #0F766E;
  --brand-700: #216A63;
  --brand-800: #194F4A;
  --brand-900: #123531;
  --brand-1000: #091A18;
  --primary-foreground: #FFFFFF;
  --brand-primary-foreground: #FFFFFF;
  --sidebar-primary-foreground: #FFFFFF;
}
.dark {
  --primary-foreground: #FFFFFF;
  --brand-primary-foreground: #FFFFFF;
  --sidebar-primary-foreground: #FFFFFF;
}