Theming

Try it#

Each change below calls Ocheso.setTheme(), just as your page would, and prints the same theme as a call, as attributes, and as an iframe address.

Ocheso.setTheme(null); // back to your brand

Where a theme comes from#

Four layers, each over the one before. Later layers only change what they name.

At runtime#

// Every widget on the page, merged over what was set before:
Ocheso.setTheme({ mode: "dark", accent: "#e4572e", radius: 8 });

// Follow your own site's dark mode switch:
myThemeToggle.onChange((dark) => Ocheso.setTheme({ mode: dark ? "dark" : "light" }));

// Back to the snippet's and your brand's own:
Ocheso.setTheme(null);

widget.setTheme()does the same for one widget, over the page's theme. The keys are the same everywhere:

On a plain iframe

An iframe can't run your script, so its theme rides in the address as t=: pairs of a short key and a value, separated by commas, colours without the #.

https://www.ocheso.com/embed/en/t/weekly-blitz?t=m.dark,ac.e4572e,r.8,f.inter,b.wood

Dark mode#

• auto(the default) follows the visitor's system setting, and switches live when it changes.
• If your site has its own light/dark switch, set the mode from it with Ocheso.setTheme({ mode }) so the widget matches your page rather than the system.
• Your accent works in both schemes; text on it is re-checked for contrast either way.

Boards#

Five presets, each with a light and a dark scheme. brand is tinted from your accent (shown here with #e4572e). Set single squares over a preset with boardLight and boardDark. Piece sets are the same for everyone in this version.

Fonts#

system uses the visitor's own interface font and costs nothing to load. inter, poppins, manrope and robotoare served by Ocheso from www.ocheso.com, inside the frame: your visitors' browsers never contact Google Fonts because of a widget.

The variables#

For reference, what the widget paints with. You can't set them directly from your page (the frame is a separate document); the keys above map onto them.