Menu
Vmware Clarity 0.10.16 just released the new dark theme. This is great!
They described how to add that new theme, but nothing about the possibility to dynamically change it inside the page. Is it because it is not doable?
If it is, how can I do it with Angular 4+? Any site that could help me explaining how to realize that?
Thanks in advance!
369
Clarity now ships with stylesheets for both light and dark themes. We document how to consume them here with both angular-cli or webpack build configurations. That means that once the app is built, that is only style it has.
I have some ideas about how to implement a theme switcher for toggling between the two. Here is a rough idea I might start my prototype with:
@Input of the the src for a stylesheet in the <head>
/path/to/light.css and /path/to/dark.css in a service so the app could pass the active theme value around and modify it when needed. Does this give you some ideas for your app?
I'll update here after I have a prototype working so you can see it in action and find the source code.
168
I've built a proof of concept how you could do this, but it does have some limitations. Since you can only include one theme file at a time, there can be some lag for the correct theme to render since it happens later in the Angular rendering cycle. It would only big a big deal when the cache is empty for a browser, as subsequent visits would render quickly, but that is a major consideration here. Its a start that you might be able to build something more robust upon.
https://stackblitz.com/edit/clarity-theme-switcher?file=app%2Fapp.component.ts
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
