Theming#

Global theming#

Bumbag can be extensively themed to meet your requirements. You can either override the default Bumbag theme or create your own custom theme from scratch. If you like the default theme and want to keep it simple, we recommend you just override the default.

Overriding the default global theme (recommended)#

The <ThemeProvider> component accepts theme as a prop, where you can specify overrides to the default Bumbag theme. The schema of the theme object can be seen here.

import { Provider as BumbagProvider, css } from 'bumbag';
const theme = {
  global: {
    fontSize: 18,
    styles: {
      base: css`
        html,
        body {
          background-color: hotpink;
          color: white;
        }
      `
    }
  },
  fonts: {
    default: 'Comic Sans MS'
  },
  palette: {
    primary: 'blue'
  },
  breakpoints: {
    mobile: 520,
    tablet: 960
  },
  Button: {
    defaultProps: {
      palette: 'primary'
    }
  },
  Heading: {
    styles: {
      base: {
        color: 'primary'
      }
    }
  }
}
const App = () => (
  <BumbagProvider theme={theme}>
    // ... your app
  </BumbagProvider>
);

Creating your own global theme (advanced)#

If you decide to not use the default Bumbag theme and roll out your own, just add the isStandalone flag to <ThemeProvider>.

import { Provider as BumbagProvider, defaultTheme } from 'bumbag';
const App = () => (
  <BumbagProvider isStandalone theme={defaultTheme()}>
    // ... your app
  </BumbagProvider>
);

Component theming#

Bumbag also allows you to define themes on a component level. This can be done in three ways:

Globally themed: Applying the component to the global theme.
Locally themed: Creating a themed component via the applyTheme function.
Locally themed: Applying the component theme via the overrides prop on the component.

Each component theme configuration always consists of 4 attributes:

styles - Where the main styling is defined for the component.
variants - Where the component variants are defined.
modes - Where the component color modes are defined.
defaultProps - The default props to apply to the component.

For each docs page of the component, you will find a Theming section where you can reference the schema of the component theme configuration.

Applying the component to the global theme#

import { Provider as BumbagProvider, css } from 'bumbag';
const theme = {
  Button: {
    styles: {
      base: {
        color: 'black',
        // Here we are using "spacing" values from the theme.
        // But you can specify a `px`, `rem` or `em` value too.
        padding: 'major-2'
      }
    },
    variants: {
      'call-to-action': {
        fontSize: '300',
        padding: 'major-4'
      }
    },
    modes: {
      dark: {
        color: 'white'
      }
    },
    defaultProps: {
      palette: 'primary'
    }
  }
}
const App = () => (
  <BumbagProvider theme={theme}>
    // ... your app
  </BumbagProvider>
);

Creating a themed component#

You can apply the theme on a component level via the applyTheme utility function. This function accepts two parameters: the first being the component, and the second being the component theme config.

import { applyTheme } from 'bumbag';

Welcome to Bumbag!

Editable example

const Card = applyTheme(Box, {
  styles: {
    base: {
      // Here we are using "spacing" values from the theme.
      // But you can specify a `px`, `rem` or `em` value too.
      padding: 'major-2'
    }
  },
  defaultProps: {
    altitude: '100'
  },
  variants: {
    dope: {
      defaultProps: {
        fontFamily: 'Comic Sans MS'
      }
    }
  }
})

function Example() {
  return (
    <Card variant="dope">
      Welcome to Bumbag!
    </Card>
  )
}

render(Example)

const Card = applyTheme(Box, {
  styles: {
    base: {
      // Here we are using "spacing" values from the theme.
      // But you can specify a `px`, `rem` or `em` value too.
      padding: 'major-2'
    }
  },
  defaultProps: {
    altitude: '100'
  },
  variants: {
    dope: {
      defaultProps: {
        fontFamily: 'Comic Sans MS'
      }
    }
  }
})

function Example() {
  return (
    <Card variant="dope">
      Welcome to Bumbag!
    </Card>
  )
}

render(Example)

Using the `overrides` prop#

It is possible to override the global theme on the component themselves using the override prop on any component.