javascript - How can I handle multiple themes in an angular component? - Stack Overflow

admin管理员组

文章数量:1327935

I'm working on an Angular 9 project where I'm creating two themes and each theme has it's own css output file. I modified the angular.json file to handle that:

"styles": [
  {
    "input": "src/styles/themes/light-theme.scss",
    "lazy": true,
    "bundleName": "light-theme"
  },
  {
    "input": "src/styles/themes/dark-theme.scss",
    "lazy": false,
    "bundleName": "dark-theme"
  }
],

light-theme and dark-theme are my input files, where I'm setting variables like:

• $background-color
• $button-color
• $text-color
• etc, etc.

My problem is that I cannot use those variables from each ponent, because my ponent won't know what those variables are. I cannot import one or another theme, because I would like to use the values that I declared in the input file. How should I handle this? Is there any way of "importing" the input file I wrote on my angular.json file?

Thanks!

I'm working on an Angular 9 project where I'm creating two themes and each theme has it's own css output file. I modified the angular.json file to handle that:

"styles": [
  {
    "input": "src/styles/themes/light-theme.scss",
    "lazy": true,
    "bundleName": "light-theme"
  },
  {
    "input": "src/styles/themes/dark-theme.scss",
    "lazy": false,
    "bundleName": "dark-theme"
  }
],

light-theme and dark-theme are my input files, where I'm setting variables like:

• $background-color
• $button-color
• $text-color
• etc, etc.

My problem is that I cannot use those variables from each ponent, because my ponent won't know what those variables are. I cannot import one or another theme, because I would like to use the values that I declared in the input file. How should I handle this? Is there any way of "importing" the input file I wrote on my angular.json file?

Thanks!

• javascript
• angular
• variables
• sass
• theming

Share Improve this question Follow edited May 18, 2020 at 15:29 Fede Snieg asked May 15, 2020 at 19:48 Fede SniegFede Snieg 14311 silver badge99 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8 +50

If you define sass variables in your global styles, you won't be able to access them after when you dynamically change the theme. This is because the dynamically loaded theme will contain css rules only, not sass; besides at run time your ponents scss has also already piled to css so there is no more notions of sass variables either way.

What you can do instead is use CSS variables, which have good browser support (apart from IE and opera mini).

So for instance, you can define these variables in your theme files

dark-theme.scss

:root{
  --button-background: darkgrey;
  --button-color: white;
}

light-theme.scss

:root{
  --button-background: lightgrey;
  --button-color: black;
}

Then in your ponent, use these variables

ponent.scss

button
{
  cursor: pointer;
  padding: 10px;
  border: 0;
  color:var(--button-color);
  background-color:var(--button-background);
}

Then, when you dynamically load the light theme, it will override the existing variables. If you then dynamically remove light-theme.css, it'll go back to using your dark theme's variables.

本文标签： javascriptHow can I handle multiple themes in an angular componentStack Overflow