Theming

Ricos is stylable, which means you can apply color schemes & font properties to your Ricos UI.

The theming API provides an ability to customize the style of your plugins, toolbars, and content with ease and consistency.

theme?: {

palette?: PaletteColors | PalettePreset;

paletteConfig?: PaletteConfig;

customStyles?: RicosCustomStyles;

settingsStyles?: RicosSettingsStyles;

parentClass?: string;

}

Colors

The color mechanics of Ricos manifest in almost every element that's displayed.

The structure here is based on 3 color properties (aka Palette):

• Text Color
• Action Color
• Background Color

Check this Theme Playground to understand the influence of each color on plugins, toolbars and modals.

You can also modify colors of specific elements (like text headers / links). See Custom Styles API below.

Palette

const palette = {

bgColor: '#0E092B', // Please read note down below

textColor: '#FFFFFF',

actionColor: '#D6FF00',

};

// ...

<RicosEditor theme={{ palette }} plugins={[pluginHashtag()]} />;

This is a #hashtag, see it has a unique color.

note

bgColor will not set a background-color for Ricos' content by default. Please read the contentBgColor under PaletteConfig section below.

Palette can receive few more optional fields:

fallbackColor

When ActionColor is too bright, it is replaced with FallbackColor when used on bright backgrounds (e.g modals, toolbars). Therefore this color should remain relatively dark. Default is black.

textColorLow

Work in progress

disabledColor

Work in progress

Palette Presets

Pick a palette preset by name. Currently supports 'darkTheme' only.

<RicosEditor theme={{ palette: 'darkTheme' }} />

PaletteConfig

contentBgColor

If set to true, Ricos' internal content container would be colored with bgColor.

Ricos' background color is transparent by default.

The recommended practice of changing the background is to wrap Ricos with your own container, set with your own background.

However, in case you want to change the content background, you should pass contentBgColor: true

Default value: false.

settingsActionColor

Override the actionColor of floating panels & settings modals. Default is actionColor.

note

Only applicable for RicosEditor

focusActionColor

Override the actionColor of plugin when focused / clicked Default is actionColor.

note

Only applicable for RicosEditor

Custom Styles

customStyles?: RicosCustomStyles

Ricos allows you to customize several font and color properties of the content. The font-family of a text content within Ricos is inherited from that component's wrapper, while other typography properties like font-size are defined within Ricos. These properties can be overridden via customStyles: See here RicosCustomStyles type declaration

const customStyles: RicosCustomStyles = {

h2: {

fontFamily: 'Times',

fontSize: '26px',

color: 'orange',

fontStyle: 'italic',

textDecoration: 'underline',

},

h3: {

fontFamily: 'Tahoma',

fontSize: '20px',

color: 'purple',

textDecoration: 'none',

},

quote: {

lineHeight: '24px',

fontWeight: 'bold',

color: 'brown',

},

button: { color: 'purple' },

footerToolbar: { marginTop: '120px' },

editor: { minHeight: '200px', maxHeight: '200px'},

};

// Example 1

<RicosEditor theme={{ customStyles }} />;

// Example 2

<RicosEditor />;

This is Header 2

This is Header 3

This is a paragraph

This is a quote

This is Header 2

This is Header 3

This is a paragraph

This is a quote

API

h1, h2, h3, h4, h5, h6, p, link, hashtag:

{

fontSize,

fontFamily,

fontWeight,

fontStyle,

textDecoration,

lineHeight,

minHeight,

color,

}

quote:

{

fontSize,

fontFamily,

fontWeight,

fontStyle,

textDecoration,

lineHeight,

minHeight,

color,

borderColor, // for its indented quote border effect

borderWidth,

paddingTop,

paddingBottom,

paddingInlineStart,

}

button:

{

color,

}

footerToolbar:

{

marginTop,

}

mention:

{

backgroundColor,

color,

}

codeBlock:

{

fontSize,

lineHeight,

margin,

padding,

}

editor:

{

minHeight,

maxHeight,

}

Settings Styles

The editor panels' styles can be modified according to your choice.

const settingsStyles: RicosSettingsStyles = {

buttons: {

borderRadius: '18px',

textColor: '#FFFFFF',

},

dividers: {

color: '#DFE5EB',

},

icons: {

color: '#32536A',

},

inputs: {

borderColor: '#C1E4FE',

borderRadius: '6px',

placeholderColor: '#7A92A5',

},

text: {

color: '#32536A',

fontFamily: 'Madefor',

},

whitebox: {

borderRadius: '8px',

boxShadow: '0 8px 8px 0 rgba(22, 45, 61, 0.12), 0 3px 24px 0 rgba(22, 45, 61, 0.18)',

},

};

// Example 1

<RicosEditor theme={{ settingsStyles }} />;

parentClass

If you plan to apply different palettes to multiple instances of Ricos, which would be living next to each other (like on this page, for example), you will need to specify parentClass. Otherwise, you can safely ignore it.

parentClass should refer to a parent's CSS className that contains your Ricos instance. With it defined, dynamic styles will be wrapped under ".parentClass", which will increase CSS specificity.

const darkOne = { bgColor: '#224455', textColor: '#FFFFFF', actionColor: '#FF66F5' };

const darkTwo = { bgColor: '#1C191C', textColor: '#D2CDD2', actionColor: '#FE6148' };

//...

<div className='card1'>

<RicosEditor theme={{ parentClass: 'card1', palette: darkOne }} />

</div>

<div className='card2'>

<RicosEditor theme={{ parentClass: 'card2', palette: darkTwo }} />

</div>

this is #palette example 1

this is #palette example 2