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

Using themeable values in component overrides

All themeable values are available within components that provide the overrides prop.

<Input
  overrides={{
    Input: {
      style: ({$theme}) => ({color: $theme.colors.primary}),
    },
  }}
  placeholder="Custom input that uses themeable values"
/>

To learn more on how overrides work, check out Better Reusable React Components with the Overrides Pattern article.

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',
    },
  },
);

The shape of the theme file 

{
  "breakpoints": {
    "small": 320,
    "medium": 600,
    "large": 1280
  },
  "colors": {
    "primary50": "#EDF3FE",
    "primary100": "#D2E0FC",
    "primary200": "#9CBCF8",
    "primary300": "#548BF4",
    "primary400": "#276EF1",
    "primary": "#276EF1",
    "primary500": "#174EB6",
    "primary600": "#123D90",
    "primary700": "#0C2960",
    "negative50": "#FDF0EF",
    "negative100": "#FADBD7",
    "negative200": "#F4AFA7",
    "negative300": "#EB7567",
    "negative400": "#E54937",
    "negative": "#E54937",
    "negative500": "#AE372A",
    "negative600": "#892C21",
    "negative700": "#5C1D16",
    "warning50": "#FEF3EC",
    "warning100": "#FBE2CF",
    "warning200": "#F6BA8B",
    "warning300": "#F19248",
    "warning400": "#ED6F0E",
    "warning": "#ED6F0E",
    "warning500": "#B4540B",
    "warning600": "#8E4308",
    "warning700": "#5F2C06",
    "positive50": "#EBF8F2",
    "positive100": "#CDEDDE",
    "positive200": "#88D3B0",
    "positive300": "#43B982",
    "positive400": "#07A35A",
    "positive": "#07A35A",
    "positive500": "#057C44",
    "positive600": "#046236",
    "positive700": "#034124",
    "white": "#FFFFFF",
    "mono100": "#FFFFFF",
    "mono200": "#F7F7F7",
    "mono300": "#F0F0F0",
    "mono400": "#E5E5E5",
    "mono500": "#CCCCCC",
    "mono600": "#B3B3B3",
    "mono700": "#999999",
    "mono800": "#666666",
    "mono900": "#333333",
    "mono1000": "#000000",
    "black": "#000000",
    "rating200": "#FFE1A5",
    "rating400": "#FFC043",
    "colorPrimary": "#000000",
    "colorSecondary": "#666666",
    "background": "#FFFFFF",
    "backgroundAlt": "#FFFFFF",
    "backgroundInv": "#000000",
    "foreground": "#000000",
    "foregroundAlt": "#666666",
    "foregroundInv": "#FFFFFF",
    "border": "#CCCCCC",
    "borderAlt": "#B3B3B3",
    "borderFocus": "#276EF1",
    "borderError": "#E54937",
    "buttonPrimaryFill": "#276EF1",
    "buttonPrimaryText": "#FFFFFF",
    "buttonPrimaryHover": "#174EB6",
    "buttonPrimaryActive": "#123D90",
    "buttonSecondaryFill": "#EDF3FE",
    "buttonSecondaryText": "#276EF1",
    "buttonSecondaryHover": "#D2E0FC",
    "buttonSecondaryActive": "#9CBCF8",
    "buttonTertiaryFill": "#F7F7F7",
    "buttonTertiaryText": "#276EF1",
    "buttonTertiaryHover": "#E5E5E5",
    "buttonTertiaryActive": "#CCCCCC",
    "buttonTertiarySelectedFill": "#276EF1",
    "buttonTertiarySelectedText": "#FFFFFF",
    "buttonMinimalFill": "transparent",
    "buttonMinimalText": "#276EF1",
    "buttonMinimalHover": "#F7F7F7",
    "buttonMinimalActive": "#E5E5E5",
    "buttonDisabledFill": "#F0F0F0",
    "buttonDisabledText": "#B3B3B3",
    "breadcrumbsText": "#333333",
    "breadcrumbsSeparatorFill": "#999999",
    "datepickerBackground": "#FFFFFF",
    "datepickerDayFont": "#000000",
    "datepickerDayFontDisabled": "#CCCCCC",
    "datepickerDayPseudoSelected": "#D2E0FC",
    "datepickerDayPseudoHighlighted": "#9CBCF8",
    "fileUploaderBackgroundColor": "#F7F7F7",
    "fileUploaderBackgroundColorActive": "#EDF3FE",
    "fileUploaderBorderColorActive": "#276EF1",
    "fileUploaderBorderColorDefault": "#CCCCCC",
    "fileUploaderMessageColor": "#B3B3B3",
    "linkText": "#276EF1",
    "linkVisited": "#174EB6",
    "linkHover": "#123D90",
    "linkActive": "#123D90",
    "shadowFocus": "rgba(39, 110, 241, 0.32)",
    "shadowError": "rgba(229, 73, 55, 0.32)",
    "listHeaderFill": "#FFFFFF",
    "listBodyFill": "#F7F7F7",
    "listIconFill": "#CCCCCC",
    "listBorder": "#CCCCCC",
    "progressStepsIconActiveFill": "#D2E0FC",
    "tickFill": "#FFFFFF",
    "tickFillHover": "#E5E5E5",
    "tickFillActive": "#CCCCCC",
    "tickFillSelected": "#276EF1",
    "tickFillSelectedHover": "#174EB6",
    "tickFillSelectedHoverActive": "#123D90",
    "tickFillError": "#FDF0EF",
    "tickFillErrorHover": "#FADBD7",
    "tickFillErrorHoverActive": "#F4AFA7",
    "tickFillErrorSelected": "#E54937",
    "tickFillErrorSelectedHover": "#AE372A",
    "tickFillErrorSelectedHoverActive": "#892C21",
    "tickFillDisabled": "#F0F0F0",
    "tickBorder": "#999999",
    "tickBorderError": "#E54937",
    "tickMarkFill": "#FFFFFF",
    "tickMarkFillDisabled": "#B3B3B3",
    "sliderTrackFill": "#E5E5E5",
    "sliderTrackFillHover": "#CCCCCC",
    "sliderTrackFillActive": "#B3B3B3",
    "sliderTrackFillSelected": "#276EF1",
    "sliderTrackFillSelectedHover": "#276EF1",
    "sliderTrackFillSelectedActive": "#174EB6",
    "sliderTrackFillDisabled": "#F0F0F0",
    "sliderHandleFill": "#FFFFFF",
    "sliderHandleFillHover": "#FFFFFF",
    "sliderHandleFillActive": "#FFFFFF",
    "sliderHandleFillSelected": "#FFFFFF",
    "sliderHandleFillSelectedHover": "#FFFFFF",
    "sliderHandleFillSelectedActive": "#FFFFFF",
    "sliderHandleFillDisabled": "#CCCCCC",
    "sliderHandleInnerFill": "#E5E5E5",
    "sliderHandleInnerFillDisabled": "#E5E5E5",
    "sliderHandleInnerFillSelectedHover": "#276EF1",
    "sliderHandleInnerFillSelectedActive": "#174EB6",
    "sliderBorder": "#CCCCCC",
    "sliderBorderHover": "#276EF1",
    "sliderBorderDisabled": "#B3B3B3",
    "inputFill": "#F7F7F7",
    "inputFillError": "#FDF0EF",
    "inputFillDisabled": "#F7F7F7",
    "inputFillActive": "#F7F7F7",
    "inputFillPositive": "#EBF8F2",
    "inputTextDisabled": "#B3B3B3",
    "inputBorderError": "#F4AFA7",
    "inputBorderPositive": "#88D3B0",
    "inputEnhancerFill": "#F0F0F0",
    "inputEnhancerFillDisabled": "#F0F0F0",
    "inputEnhancerTextDisabled": "#B3B3B3",
    "menuFill": "#FFFFFF",
    "menuFillHover": "#F7F7F7",
    "menuFontDefault": "#666666",
    "menuFontDisabled": "#CCCCCC",
    "menuFontHighlighted": "#000000",
    "menuFontSelected": "#000000",
    "paginationTriangleDown": "#666666",
    "headerNavigationFill": "transparent",
    "tabBarFill": "#F7F7F7",
    "tabColor": "#666666",
    "notificationPrimaryBackground": "#EDF3FE",
    "notificationPrimaryText": "#174EB6",
    "notificationPositiveBackground": "#EBF8F2",
    "notificationPositiveText": "#057C44",
    "notificationWarningBackground": "#FEF3EC",
    "notificationWarningText": "#B4540B",
    "notificationNegativeBackground": "#FDF0EF",
    "notificationNegativeText": "#AE372A",
    "tagSolidRampUnit": "400",
    "tagSolidHoverRampUnit": "50",
    "tagSolidActiveRampUnit": "100",
    "tagSolidDisabledRampUnit": "50",
    "tagSolidFontRampUnit": "50",
    "tagSolidFontHoverRampUnit": "500",
    "tagLightRampUnit": "50",
    "tagLightHoverRampUnit": "100",
    "tagLightActiveRampUnit": "100",
    "tagLightDisabledRampUnit": "50",
    "tagLightFontRampUnit": "500",
    "tagLightFontHoverRampUnit": "500",
    "tagOutlinedRampUnit": "400",
    "tagOutlinedHoverRampUnit": "500",
    "tagOutlinedActiveRampUnit": "600",
    "tagOutlinedDisabledRampUnit": "50",
    "tagOutlinedFontRampUnit": "500",
    "tagOutlinedFontHoverRampUnit": "50",
    "tagFontDisabledRampUnit": "200",
    "tagNeutralSolidBackground": "#333333",
    "tagNeutralSolidHover": "#F0F0F0",
    "tagNeutralSolidActive": "#E5E5E5",
    "tagNeutralSolidDisabled": "#F7F7F7",
    "tagNeutralSolidFont": "#FFFFFF",
    "tagNeutralSolidFontHover": "#333333",
    "tagNeutralLightBackground": "#F0F0F0",
    "tagNeutralLightHover": "#F0F0F0",
    "tagNeutralLightActive": "#E5E5E5",
    "tagNeutralLightDisabled": "#F7F7F7",
    "tagNeutralLightFont": "#333333",
    "tagNeutralLightFontHover": "#333333",
    "tagNeutralOutlinedBackground": "#333333",
    "tagNeutralOutlinedHover": "#666666",
    "tagNeutralOutlinedActive": "#333333",
    "tagNeutralOutlinedDisabled": "#F7F7F7",
    "tagNeutralOutlinedFont": "#333333",
    "tagNeutralOutlinedFontHover": "#F7F7F7",
    "tagNeutralFontDisabled": "#CCCCCC",
    "tagPrimarySolidBackground": "#276EF1",
    "tagPrimarySolidHover": "#EDF3FE",
    "tagPrimarySolidActive": "#D2E0FC",
    "tagPrimarySolidDisabled": "#EDF3FE",
    "tagPrimarySolidFont": "#EDF3FE",
    "tagPrimarySolidFontHover": "#174EB6",
    "tagPrimaryLightBackground": "#EDF3FE",
    "tagPrimaryLightHover": "#D2E0FC",
    "tagPrimaryLightActive": "#D2E0FC",
    "tagPrimaryLightDisabled": "#EDF3FE",
    "tagPrimaryLightFont": "#174EB6",
    "tagPrimaryLightFontHover": "#174EB6",
    "tagPrimaryOutlinedBackground": "#276EF1",
    "tagPrimaryOutlinedHover": "#174EB6",
    "tagPrimaryOutlinedActive": "#123D90",
    "tagPrimaryOutlinedDisabled": "#EDF3FE",
    "tagPrimaryOutlinedFont": "#174EB6",
    "tagPrimaryOutlinedFontHover": "#EDF3FE",
    "tagPrimaryFontDisabled": "#9CBCF8",
    "tagPositiveSolidBackground": "#07A35A",
    "tagPositiveSolidHover": "#EBF8F2",
    "tagPositiveSolidActive": "#CDEDDE",
    "tagPositiveSolidDisabled": "#EBF8F2",
    "tagPositiveSolidFont": "#EBF8F2",
    "tagPositiveSolidFontHover": "#057C44",
    "tagPositiveLightBackground": "#EBF8F2",
    "tagPositiveLightHover": "#CDEDDE",
    "tagPositiveLightActive": "#CDEDDE",
    "tagPositiveLightDisabled": "#EBF8F2",
    "tagPositiveLightFont": "#057C44",
    "tagPositiveLightFontHover": "#057C44",
    "tagPositiveOutlinedBackground": "#07A35A",
    "tagPositiveOutlinedHover": "#057C44",
    "tagPositiveOutlinedActive": "#046236",
    "tagPositiveOutlinedDisabled": "#EBF8F2",
    "tagPositiveOutlinedFont": "#057C44",
    "tagPositiveOutlinedFontHover": "#EBF8F2",
    "tagPositiveFontDisabled": "#88D3B0",
    "tagWarningSolidBackground": "#ED6F0E",
    "tagWarningSolidHover": "#FEF3EC",
    "tagWarningSolidActive": "#FBE2CF",
    "tagWarningSolidDisabled": "#FEF3EC",
    "tagWarningSolidFont": "#FEF3EC",
    "tagWarningSolidFontHover": "#B4540B",
    "tagWarningLightBackground": "#FEF3EC",
    "tagWarningLightHover": "#FBE2CF",
    "tagWarningLightActive": "#FBE2CF",
    "tagWarningLightDisabled": "#FEF3EC",
    "tagWarningLightFont": "#B4540B",
    "tagWarningLightFontHover": "#B4540B",
    "tagWarningOutlinedBackground": "#ED6F0E",
    "tagWarningOutlinedHover": "#B4540B",
    "tagWarningOutlinedActive": "#8E4308",
    "tagWarningOutlinedDisabled": "#FEF3EC",
    "tagWarningOutlinedFont": "#B4540B",
    "tagWarningOutlinedFontHover": "#FEF3EC",
    "tagWarningFontDisabled": "#F6BA8B",
    "tagNegativeSolidBackground": "#E54937",
    "tagNegativeSolidHover": "#FDF0EF",
    "tagNegativeSolidActive": "#FADBD7",
    "tagNegativeSolidDisabled": "#FDF0EF",
    "tagNegativeSolidFont": "#FDF0EF",
    "tagNegativeSolidFontHover": "#AE372A",
    "tagNegativeLightBackground": "#FDF0EF",
    "tagNegativeLightHover": "#FADBD7",
    "tagNegativeLightActive": "#FADBD7",
    "tagNegativeLightDisabled": "#FDF0EF",
    "tagNegativeLightFont": "#AE372A",
    "tagNegativeLightFontHover": "#AE372A",
    "tagNegativeOutlinedBackground": "#E54937",
    "tagNegativeOutlinedHover": "#AE372A",
    "tagNegativeOutlinedActive": "#892C21",
    "tagNegativeOutlinedDisabled": "#FDF0EF",
    "tagNegativeOutlinedFont": "#AE372A",
    "tagNegativeOutlinedFontHover": "#FDF0EF",
    "tagNegativeFontDisabled": "#F4AFA7",
    "tableHeadBackgroundColor": "#FFFFFF",
    "tableBackground": "#FFFFFF",
    "tableFilter": "#B3B3B3",
    "tableFilterHeading": "#999999",
    "tableFilterBackground": "#FFFFFF",
    "tableFilterFooterBackground": "#F7F7F7",
    "toastText": "#FFFFFF",
    "toastPrimaryBackground": "#174EB6",
    "toastPositiveBackground": "#057C44",
    "toastWarningBackground": "#B4540B",
    "toastNegativeBackground": "#AE372A",
    "spinnerTrackFill": "#333333",
    "progressbarTrackFill": "#333333",
    "tooltipBackground": "#333333",
    "tooltipText": "#FFFFFF"
  },
  "typography": {
    "font100": {
      "fontFamily": "system-ui, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
      "fontSize": "11px",
      "fontWeight": "normal",
      "lineHeight": "16px"
    },
    "font200": {
      "fontFamily": "system-ui, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
      "fontSize": "12px",
      "fontWeight": "normal",
      "lineHeight": "20px"
    },
    "font250": {
      "fontFamily": "system-ui, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
      "fontSize": "12px",
      "fontWeight": 500,
      "lineHeight": "20px"
    },
    "font300": {
      "fontFamily": "system-ui, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
      "fontSize": "14px",
      "fontWeight": "normal",
      "lineHeight": "20px"
    },
    "font350": {
      "fontFamily": "system-ui, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
      "fontSize": "14px",
      "fontWeight": 500,
      "lineHeight": "20px"
    },
    "font400": {
      "fontFamily": "system-ui, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
      "fontSize": "16px",
      "fontWeight": "normal",
      "lineHeight": "24px"
    },
    "font450": {
      "fontFamily": "system-ui, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
      "fontSize": "16px",
      "fontWeight": 500,
      "lineHeight": "24px"
    },
    "font460": {
      "fontFamily": "system-ui, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
      "fontSize": "18px",
      "fontWeight": "normal",
      "lineHeight": "24px"
    },
    "font470": {
      "fontFamily": "system-ui, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
      "fontSize": "18px",
      "fontWeight": 500,
      "lineHeight": "24px"
    },
    "font500": {
      "fontFamily": "system-ui, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
      "fontSize": "20px",
      "fontWeight": 500,
      "lineHeight": "28px"
    },
    "font600": {
      "fontFamily": "system-ui, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
      "fontSize": "24px",
      "fontWeight": 500,
      "lineHeight": "36px"
    },
    "font700": {
      "fontFamily": "system-ui, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
      "fontSize": "32px",
      "fontWeight": 500,
      "lineHeight": "48px"
    },
    "font800": {
      "fontFamily": "system-ui, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
      "fontSize": "40px",
      "fontWeight": 500,
      "lineHeight": "56px"
    },
    "font900": {
      "fontFamily": "system-ui, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
      "fontSize": "52px",
      "fontWeight": 500,
      "lineHeight": "68px"
    },
    "font1000": {
      "fontFamily": "system-ui, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
      "fontSize": "72px",
      "fontWeight": "normal",
      "lineHeight": "96px"
    },
    "font1100": {
      "fontFamily": "system-ui, \"Helvetica Neue\", Helvetica, Arial, sans-serif",
      "fontSize": "96px",
      "fontWeight": "normal",
      "lineHeight": "116px"
    }
  },
  "sizing": {
    "scale0": "2px",
    "scale100": "4px",
    "scale200": "6px",
    "scale300": "8px",
    "scale400": "10px",
    "scale500": "12px",
    "scale550": "14px",
    "scale600": "16px",
    "scale650": "18px",
    "scale700": "20px",
    "scale750": "22px",
    "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": {
      "borderColor": "hsla(0, 0%, 0%, 0.04)",
      "borderStyle": "solid",
      "borderWidth": "1px"
    },
    "border200": {
      "borderColor": "hsla(0, 0%, 0%, 0.08)",
      "borderStyle": "solid",
      "borderWidth": "1px"
    },
    "border300": {
      "borderColor": "hsla(0, 0%, 0%, 0.12)",
      "borderStyle": "solid",
      "borderWidth": "1px"
    },
    "border400": {
      "borderColor": "hsla(0, 0%, 0%, 0.16)",
      "borderStyle": "solid",
      "borderWidth": "1px"
    },
    "border500": {
      "borderColor": "hsla(0, 0%, 0%, 0.2)",
      "borderStyle": "solid",
      "borderWidth": "1px"
    },
    "border600": {
      "borderColor": "hsla(0, 0%, 0%, 0.24)",
      "borderStyle": "solid",
      "borderWidth": "1px"
    },
    "radius100": "2px",
    "radius200": "4px",
    "radius300": "8px",
    "radius400": "12px",
    "useRoundedCorners": true,
    "buttonBorderRadius": "0px",
    "inputBorderRadius": "0px",
    "popoverBorderRadius": "0px",
    "surfaceBorderRadius": "0px"
  },
  "animation": {
    "timing100": "0.25s",
    "timing400": "0.4s",
    "timing700": "0.6s",
    "easeOutCurve": "cubic-bezier(.2, .8, .4, 1)",
    "easeInCurve": "cubic-bezier(.8, .2, .6, 1)",
    "easeInOutCurve": "cubic-bezier(0.4, 0, 0.2, 1)"
  },
  "zIndex": {
    "modal": 2000
  },
  "name": "light-theme"
}

Next steps

Now that you have a solid understanding of Themes in Base Web, it's time to dive into the default theme values.