Hi,

Add the ‘theme’ attribute to the body tag and set it to “dark” to apply the dark theme. To un-apply it, remove the ‘theme’ attribute.

Alternatively, use the CSS variables API of the components.

For example:

/* Light theme */
:root {
  --smart-background: #ffffff;
  --smart-surface: #f9f9f9;
  --smart-border: #ddd;
  --smart-primary: #6610F2;
  --smart-color: #000000;
}

/* Dark theme */
.dark {
  --smart-background: #121212;
  --smart-surface: #1e1e1e;
  --smart-border: #333;
  --smart-primary: #00D647;
  --smart-color: #ffffff;
} 

Hope this helps.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/