Theme vs Custom Components
The theme only allows making cosmetic changes to the native components provided by Treble. For more control of components and editing their designs, its strongly recommended you use the Custom Components available in
src/componentsinstead.
Overview
The Treble app comes with a default theme (more themes coming in the future), that can be easily modified for any project's needs.
Theme is a list of CSS styles that are applied throughout the Treble components as a way to create a consistent styled and branded experience for the user. These styles include elements such as the color to use when highlighting/showing the selected state of an object, to the font size, color and typography.
Theme Object
| Property | Description | Type | Default |
|---|---|---|---|
| primaryColor | The primary accent color used for all the selection and hover states for the UI. | string | #1890ff |
| linkColor | The color to render out <a> tag links. | string | #1890ff |
| successColor | The color used for success messaging. | string | #1890ff |
| warningColor | The color used for warning messaging. | string | #faad14 |
| errorColor | The color used for error messaging. | string | #f5222d |
| fontBaseSize | The font-size for regular text. | string | 14px |
| headingColor | The color used any heading in an <h> tag. | string | rgba(0, 0, 0, 0.85) |
| textColor | The color used for regular text. | string | rgba(0, 0, 0, 0.65) |
| textColorSecondary | The color used for secondary text. | string | rgba(0, 0, 0, 0.45) |
| disabledColor | The color used for indicating an option is disabled. | string | rgba(0, 0, 0, 0.25) |
| borderRadius | The border-radius applied to all elements with a border-radius. | string | 2px |
| borderColorBase | The color used for all borders. | string | #d9d9d9 |
| boxShadowBase | The color used for shadows on an element. | string | 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05) |
| widgetSize | The diameter of widget buttons used on the Player. | string | 36px |
| fontFamily | The font to be used across the Treble App. | string | "Open Sans", sans-serif |
Customizing the theme
To update any of the theme's values you just have to pass in the value you want to use into the theme object in the ThreekitProvider's props.
For example, if I want to change the primary color to a shade of green with the HEX value #25c2a0, I could do this in the following way:
import React from 'react';
import { ThreekitProvider } from '@threekit-tools/treble';
import App from './app';
const theme = {
primaryColor: '#25c2a0',
};
ReactDOM.render(
<ThreekitProvider theme={theme}>
<App />
</ThreekitProvider>,
document.getElementById('root')
);
Code Examples
The default values for the theme are:
const theme = {
primaryColor: '#1890ff',
linkColor: '#1890ff',
successColor: '#52c41a',
warningColor: '#faad14',
errorColor: '#f5222d',
fontBaseSize: '14px',
headingColor: 'rgba(0, 0, 0, 0.85)',
textColor: 'rgba(0, 0, 0, 0.65)',
textColorSecondary: 'rgba(0, 0, 0, 0.45)',
disabledColor: 'rgba(0, 0, 0, 0.25)',
borderRadius: '2px',
borderColorBase: '#d9d9d9',
boxShadowBase:
'0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05)',
widgetSize: '36px',
fontFamily: '"Open Sans", sans-serif',
};