angular - 如何动态更改使用 jhipster 生成的 webapp 的主题

Question

我正在使用Jhipster 6.9.1

我想动态地将我的应用程序的主题更改为暗模式，我还有一个名为Setting的实体 ，用户可以有多个设置。

例子：

 User                     |        Setting 
 id | login               |        id  |  key          |  value   |  user_id   
 1  | xxxxx               |        1   |  'DarkMode'   |  true    |  1
 2  | yyyyy               |        2   |  'DarkMode'   |  false   |  2

另一方面，我有两个 scss 文件：dark-mode.scss和light-mode.scss，这是导入的默认主题

webapp/content/scss/vendor.scss

我已经关注了许多专注于此目的的文章，还有一个名为bootswatch的模块 仅与 AngularJS 一起工作，此外它自 Jhipster 5 及更高版本以来已被弃用

我已尝试在此链接中提到的根组件中使用 dark-mode.scss， 但除非我将其导入 vendor.scss，否则不会应用该样式

标签： angularspring-bootwebpackjhipster