Refresh Angular Style

Question

One of my Angular components has two different StyleSheets for a dark and light theme. These should now be displayed depending on which theme is active (normally set via function, in the example simplified by timer). Is it possible to reload only the styling of the Angular component, without reloading the component (and possibly loaded data) completely?


let styleTest = ['button.component.light.scss'];

@Component({
    selector: 'button',
    templateUrl: 'button.component.html',
    styleUrls: styleTest,
})
export class ButtonComponent implements OnInit {

    constructor() {
    }

    public ngOnInit() {
        setTimeout(() => {
            styleTest = ['button.component.dark.scss'];
        }, 5000);
    }
}

Perhaps this can help you out: https://stackoverflow.com/a/61874309/8941307. It doesn't relate to angular. It uses css variables. — Pieterjan, Feb 24 '21 at 09:20
sadly not, becuase in dark and light theme i have an import from extern css sources and i just can define it in this component and not global — andy, Feb 24 '21 at 09:33
Perhaps you should share more of your code. Why are you referencing external css files (I assume like bootstrap.css) in just one of your components? — Pieterjan, Feb 25 '21 at 06:48

score 1 · Accepted Answer · answered Feb 24 '21 at 09:44

Maybe something like this can help you:

setTheme(theme) {
    window.localStorage.setItem('theme', JSON.stringify(theme));
    this.theme = theme;
    let link = document.getElementById("css-theme");
    if(link) {
        link['href'] = this.theme.url;
    } else {
        let node = document.createElement('link');
        node.href = this.theme.url; // insert url in between quotes
        node.rel = 'stylesheet';
        node.id = 'css-theme';
        document.getElementsByTagName('head')[0].appendChild(node);
    }
}

https://github.com/angular/angular-cli/issues/4202

Refresh Angular Style

1 Answers1