5.2 Theming

BlueBase was built from the ground up with theming in mind. It is an extensive topic and we encourage you to read the Themes section of the docs.

Just to see a bit of a demo, we will customise the styles of our custom component from app configurations.

You remember creating the ToDoAppIcon component in Chapter 1.3:

src/components/ToDoAppIcon/ToDoAppIcon.tsx

import { DynamicIcon, View } from '@bluebase/components';
import { useStyles, useTheme } from '@bluebase/core';
import React from 'react';
import { TextStyle, ViewStyle } from 'react-native';

export interface ToDoAppIconStyles {
	iconColor: { color: TextStyle['color'] };
	root: ViewStyle;
}

export interface ToDoAppIconProps {
	size: number;
	styles?: Partial<ToDoAppIconStyles>;
}

export const ToDoAppIcon = (props: ToDoAppIconProps) => {
	const { size } = props;
	const { theme } = useTheme();

	const styles: ToDoAppIconStyles = useStyles('ToDoAppIcon', props, {
		iconColor: {
			color: theme.palette.error.contrastText,
		},
		root: {
			backgroundColor: theme.palette.error.main,
			borderRadius: theme.shape.borderRadius * 3,
			alignItems: 'center',
			justifyContent: 'center',
			height: size,
			width: size,
		},
	});

	return (
		<View style={styles.root}>
			<DynamicIcon
				type="icon"
				name="checkbox-multiple-marked-outline"
				color={styles.iconColor.color}
				size={size * 0.75}
			/>
		</View>
	);
};

ToDoAppIcon.defaultProps = {
	size: 100,
};

Explanation:

• Line 2: We import 2 hooks from BlueBase core: useStyles and useTheme.

• Line 6: We define the interface of the stylesheet for the component.

• Line 13: Add the styles property as an optional prop.

• Line 18: We access the currently active theme from the useTheme hook.

• Line 20: Extract the final styles from the useStyles hook. This hook takes 3 params:

  1. Name of the component. We can use this name in our themes to override the styles of this component.

  2. Input props of the component. These may contain the styles prop, as well as any other prop that is needed. Note that these props are also passed on to the defaultStyles prop if it's a function.

  3. The default styles. These are the base styles that may be overwritten by theme overrides. This param may be an object (of the interface defined at Line 6), or a function that returns this object.

• Line 35 & 39: We use the styles in our component.

Customize Component Styles

Let's see how we can customize the appearance of this component from our app configs.

Create a prop in the configs by key theme.overrides. The value of this property is a theme object. Here you can override a theme's styles.

In the example below, we are basically telling BlueBase to override the styles of the ToDoAppIcon component in light mode.

export const configs = {

	// ... Other Configs

	'theme.overrides': {
		light: {
			components: {
				ToDoAppIcon: {
					root: {
						backgroundColor: '#6750A4',
					}
				}
			}
		}
	}
};

Note that the value of configs['theme.overrides'].light.components.ToDoAppIcon is an object that matches the ToDoAppIconStyles interface.

Now when you run your app, you will notice the app icon color is purple in light mode, and not red.

Without Customization

With Customization