NewsKit Mobile Logo

Using Themes

Overview

To render NewsKit components you must have a theme available for them to utilise. You can use your own theme, or use one of the two NewsKit defaults - NewsKit light and NewsKit dark. Details on how to create your theme can be found here.

Setting a theme

ThemeProvider component

A ThemeProvider utilises a React Context to provide a theme to all NewsKit components descended under it. You pass your theme (or a NewsKit default) to the theme prop. This will typically be an uncompiled theme, but you can pass a pre-compiled theme if you wish.

The theme provided is then available to any NewsKit component under it. The theme is also used by any custom styled components created using the styled function exported from NewsKit.

ThemeProvider's can also be nested - allowing the child to override the parent theme. This will only cause a shallow merge of the child theme over the parent. To create a sub-theme which inherits from a base theme, see the createTheme documentation here.

Reading a theme

As the example shows above, reading from a theme inside a styled component works as you would expect from Emotion. However, if you wish to read from the theme outside of a styled component, you have two options - a higher-order component and a React hook.

withTheme higher-order component

By wrapping your component in withTheme, the theme object will be passed into your component as a prop.

useTheme hook

The useTheme hook also allows you to access the theme, but helps avoid the extra "wrapper hell" that higher-order components bring.