使用scss mixin进行引导主题无法正常工作

Question

我正在使用angular和ngBootstrap开发网站。我在应用程序需要主题支持的地方。

我的设置

我的想法是，只要HTML元素上的主题属性发生更改，就切换主题。我有一个themes.scss文件，看起来像下面的

themes.scss

@import './dark-neon/dark-neon-theme.scss';
@import './white-neon/white-neon-theme.scss';

@mixin themes {
    html {
        @include dark-neon-theme();
    }

    html[theme="white"] {
        @include white-neon-theme();
    }
}

和两个主题

dark-neon-theme.scss

@mixin dark-neon-theme {
    $body-bg: #000 ;
}

white-neon-theme.scss

@mixin white-neon-theme {
    $body-bg: #fff;
}

在我的root.scss文件夹中，将主题导入为

@import './styles/themes/themes.scss';
@include themes();
@import '~bootstrap/scss/bootstrap';

但是我看不到主题得到应用。它总是退回到默认的引导程序颜色。我究竟做错了什么。请帮忙。