Theme

Roughness has a built-in set of colors and supports dark and light themes.

Colors

In dark and light mode, in addition to the foreground and background colors, the theme colors are also different. The built-in color themes use One Light and One Dark color schemes.

Enable dark mode

Fonts

You can load one or more fonts of your choice by any means and specify the font name(s) with the custom property.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/cabin-sketch/latin.css">

<style>
:root {
  --r-common-font-family: 'Cabin Sketch', cursive;
}
</style>

INFO

It is recommended to always add cursive or other fallback font at the end of the list, which could be useful for non-Latin (such as CJK) environments, for example browser translation.

Customizing Theme

Most components support specific CSS custom properties. You can find them in the documentation related to components, such as Button Styles.

Generally, components use CSS properties with names in the format --R-* internally, but you should avoid modifying these properties; instead, these properties can be controlled through properties with the same name in lowercase:

/* Render thicker borders for all buttons */
:root {
  --r-button-border-width: 2px;
}

Styles

All elements with r-* classes support the following style variables:

Name	Type	Default Value	Description
--r-element-font-family	<family-name>+	var(--r-common-font-family)	Font family of the element.
--r-element-font-size	<length>	var(--r-common-font-size)	Font size of the element.
--r-element-line-height	<number> | <length> | <percentage> | normal	var(--r-common-line-height)	Line height of the element.

These are only valid for Roughness elements. If you want it to take effect for the entire page, you can define the following styles:

body {
  font-family: var(--r-element-font-family);
  font-size: var(--r-element-font-size);
  line-height: var(--r-element-line-height);
}

The following properties (of colors) are effective for the text content:

Name	Type	Default Value	Description
--r-element-color	<color>	var(--r-common-color)	Color of the element. Usually it will be changed by the type property of components. See also Color Styles.

Common style properties are declared under the root node. Changing them will affect all components.

Name	Type	Default Value	Description
--r-common-font-family	<family-name>+	cursive	Font family of components.
--r-common-font-size	<length>	16px	Font size of components.
--r-common-small-font-size	<length>	calc(var(--r-common-font-size) - 4px)	Font size of components with size="small". Some browsers (such as Chrome on PC devices) have a minimum font size (12px) by default. In these environments, the font size cannot be lowered below that value.
--r-common-large-font-size	<length>	calc(var(--r-common-font-size) + 4px)	Font size of components with size="large".
--r-common-line-height	<number> | <length> | <percentage> | normal	calc(1em + 8px)	Line height of components.
--r-common-box-padding-block	<'padding-top'>	0.5em	Vertical padding of components with rectangular boxes. Such as Button, or cells of Table.
--r-common-box-padding-inline	<'padding-top'>	calc(1em + 4px)	Horizontal padding of components with rectangular boxes. Such as Button, or cells of Table.
--r-common-overlay-z-index	<integer>	2	Z-order of components at the top of the page. Such as Propover, or dropdown of Select.

The following properties (of colors) change with dark/light theme changes:

Name	Type	Default Value	Description
--r-common-color	<color>	#abb2bf in the dark mode, #383a42 else	Color of foreground content such as text and borders. This is only valid for Roughness components. If you want it to take effect for the entire page, you can define the following styles: body { color: var(--r-common-color); }
--r-common-background-color	<color>	#282c34 in the dark mode, #fafafa else	Color of background content such as backdrop and text stroke. This is only valid for Roughness components. If you want it to take effect for the entire page, you can define the following styles: body { background-color: var(--r-common-background-color); }
--r-common-primary-color	<color>	#61aff0 in the dark mode, #4078f2 else	Color of the key content on the page. Components with type="primary" use this color.
--r-common-info-color	<color>	#56b6c2 in the dark mode, #0184bc else	Color of auxiliary information on the page. Components with type="info" use this color.
--r-common-success-color	<color>	#98c379 in the dark mode, #50a14f else	Color of success message. Components with type="success" use this color.
--r-common-warning-color	<color>	#e5c07b in the dark mode, #c18401 else	Color of warning message. Components with type="warning" use this color.
--r-common-error-color	<color>	#be5046 in the dark mode, #ca1243 else	Color of error message. Components with type="error" use this color.
--r-common-comment-color	<color>	#abb2bf80 in the dark mode, #383a4280 else	Color of comment message. Components with type="comment" use this color.

Dark Mode

When the document's root element (usually html) has a class of dark, components will automatically switch to dark mode.

We also provide useDark function to control dark mode through script:

import { useDark } from 'roughness'

const dark = useDark()

// Toggle dark mode
dark.value = !dark.value

Theming Custom Components

Sometimes you may want customize styles with the theme colors of Roughness components. You can use the Roughness common style properties via CSS var():

.my-element {
  color: var(--r-common-primary-color);
}

For situations where CSS cannot be used, such as canvas, you can use useColors to get the colors in current common properties:

import { useColors } from 'roughness'

const colors = useColors()

const context = canvas.getContext('2d')
context.stroke = colors.value.primaryColor

Alternatively, you can directly use colors from light or dark theme:

import { darkColors, lightColors } from 'roughness'

const context = canvas.getContext('2d')
context.stroke = mix(lightColors.primaryColor, darkColors.primaryColor, 0.5)