Theming

In this guide, you'll learn how to customize Base Web through the theme object and how to create your own theme.

Intro to theming

Base Web ships by default with the Light theme. We understand that in some cases you want to change the look and feel of the components. To do so, follow the steps outlined here.

The `ThemeProvider`

With the ThemeProvider, you can apply a theme to your application locally. By default, Base Web ships with a light and a dark theme. For global theming, please refer to the BaseProvider.

If you'd like to use a different theme in one part of your application, you can locally wrap that part with the ThemeProvider to override the theme locally:

import {DarkTheme, ThemeProvider} from 'baseui';
export default function SomeDarkThemedPages() {
  return (
    <ThemeProvider theme={DarkTheme}>
      <div>
        This is a dark themed page - all the Base Web components used here will
        use the dark theme, as well as the theme object accessed through the
        styled function will use the values from the dark theme
      </div>
    </ThemeProvider>
  );
}

Creating a custom theme

Define your primitives

Primitives are used to define the colors and fonts for the components. An example of primitives can be found in the light theme primitives.

Define any additional theme overrides

Theme overrides are used to change values in the theme like paddings or borders. To learn more about what you can override, check out the creator.

Putting it all together

In practice, you can define your custom theme using this approach:

import {createTheme, lightThemePrimitives} from 'baseui';
const yourTheme = createTheme(
  {
    ...lightThemePrimitives,
    // add all the properties here you'd like to override from the light theme primitives
    primaryFontFamily: '"Comic Sans MS", cursive, sans-serif',
  },
  {
    // add all the theme overrides here - under the hood it uses deep merge
    animation: {
      timing100: '0.50s',
    },
  },
);

If you are using flow type with a custom theme, visit the styled function page for more information.

Theming Values

Colors

primary#276EF1

primary700#0C2960

primary600#123D90

primary500#174EB6

primary400#276EF1

primary300#548BF4

primary200#9CBCF8

primary100#D2E0FC

primary50#EDF3FE

negative#E54937

negative700#5C1D16

negative600#892C21

negative500#AE372A

negative400#E54937

negative300#EB7567

negative200#F4AFA7

negative100#FADBD7

negative50#FDF0EF

warning#ED6F0E

warning700#5F2C06

warning600#8E4308

warning500#B4540B

warning400#ED6F0E

warning300#F19248

warning200#F6BA8B

warning100#FBE2CF

warning50#FEF3EC

positive#07A35A

positive700#034124

positive600#046236

positive500#057C44

positive400#07A35A

positive300#43B982

positive200#88D3B0

positive100#CDEDDE

positive50#EBF8F2

mono100#FFFFFF

mono200#F7F7F7

mono300#F0F0F0

mono400#E5E5E5

mono500#CCCCCC

mono600#B3B3B3

mono700#999999

mono800#666666

mono900#333333

mono1000#000000

rating200#FFE1A5

rating400#FFC043

Sizing

scale0 (2px)

scale100 (4px)

scale200 (6px)

scale300 (8px)

scale400 (10px)

scale500 (12px)

scale600 (16px)

scale700 (20px)

scale800 (24px)

scale900 (32px)

scale1000 (40px)

scale1200 (48px)

scale1400 (56px)

scale1600 (64px)

scale2400 (96px)

scale3200 (128px)

scale4800 (192px)

Lighting

shadow400 (0 1px 4px hsla(0, 0%, 0%, 0.16))

shadow500 (0 2px 8px hsla(0, 0%, 0%, 0.16))

shadow600 (0 4px 16px hsla(0, 0%, 0%, 0.16))

shadow700 (0 8px 24px hsla(0, 0%, 0%, 0.16))

overlay0 (inset 0 0 0 1000px hsla(0, 0%, 0%, 0))

overlay100 (inset 0 0 0 1000px hsla(0, 0%, 0%, 0.04))

overlay200 (inset 0 0 0 1000px hsla(0, 0%, 0%, 0.08))

overlay300 (inset 0 0 0 1000px hsla(0, 0%, 0%, 0.12))

overlay400 (inset 0 0 0 1000px hsla(0, 0%, 0%, 0.16))

overlay500 (inset 0 0 0 1000px hsla(0, 0%, 0%, 0.2))

overlay600 (inset 0 0 0 1000px hsla(0, 0%, 0%, 0.24))

Borders

border100 (1px solid hsla(0, 0%, 0%, 0.04))

border200 (1px solid hsla(0, 0%, 0%, 0.08))

border300 (1px solid hsla(0, 0%, 0%, 0.12))

border400 (1px solid hsla(0, 0%, 0%, 0.16))

border500 (1px solid hsla(0, 0%, 0%, 0.2))

border600 (1px solid hsla(0, 0%, 0%, 0.24))