如何使用我现有的SCSS和角度设置来实现暗模式？
如何使用我现有的SCSS和角度设置来实现暗模式？
提问于 2022-09-30 10:28:57
我用的是角13和SCSS。我想为我的应用程序实现黑暗模式。这是我目前的设置。
_variables.scss
$body-color: #f0f0f0;
:root {
--body-color: #{$body-color};
}在应用程序中的任何地方都是这样的，
.header {
background: var(--body-color) ;
}黑暗模式设置在_theme.scss文件中。
_theme.scss
@use '@angular/material' as mat;
@use 'variables' as v;
@import "~@angular/material/theming";
@include mat.core();
$angular-primary: mat.define-palette(mat.$teal-palette, 500, 100, 900);
$angular-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$angular-warn: mat.define-palette(mat.$red-palette);
$angular-default-theme: mat.define-light-theme(
(
color: (
primary: $angular-primary,
accent: $angular-accent,
warn: $angular-warn,
),
)
);
@include mat.all-component-themes($angular-default-theme);
$angular-dark-theme: mat.define-dark-theme(
(
color: (
primary: $angular-primary,
accent: $angular-accent,
warn: $angular-warn,
),
)
);
// $body-color: var(--body-color);
@mixin theme-check($dark-checker:null) {
@if $dark-checker == true {
--body-color: #2c2c2c;
}
@else {
--body-color: #f0f0f0;
}
}
$body-color: null;
.dark-mode {
@include theme-check(true);
$body-color: #2c2c2c;
@include mat.all-component-colors($angular-dark-theme);
// background-color: #2c2c2c !important;
// color: #fafafa !important;
transition: all 1s ease;
}无论我如何尝试，我似乎都不能全局地设置body-color变量。我是否可以将其设置在.dark-mode类中一次，并将其应用于全局？
回答 1
Stack Overflow用户
发布于 2022-12-02 13:11:54
终于弄明白了，这就是我要用的方法，
styles.scss
...
@import "./assets/style_varients/themes";
..._themes.scss
@use './dark-theme' as dark;
@use './light-theme' as light;
@mixin theme($theme) {
@if $theme == 'dark-mode' {
@include dark.color-mixin();
}
@else {
@include light.color-mixin();
}
}
.dark-mode {
@include dark.color-mixin();
transition: all 0.4s ease;
}
.light-mode {
@include light.color-mixin();
transition: all 0.4s ease;
}
:root {
.dark-mode {
--main-theme-variable: #{dark.$main-theme-variable};
}
.light-mode {
--main-theme-variable: #{light.$main-theme-variable};
}
}_dark-theme.scss
@mixin color-mixin() {
$main-theme-variable: #262626 !global;
//=========== Main Background Color ===========//
background-color: #141515;
//=========== Main Text Color ===========//
color: #D6D6D6;
}_light-theme.scss
@mixin color-mixin() {
$main-theme-variable: #FFF !global;
//=========== Main Background Color ===========//
background-color: #f0f0f0;
//=========== Main Text Color ===========//
color: black;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73907347
复制相关文章
相似问题
腾讯云开发者
