0
  • I'm building Clarity 3 app (looking forward to upgrade it to Clarity 4 once it's out).
  • I don't care about old browsers.
  • I guess, I shouldn't use Clarity SCSS as it will be removed in v4

I want a simple way to switch between light and dark themes, which will:

  • not include manually copied Clarity CSS code in my files like this example from docs
  • smooth switching theme without glitches
  • every theme will have a small set of its css vars customized (with brand colors and fonts)

I've checked out few answers here, and this repository mentioned in Clarity docs, but none of them are compatible with my requirements.

Any suggestions?

Sergey Durnov
  • 73
  • 1
  • 6
  • Does this answer your question? [How to dynamically switch theme with vmware clarity](https://stackoverflow.com/questions/47602912/how-to-dynamically-switch-theme-with-vmware-clarity) – jerone Jul 13 '20 at 19:42

1 Answers1

0

You can use native css variables which you can then change via either css itself or javascript since you can address css attributes there. For a smooth switching, that is probably already given by mentioned approach, I would add a transition that is focused on the changed property:

.html

<html>
    <div id="somediv0" className="theme"></div>
    <div id="somediv1" className="theme"></div>
</html>

.css

:root {
    --theme-attribute-0: black;
    --theme-attribute-1: white;
}

.theme {
    color: var(--theme-attribute-1);
    background-color: var(--theme-attribute-0);
    transition: all 1000ms ease;
}

.js

element.addEventListener('click', () => {
    document.documentElement.style.setProperty('--theme-attribute-0', 'white');
    document.documentElement.style.setProperty('--theme-attribute-1', 'black');
})
Lukas
  • 149
  • 3
  • 9
  • Yes, but how do I do that with Clarity css vars without copy-pasting them and manually reassigning each variable in js? – Sergey Durnov Jul 02 '20 at 12:18