Home

Theming & Styles

All Signatu React components have support for theming, allowing you to style the components using your own colors and typography. Under the hood we use react-jss to dynamically create CSS classes and inject them into the DOM.

For this to work the Signatu components must be contained in a ThemeProvider that will inject the theme onto the components. Use the provided createTheme function to create your theme. For example:

import {
ThemeProvider,
createTheme
} from '@signatu/common-react';
const myTheme = createTheme({
typography: {
fontFamily: "Open Sans",
fontWeight: 300,
title: {
fontFamily: "Lato",
fontWeight: 600
},
subtitle: {
fontFamily: "Lato",
fontWeight: 400
}
},
palette: {
text: {
main: "#444"
},
primary: {
main: "#0b3297",
contrastText: "#fff"
},
secondary: {
main: "#15bad2",
contrastText: "#fff"
}
}
})
const MyComponent = props => (
<ThemeProvider theme={myTheme}>
<ConsentButton />
</ThemeProvider>
)

Supported theme settings

The most relevant theming options for the consent components are:

  • palette.primary.main: the primary color used as background for e.g., default buttons, cookie banner.
  • palette.secondary.main: the secondary color used in combination with the primary color.
  • palette.balanced.main: the color used for affermative actions, e.g., giving consent.
  • palette.attention.main: the color used for decline actions, e.g., refusing consent.
  • typography.fontFamily: the default font.
  • typography.fontWeight: the default font weight.
  • typography.fontSize: the default font size.
  • typography.button.*: the button typography. Set font, colors and other CSS properties here (e.g., fontSize, textTransform, background, etc).
  • typography.title.*: the title typography. Set font and colors here (e.g., fontSize, color, background).
  • typography.subtitle.*: the title typography. Set font and colors here (e.g., fontSize, color, background).

Note that you can either use camelCase (e.g., fontSize) or regular HTML names in quotes (e.g., 'font-size') for the HTML properties.