Palette

Overview

This document describes the mechanism for customizing the application using color palettes. The application allows setting your own color palette through the palette dependency. This enables you to adjust the appearance of the component for different color schemes.

Introduction

The ChartReactApp application supports customization of the color palette through a specialized property called palette, which should be passed in the dependencies. This property allows users to override the default colors. Custom color palettes for dark and light themes are set through the palette variable, which contains two nested structures: dark and light. Each represents an object with specific color properties.

Palette Definition Example

The palette objects support all common color models: hex, rgb/rgba, hsl/hsla, default strings ('green', 'yellow', etc...), but the most native for chart is rgba, so it's recommended to use it if possible

export interface ChartAppPalette {
	light: {
		object: ChartPaletteLight;
	};
	dark: {
		object: ChartPaletteDark;
	};
}

export type ChartPaletteLight = typeof DEFAULT_CHART_PALETTE_LIGHT;
export const DEFAULT_CHART_PALETTE_LIGHT = {
	'main_chart-bg': 'rgba(255,255,255,1)',
	'button-border-bg': 'rgba(229,229,229,1)',
	'button-buy-default-bg': 'rgba(210,231,212,1)',
	'button-buy-default-color': 'rgba(107,175,113,1)',
	'button-buy-hovered-bg': 'rgba(232,241,233,1)',
	'button-focus-border': 'rgba(255,91,36,1)',
	// other properties...
};
export type ChartPaletteDark = typeof DEFAULT_CHART_PALETTE_DARK;
export const DEFAULT_CHART_PALETTE_DARK = {
	'main_chart-bg': 'rgba(0,0,0,1)',
	'button-border-bg': 'rgba(40,40,40,1)',
	'button-buy-default-bg': 'rgba(31,47,33,1)',
	'button-buy-default-color': 'rgba(77,153,83,1)',
	'button-buy-hovered-bg': 'rgba(43,73,45,1)',
	'button-focus-border': 'rgba(255,170,0,1)',
	// other properties...
};

Selective Color Overriding

You can also override individual colors rather than replacing the entire palette. This provides more flexibility, allowing you to customize specific parts of the application without having to define all color properties.

Code Example: Overriding Individual Colors

import React, { memo } from 'react';
import { ChartReactApp } from '@dx-private/dxchart5-react/dist/chart/chart-react-app';
import { CREATE_MOCK_PROVIDERS } from '@dx-private/dxchart5-react-mock-providers/dist';

export const Container = memo(props => {
	const deps = {
		...CREATE_MOCK_PROVIDERS(),
		palette: {
			dark: {
				object: { 'main_chart-bg': 'blue', 'button-border-bg': 'green' },
			},
			light: {
				object: { 'main_chart-bg': 'red', 'button-border-bg': 'yellow' },
			},
		},
	};
	return <ChartReactApp dependencies={deps} />;
});

Conclusion

By using the palette dependency, you can flexibly change the interface colors for both dark and light themes, allowing you to adapt the appearance of the application to specific needs and user preferences. Additionally, you can override individual colors instead of the entire palette, giving you finer control over the appearance of your components.

To see the full possibilities of coloring, please check out the Theme Builder.

Overview​

Introduction​

Palette Definition Example​

Selective Color Overriding​

Code Example: Overriding Individual Colors​

Conclusion​