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.

:root {
  --r-common-font-family: cursive;
}

It is recommended to use 小赖字体 / 小賴字體 / シャオライ / Xiaolai Font for CJK (Chinese, Japanese and Korean) characters.

WARNING

Due to the character set, CJK fonts are usually very large. Please learn about 中文网字计划.

<link rel="stylesheet" href="https://chinese-fonts-cdn.deno.dev/packages/xiaolai/dist/Xiaolai/result.css" />

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

INFO

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.

We also recommend using Annotation Mono as a monospaced font for displaying code, etc. For important elements such as titles, you can use Cabin Sketch.

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:

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:

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

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

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)