Attribute: theme

The theme attribute of the comments tag can be used to change the default Comentario appearance for embedded comments.

• Possible values for this attribute are light (the default) and dark.
• If this attribute is omitted, the default OS/browser colour theme is used: dark when dark mode is active, otherwise light.

The colour theme defines the colour palette used; comment appearance can be further fine-tuned by defining custom CSS styles.

The theme setting will have no effect when css-override is set to false.

Changing the value on-the-fly

This attribute is reactive: changing it on an already-embedded tag repaints the comments right away, without reloading the browser page:

document.querySelector('comentario-comments').setAttribute('theme', 'dark');

Unlike the other attributes, theme is handled entirely by the Comentario stylesheet, which keys its colour palette off the attribute value. The switch is instantaneous and doesn’t go through the usual short delay, and nothing is fetched or re-rendered. Removing the attribute goes back to following the OS/browser colour theme.

This makes the attribute the right way to keep embedded comments in sync with a light/dark mode toggle on your website.

See also

• Comments tag
• Attribute: css-override