Ionic3 Angular5项目暗黑模式SCSS变量不生效问题求助

你遇到的问题本质是SCSS变量的作用域限制和它的预编译特性导致的：

• SCSS是预编译语言，所有变量在编译阶段就会被替换成具体的值。当你把$background-color这类变量放在.dark-theme的代码块里时，这些变量的作用域只限于这个块内部，Ionic组件的默认样式（比如那些依赖$background-color的组件）在编译时根本访问不到这个块里的变量，自然不会生效。
• 而像p { font-size:76px }这种普通CSS规则，编译后会生成.dark-theme p { font-size:76px }的选择器，当页面添加.dark-theme类时，浏览器能正确匹配这个选择器，所以样式生效。

哪怕你去掉!default也没用，因为作用域的问题没有解决——这些变量还是被局限在.dark-theme块里，外部的样式规则根本用不上。

在Ionic 3项目里实现暗黑模式，更可靠的方式是用**CSS自定义属性（也就是CSS变量）**来代替SCSS变量做动态切换，因为CSS变量是运行时生效的，能跟随类名切换而更新样式。具体步骤如下：

1. 在全局变量文件中建立SCSS变量到CSS变量的映射
   打开src/theme/variables.scss，把原来的SCSS变量绑定到全局CSS变量上：

// 先定义基础的SCSS变量（浅色主题默认值）
$background-color: #fff !default;
$text-color: #333 !default;
$link-color: color($colors, primary) !default;
$subdued-text-color: #999 !default;

// 将SCSS变量转换为全局CSS变量
:root {
  --background-color: #{$background-color};
  --text-color: #{$text-color};
  --link-color: #{$link-color};
  --subdued-text-color: #{$subdued-text-color};
}

2. 确保样式使用CSS变量
   Ionic 3的默认主题样式已经支持通过CSS变量覆盖，你只需要确保自定义组件样式也使用CSS变量引用这些值即可，示例：

// 自定义组件样式示例
.my-custom-component {
  background-color: var(--background-color);
  color: var(--text-color);
}

3. 在暗黑主题文件中覆盖CSS变量
   创建src/theme/ionic.theme.dark.scss，在里面通过.dark-theme类来覆盖CSS变量：

.dark-theme {
  --background-color: rgba(0,0,0,0.6);
  --text-color: #fff;
  --link-color: color($colors, primary);
  --subdued-text-color: #666;

  // 你的自定义CSS规则
  p {
    font-size: 76px;
  }
}

4. 在全局样式文件中导入暗黑主题
   打开src/app/app.scss，导入暗黑主题文件：

@import "../theme/ionic.theme.dark.scss";

5. 切换主题时添加/移除.dark-theme类
   在你的主题切换函数中，给根元素（比如ion-app或者body）添加或移除.dark-theme类即可：

// 示例主题切换函数（Angular 5写法）
toggleDarkTheme() {
  const appElement = document.querySelector('ion-app');
  if (appElement) {
    appElement.classList.toggle('dark-theme');
  }
}

这样做的好处是，CSS变量会在运行时根据根元素的类名动态更新，所有使用这些变量的样式都会自动切换到暗黑主题的取值，完美解决你之前遇到的变量不生效问题。

内容的提问来源于stack exchange，提问作者user11625000