sass multiple themes in angular

Question

Let's say I have two themes (light & dark) in an angular app > 2, and a toggle button which is already configured to add the theme class to the body tag

variables.scss

$themes: (
  light: (
    backgroundColor: #fff,
    textColor: #408bbd,
    borderColor: #254fe5,
  ),
  dark: (
    backgroundColor: #222,
    textColor: #ddd,
    borderColor: #2e4dd2,
  ),
);

I tried different approaches I found (here and here), but none worked.

I also tried the simplest approach

about.component.scss

.theme-dark .page-title{
  color: white;
}

.theme-light .page-title{
  color: red;
}

I know the class .theme-dark on body tag is not recognized from a component style, but I can't find any solution.

What approach can I use to get multiple themes in such modules system?

Answer 1

You can use :host-context in a scoped angular component. Here is your example:

about.component.scss

:host-context(.theme-dark) .page-title{
  color: white;
}

:host-context(.theme-light) .page-title{
  color: red;
}

Then you need an instance e.g. a service that can change the CSS class at top level to switch the theme.

When you don't need to support IE11 or other legacy browser take a look at CSS Custom Properties (CSS Variables) to change the values at runtime. This reduces your CSS files.