Themes & styles

There are two ways to control the look and feel of a spreadsheet: themes and styles.

Themes are controlled by the web page. They use CSS to change things like the background color, text color, and color of the toolbar buttons. Styles are applied to individual cells in a spreadsheet. They’re controlled by the spreadsheet itself.

When to use styles

Styles includes things like bold or italic text, and center-aligned cells. Those are almost always part of the spreadsheet itself. As a general rule, if you want one cell to look different from other cells, you would use styles.

Styles are usually set with keyboard shortcuts (like Ctrl+B/Cmd+B for bold) or using the spreadsheet toolbar. You can also set styles using the API.

When to use themes

Themes are defined by the web page that includes the spreadsheet. So they usually are designed to match a particular page look and feel. This might include specific fonts or colors, plus (like on this page) separate themes for light and dark mode.

Default themes

There are three default themes included with TREB: light, dark, and a theme that switches light/dark based on browser preference.

The light theme is the default so you don’t have to do anything to use it. To use the dark theme, add the class treb-dark-theme to your spreadsheet node (or any parent node).

To use the light/dark theme, add the class treb-light-dark-theme to your spreadsheet node (or parent node). Note that the light/dark theme only reflects browser preferences — so it won’t be useful if (like on this website) the page offers the option to switch manually.

Updating themes

Themes are written in CSS (almost entirely using CSS variables). However the spreadsheet is painted, not rendered. We read the CSS styles. That means if you make changes to CSS, they won’t be immediately reflected in the spreadsheet.

Any time you make changes to the theme CSS, you must call UpdateTheme on the spreadsheet to ensure it gets updated.

Fonts

It’s possible to set fonts in styles, but it’s usually better to leave fonts to themes (defined by the web page). That helps spreadsheets better fit in with the rest of the web page. Also it’s possible to use different fonts (and even different font sizes) on different platforms.

Web fonts

You can use web fonts.

This is Caveat from Google fonts.

You should make sure that the font is loaded before the spreadsheet is created, otherwise it will start with a fallback font. If the font loads after the spreadsheet is created you can refresh it by calling UpdateTheme.

Theme colors

One way themes and styles interact is with theme colors.

The best example of how this works is the light/dark mode on this website. Themes define colors for cell text and background.

If you write text in a cell, in light mode you’ll see black text on a white background. But if you switch to dark mode, you’ll see white text on a black background. That way, no matter what the theme, the spreadsheet is readable.

Try switching between light and dark mode:

If you set a specific color for text in a cell, then it will stay that color even if the theme changes. This might be a problem if the theme changes.

In addition to standard text/background colors, themes include a number of additional theme colors you can use for text, backgrounds, and borders. Plus you can use lighter or darker variations of theme colors.