Bootstrap SCSS Dark theme workaround

[Bemmm]

I'm submitting a...

• [ ] Bug report
• [ ] Feature request
• [ ] Documentation issue or request
• [x] Question

Current behavior

I have generated my web project, based on bootstrap (SCSS). I want to have a theme switcher there. For now, i have 2 versions of theme-variables (one for dark and one for light theme). If i'm toggling those files in main.scss - everything is fine

Expected behavior

I understand that most likely i'll need to compile 2 separate files (main-light.scss and main-dark.scss), but i'm confused from where i should import scss variables to my components. How to implement the switching based on media query?

Maybe somebody from the rocket community figured out how to make it work.

[sinedied]

To implement a dark theme switcher dynamically, the best way is to use CSS variables: https://dev.to/ananyaneogi/create-a-dark-light-mode-switch-with-css-variables-34l8

Unfortunately, Bootstrap was not build for such a feature. The easiest workaround I think would be to build 2 versions of the CSS, dark and light, and then switch between the two manually using JS.

But there are no easy way to build 2 different CSS with Angular, AFAIK. You can try editing angular.json to add a second style entry:

"styles": [
  {
    "input": "styles/main-light.scss",
    "bundleName": "light"
  },
  {
    "input": "styles/main-dark.scss",
    "bundleName": "dark"
  },
]

But by doing so, both resulting CSS will be included in index.html at build time.