As of the current Asciinema player version, a mounted player does not
automatically update its colors when the user’s theme changes. Asciinema reads a
custom theme’s CSS properties only when the player mounts, so changing a media
query, class, or attribute does not update an existing player.
astro-asciinema solves this by watching the same signal your site uses to
change themes and remounting the player with the new palette. Set theme-source
to identify that signal. The component preserves the current playback time and
resumes the recording if it was playing.
options.theme selects the Asciinema theme. theme-source tells the component
what to watch for changes. Your CSS still defines the light and dark palettes.
Strategies
Choose the strategy that matches how your site controls its color scheme.
Follow the operating system preference
Use the default "media" strategy when your site follows
prefers-color-scheme. Define both palettes under the same Asciinema theme
name:
Select the site theme. You can omit theme-source because "media" is the
default:
Watch a class
Use "class" when your site adds or removes dark on the root element:
For another class name, pass the name and use the same class in your CSS:
Watch an attribute
Use "data-theme" when your site changes the data-theme attribute on the root
element. The component reacts to any value, so your CSS controls which values
select each palette:
For another attribute, pass its name and target it in your CSS:
Use a single player theme
When the player uses the same palette in every site color scheme, select the
theme with options.theme and omit theme-source. No additional theme
configuration is required:
Complete the palette
The examples use foreground and background colors to show the theme-switching
mechanism. Define the complete ANSI palette for a production theme. See
custom themes in the Asciinema
documentation.