How to dynamically switch theme with vmware clarity

问题

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!

回答1:

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:

Build the app without either of the theme css files (no clarity style at all)
Copy both css files to the assets folder (during the build)
Write a directive or component that can take an @Input of the the src for a stylesheet in the <head>
Store the both paths /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.
Add the service to the app components where we want to let users update the theme.

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.

回答2:

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

回答3:

Here is what I did:

I created two SCSS stylesheets. Load them both in the angular.json configuration. In stylesheet 1, import Clarity default theme. In stylesheet 2, import Clarity dark theme inside an class-selector. Like so:

.dark-mode {
    @import "~@clr/ui/src/utils/theme.dark.clarity"; // Dark theme variables
    @import '~@clr/ui/src/utils/components.clarity';

    // @import third party styling...

    // Fix styling HTML-tag.
    // node_modules\@clr\ui\src\typography\_typography.clarity.scss
    & html {
        color: $clr-global-font-color;
        font-family: $clr-font;
        font-size: $clr-baseline-px;
    }
}

In the AppComponent constructor import @Inject(DOCUMENT) private document: Document.
To enable dark-mode, I used the following code:

this.document.documentElement.classList.add('dark-mode');

I used localStorage to store the users preference.

The advantage of this is:

There is no FOUC.
I don't need to tweak with existing stylesheets or replace existing stylesheets.

The disadvantage is:

Every CSS selector will be duplicated with in the .dark-mode class-selector. This doubles the file size. I didn't consider this any problem.
A small fix is needed for the html-element styling. Solution included in the example above.

回答4:

I have implemented it adding a link in the index.html

<link id="theme" rel="stylesheet" href="https://unpkg.com/@clr/ui/clr-ui.min.css" />

Then in your app.component.ts

linkRef: HTMLLinkElement;
themes = [
    'https://unpkg.com/@clr/ui/clr-ui.min.css',
    'https://unpkg.com/@clr/ui/clr-ui-dark.min.css'
];
constructor(){
  this.linkRef = document.getElementById('theme') as HTMLLinkElement;
  // you could change here the theme if you have it stored in local storage
  // for example
  // const theme = localStorage.getItem('theme')
  // if(theme) this.linkRef.href = this.themes[parseInt(theme)]
}
setTheme(dark:bool){
  this.linkRef.href = this.themes[dark ? 1 : 0]
}

来源：https://stackoverflow.com/questions/47602912/how-to-dynamically-switch-theme-with-vmware-clarity

标签

angular

vmware-clarity