离子主题动态变化答案

【问题标题】：Ionic themes change dynamically离子主题动态变化
【发布时间】：2020-04-23 19:07:35
【问题描述】：

在我的themes/variables.scss 中，我有两种颜色主题（深色和浅色）：

/* LIGHT COLOR THEMES
========================================= */
/*$colors: (
  primary: #ffffff,
  secondary: #fafafa,
  danger: #f53d3d,
  light: #1b1e28,
  sliderColor: #fff,
  colorIcon: #CCCBDA,
  colorIconText: #7F7E96,
  category: #fff,
  listBackgroundColor: #ffffff,
  backgroundColor: #fafafa,
  toobarBackground: #ffffff,
  toobarButton: #AAB2B7,
  toobarText: #FFFFFF
);*/



/* DARK COLOR THEMES
========================================= */
 $colors: (
   primary: #282C39,
   secondary: #1b1e28,
   danger: #f53d3d,
   sliderColor: #fff,
   light: #fff,
   colorIcon: #7F7E96,
   colorIconText: #7F7E96,
   category: #fff,
   listBackgroundColor: #1B1E28,
   backgroundColor: #282C39,
   toobarBackground: #1B1E28,
   toobarButton: #D8D8D8,
   toobarText: #FFFFFF
 );

现在我只能在我的应用中放置一个主题。如果我想更改主题，我必须将一个变量注释掉，另一个我必须删除 cmets。

如何使用这两个主题，在 typescript 中的应用中动态更改主题？

在每个教程中，我都会看到这些 --ion-color-primary，但我没有这些 --ion-color 前缀

【问题讨论】：

标签： ionic-framework themes ionic4

【解决方案1】：

您可以通过多种方式做到这一点。主要思想是定义你的颜色类。你可以有例如 -

// light theme
:root {
  // define your light colors here
}

// dark theme
:root body.dark {
  // define you dark colors here
}

所以默认情况下，将应用浅色主题，因为您的应用程序的<body> 不包含任何类。现在要应用深色主题，您只需将dark 类添加到您的应用程序的<body>。例如，您可以有一个服务，它只需选择主体并向其添加类。并将其删除以返回浅色主题。

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ThemeService {

  constructor() { }

  applyDark() {
    document.querySelector('body').classList.add('dark');
  }

  removeDark() {
    document.querySelector('body').classList.remove('dark');
  }
}

顺便说一句，我看到你正在使用你自己的颜色变量。我刚刚给出了使用默认离子变量的示例（来自src/theme/variables.scss）

【讨论】：

我已经定义了：:root { --ion-color-primary: #282C39; --ion-color-secondary: #1b1e28; ... }，但我得到了：[10:52:02] sass: node_modules/ionic-angular/themes/ionic.functions.scss, line: 35 The value `` must be a color. If you are setting the value as a map make sure both the base and contrast are defined as colors. For example: $colors: ( primary: #327eff, secondary: (base: #32db64, contrast: #000), ); L35: @error $error-msg;
我无法从这个错误代码中理解。在线内容：35.我建议你去看看文档（ionicframework.com/docs/theming/themes）