Theme Configuration

Customize Styles

AutoQL allows you to customize styles to satisfy your brand requirements, including light and dark themes, background colours, chart colours, font styles, and more.

The full list of customizable styles are as follows:

Key	Type	Default Value
theme	String: 'light' \|\| 'dark'	'light'
accentColor	String	'#26A7E9'
chartColors	Array	['#26A7E9', '#A5CD39', '#DD6A6A', '#FFA700', '#00C1B2']
backgroundColorPrimary	String	'#F1F3F5'
backgroundColorSecondary	String	' #FFFFFF'
fontFamily	String	'sans-serif'
textColor	String	'#4F4F4F'
accentTextColor	String	'#FFFFFF'

theme: Currently there are two options: light theme and dark theme. In addition to changing the overall theme, you can also change the rest of the theme parameters in this list.

accentColor: Primary accent color used for buttons, link, or hover effects. Note that the visualization (table and chart) colors will not be affected here.

chartColors: Array of color options for the chart visualization themes, starting with the most primary. You can pass any valid CSS color format in here, however it is recommended that the color is opaque (ex. "#26A7E9", "rgb(111, 227, 142)", or "red"). Charts will always apply the colors in order from first to last. If the visualization requires more colors than provided, all colors will be used and then repeated in the same order.

backgroundColorPrimary: The background color of the furthest back element. This includes the background of a Dashboard and the main background inside Data Messenger.

backgroundColorSecondary: The background color of elements that lay on top of the main background. This includes message bubbles in Data Messenger, Dashboard TIles, Modals, etc.

textColor: The main text color for both primary and secondary background colors.

accentTextColor: The text color used when the background color is the accent color. This value is dynamically calculated based on the contrast of the text color and the accent color, but if it needs further customization, you can set it here.

fontFamily: Customize the font family to the provided font wherever possible. Accepts any CSS font family that is available, and if none is provided, will default to Sans-Serif.

Default Themes

There are 2 default themes: light and dark. The default values for each theme are as follows:

// theme === 'light'
const defaultThemeLight = {
  chartColors: ['#26A7E9', '#A5CD39', '#DD6A6A', '#FFA700', '#00C1B2'],
  accentColor: '#26A7E9',
  fontFamily: 'sans-serif',
  textColor: '#4F4F4F',
  accentTextColor: '#FFFFFF',
  backgroundColorPrimary: '#F1F3F5',
  backgroundColorSecondary: '#FFFFFF',
}

// theme === 'dark'
const defaultThemeDark = {
  chartColors: ['#26A7E9', '#A5CD39', '#DD6A6A', '#FFA700', '#00C1B2'],
  accentColor: '#193A48',
  fontFamily: 'sans-serif',
  textColor: '#ECECEC',
  accentTextColor: '#FFFFFF',
  backgroundColorPrimary: '#20252A',
  backgroundColorSecondary: '#3B3F46',
}

Configure the Theme

To set the custom theme parameters simply import the configureTheme function, and call it whenever you want to update the theme. This function will update the styles in real time using global css variables.

import React from 'react'
import ReactDOM from 'react-dom'
import { configureTheme } from 'react-autoql'
import { App } from './App'

// Set AutoQL Theme
configureTheme({
	theme: 'dark',
 	chart_colors: ['#C1A5A9', '#F08CAE', '#9A4C95', '#4D2D52', '#1D1A31'],
})

ReactDOM.render(
  <App />,
  document.getElementById('root'),
)

If you want to change the theme any time, just call this function with the new theme parameters.