Theming

Overview

A big part of Motor is its theming framework. There are a lot of things you can customize, which are covered on this page.

The recommended path to creating a new theme, is to pass it to the Motor component.

import { Motor } from '@motor-js/core';
const myTheme = {
  global: {
    color: {
      brand: 'red',
    },
  },
};
<Motor theme={myTheme}>
  //...
</Motor>

This is just an example of using the theme to replace the app's brand color. There are a couple of things you should know:

There is a base theme and the customizations you add will merge with it. As a result, you only need to pass what you need to change, not the entire theme object. These changes will only affect the children of the Motor component.

The library comes with some pre-built themes which you can import and use. See the example below for using the night theme

caution

Additional themes including the night theme are not in the beta release. These are planned ahead of full library release.

import { Motor, night } from '@motor-js/core';
<Motor theme={night}>
  //...
</Motor>

Structure

The structure of the JSON object is divided into three parts: global, charts and each component entry, for example:

const myTheme = {
  global: {
    // changes here will affect more than one component at a time
  },
  filter: {
    // changes here will affect the filter component only
  },
  //...
}

API

This section documents each of the theme entries so that you know what is possible to customize.

info

Please see the relevant component / chart page for those theme API details. This page will document the global theme object.

global

Settings in global object are below. Default values are in the base theme:

e.g. global.backgroundColor = 'brand'

Setting	Description	Options / Example	Component using this theme entry
backgroundColor	background color	string 'white'	Grid
fontFamily	font family	string 'Inter, sans-serif'	ALL
colorTheme	default color theme of the charts	array oneOf "motor" "divergent13" "divergent9" "eco" "bio" "red" "blue" "gray" "pink" "grape" "violet" "indigo" "blue" "cyan" "teal" "green" "lime" "yellow" "orange"	All Charts
border	font family	object { color:'var(--oc-gray-4)', size: '1px', style: 'solid', radius: '8px', }	Box Bar Column Line KPI Pie
deviceBreakpoint	Which size to use depending on the screensize	object { mobile:'small', tablet: 'medium', desktop: 'medium', largeDesktop: 'large', }	ALL
responsiveBreakpoints	screen size breakpoints	object { mobile:'400px', tablet: '640px', desktop: '1024px', }	useScreenSize hook
focus	screen size breakpoints	object { outline: { color:'#212121', size: '5px' } }	Box
size	global.size
font	dashboard font size	object { tiny: '10px', small: '12px', medium: '14px', large: '16px', xlarge: '18px', }	All
subFont	dashboard sub font size	object { tiny: '8px', small: '10px', medium: '12px', large: '14px', xlarge: '16px', }	All
title	chart title size	object { tiny: '14px', small: '16px', medium: '18px', large: '20px', xlarge: '22px', }	All charts
subTitle	chart sub title size	object { tiny: '12px', small: '14px', medium: '16px', large: '18px', xlarge: '20px', }	All charts
tooltip	chart tooltip	object { tiny: '10px', small: '12px', medium: '14px', large: '16px', xlarge: '18px', }	All charts

global.color

Setting	Description	Options / Example	Component using this theme entry
brand	brand color	string '#FF7272'	Any
brandLight	brand light color	string '#FFCCC7'	Any
accent1	accent1 color	string '#007DC3'	Any
accent2	accent2 color	string '#A08CFF'	Any
accent3	accent3 color	string '#f3EED9'	Any
altDark	altDark color	string '#272727'	Any
altGray1	altGray1 color	string 'var(--oc-gray-1)'	Any
altGray2	altGray2 color	string 'var(--oc-gray-2)'	Any
altGray3	altGray3 color	string 'var(--oc-gray-3)'	Any
altGray4	altGray4 color	string 'var(--oc-gray-4)'	Any
altGray5	altGray5 color	string 'var(--oc-gray-5)'	Any
altGray6	altGray6 color	string 'var(--oc-gray-6)'	Any
altGray7	altGray7 color	string 'var(--oc-gray-7)'	Any
altGray8	altGray8 color	string 'var(--oc-gray-8)'	Any
altGray9	altGray9 color	string 'var(--oc-gray-9)'	Any
font	font color	string 'var(--oc-gray-9)'	Any
fontAlt	fontAlt color	string 'var(--oc-gray-7)'	Any
fontLight	fontLight color	string 'var(--oc-gray-2)'	Any
motor	Array of 8 colors, motor color scheme	array ["#003f5c", "#2f4b7c", "#665191", "#a05195", "#d45087", "#f95d6a", "#ff7c43", "#ffa600"]	Any Chart
divergent13	Array of 13 divergent colors	array ["#43aa8b", "#61b98d", "#7ec98f", "#9dd790", "#bce593", "#ddf297", "#ffff9d", "#ffe57d", "#ffc961", "#ffac4d", "#ff8d42", "#ff6b3f", "#f94144"]	Any Chart
divergent9	Array of 9 divergent colors	array ["#43aa8b", "#6fc18e", "#9dd790", "#ccec95", "#ffff9d", "#ffd76e", "#ffac4d", "#ff7c3f", "#f94144"]	Any Chart
eco	Array of 20 colors, eco color scheme	array ["#3366CC", "#DC3912", "#FF9900", "#109618", "#990099", "#3B3EAC", "#0099C6", "#DD4477", "#66AA00", "#B82E2E", "#316395", "#994499", "#22AA99", "#AAAA11", "#6633CC", "#E67300", "#8B0707", "#329262", "#5574A6", "#3B3EAC"]	Any Chart
bio	Array of 24 colors, eco color scheme	array ["#03B8AA", "#374649", "#FD625E", "#F2C80F", "#5F6B6D", "#8ad4eb", "#fe9666", "#a66999", "#3599b8", "#dfbfbf", "#4ac5bb", "#5f6b6d", "#fb8281", "#f4d25a", "#7f898a", "#a4ddee", "#fdab89", "#b687ac", "#28738a", "#a78f8f", "#168980", "#293537", "#bb4a4a", "#b59525", "#475052"]	Any Chart

global.chart

Theme entries for global.chart can be viewed on each Chart documentation page. Changes here will impact all charts on your dashboard