Out-of-the-box components
Remarkable Pro
Theming

Getting started with theming

The theme is where you shape Remarkable Pro.

It lives in your repo, inside embeddable.theme.ts and is your control panel for branding, styling, internationalisation, and the global options that power your analytics experience.

You can create multiple themes and switch between them. Many teams use:

  • a light and dark mode.
  • separate themes for demos or internal environments.
  • a dedicated theme per customer.

Example theme

 
//embeddable.theme.ts
 
const themeProvider = (clientContext: any, parentTheme: Theme): Theme => {
 
    return defineTheme(parentTheme, {
        charts: {
            backgroundColors: [
                'rgb(75 134 255)',
                'rgb(255 99 132)',
                'rgb(255 205 86)',
                'rgb(54 162 235)',
                'rgb(153 102 255)',
                'rgb(255 159 64)',
            ],
        },
        styles: {
            '--em-background-color-default': 'rgb(196 49 196)',
            '--em-foreground-color-default': 'rgb(0 181 60)',
        },
    });
 
};
 
export default themeProvider;

Things to notice

  • While Remarkable’s theme has its own shape, the mechanics of theming (e.g. themeProvider and the defineTheme helper) come from Embeddable’s overall theming system.
  • Remarkable ships with a full set of defaults. That’s why the theme uses defineTheme(parentTheme, newTheme) - it merges your overrides with the built-in parent theme, giving you a clean way to extend only what you need.
  • You can pass dynamic values via to your theme at run-time via Client Context (e.g. client-specific colors, or the name of a theme to apply), as well as create presets for testing in the builder. Learn more here.
  • The themeProvider has one job: take the incoming client context and decide which values to apply to the theme.

Where to start

The best place to start is to define your brand colors. These will be used inside all your charts.

🎨Define your chart colors→

Theming vs Builder Customizations

Remarkable Pro components come with a large set of functional options that are configured in the Builder, not in your theme. Understanding this split makes theming much clearer:

  • Theme → generally, the global appearance, branding, localisation, and logic.
  • Builder → generally, the configuration for a specific chart on one of your dashboards.

In the Builder, you control things like:

  • which data to display.
  • whether to show legends, tooltips, and other UI elements.
  • the max number of categories for grouped charts.
  • formatting rules (prefix, suffix, currency, rounding, abbreviations, date granularity, etc.)

In the theme, you control things like:

  • global styling for the entire dashboard.
  • the options available across components, and how they’re calculated (e.g. export options, date-range presets, comparison ranges).
  • translations and locale-aware formatting.
  • chart-specific overrides and fine-grained component styling.

Together, the Theme and the Builder let you customise how your analytics both look and behave.

IntroductionChart colors