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'

SettingDescriptionOptions / ExampleComponent using this theme entry
backgroundColorbackground colorstring
'white'
Grid
fontFamilyfont familystring
'Inter, sans-serif'
ALL
colorThemedefault color theme of the chartsarray
oneOf
"motor"
"divergent13"
"divergent9"
"eco"
"bio"
"red"
"blue"
"gray"
"pink"
"grape"
"violet"
"indigo"
"blue"
"cyan"
"teal"
"green"
"lime"
"yellow"
"orange"
All Charts
borderfont familyobject
{
color:'var(--oc-gray-4)',
size: '1px',
style: 'solid',
radius: '8px',
}
Box
Bar
Column
Line
KPI
Pie
deviceBreakpointWhich size to use depending on the screensizeobject
{
mobile:'small',
tablet: 'medium',
desktop: 'medium',
largeDesktop: 'large',
}
ALL
responsiveBreakpointsscreen size breakpointsobject
{
mobile:'400px',
tablet: '640px',
desktop: '1024px',
}
useScreenSize hook
focusscreen size breakpointsobject
{
outline: {
color:'#212121',
size: '5px' }
}
Box
sizeglobal.size
fontdashboard font sizeobject
{
tiny: '10px',
small: '12px',
medium: '14px',
large: '16px',
xlarge: '18px',
}
All
subFontdashboard sub font sizeobject
{
tiny: '8px',
small: '10px',
medium: '12px',
large: '14px',
xlarge: '16px',
}
All
titlechart title sizeobject
{
tiny: '14px',
small: '16px',
medium: '18px',
large: '20px',
xlarge: '22px',
}
All charts
subTitlechart sub title sizeobject
{
tiny: '12px',
small: '14px',
medium: '16px',
large: '18px',
xlarge: '20px',
}
All charts
tooltipchart tooltipobject
{
tiny: '10px',
small: '12px',
medium: '14px',
large: '16px',
xlarge: '18px',
}
All charts

global.color

SettingDescriptionOptions / ExampleComponent using this theme entry
brandbrand colorstring
'#FF7272'
Any
brandLightbrand light colorstring
'#FFCCC7'
Any
accent1accent1 colorstring
'#007DC3'
Any
accent2accent2 colorstring
'#A08CFF'
Any
accent3accent3 colorstring
'#f3EED9'
Any
altDarkaltDark colorstring
'#272727'
Any
altGray1altGray1 colorstring
'var(--oc-gray-1)'
Any
altGray2altGray2 colorstring
'var(--oc-gray-2)'
Any
altGray3altGray3 colorstring
'var(--oc-gray-3)'
Any
altGray4altGray4 colorstring
'var(--oc-gray-4)'
Any
altGray5altGray5 colorstring
'var(--oc-gray-5)'
Any
altGray6altGray6 colorstring
'var(--oc-gray-6)'
Any
altGray7altGray7 colorstring
'var(--oc-gray-7)'
Any
altGray8altGray8 colorstring
'var(--oc-gray-8)'
Any
altGray9altGray9 colorstring
'var(--oc-gray-9)'
Any
fontfont colorstring
'var(--oc-gray-9)'
Any
fontAltfontAlt colorstring
'var(--oc-gray-7)'
Any
fontLightfontLight colorstring
'var(--oc-gray-2)'
Any
motorArray of 8 colors, motor color schemearray
["#003f5c", "#2f4b7c", "#665191", "#a05195", "#d45087", "#f95d6a", "#ff7c43", "#ffa600"]
Any Chart
divergent13Array of 13 divergent colorsarray
["#43aa8b", "#61b98d", "#7ec98f", "#9dd790", "#bce593", "#ddf297", "#ffff9d", "#ffe57d", "#ffc961", "#ffac4d", "#ff8d42", "#ff6b3f", "#f94144"]
Any Chart
divergent9Array of 9 divergent colorsarray
["#43aa8b", "#6fc18e", "#9dd790", "#ccec95", "#ffff9d", "#ffd76e", "#ffac4d", "#ff7c3f", "#f94144"]
Any Chart
ecoArray of 20 colors, eco color schemearray
["#3366CC", "#DC3912", "#FF9900", "#109618", "#990099", "#3B3EAC", "#0099C6", "#DD4477", "#66AA00", "#B82E2E", "#316395", "#994499", "#22AA99", "#AAAA11", "#6633CC", "#E67300", "#8B0707", "#329262", "#5574A6", "#3B3EAC"]
Any Chart
bioArray of 24 colors, eco color schemearray
["#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