离子主题动态变化

Question

在我的 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
 );

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

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

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

Answer 1

您可以通过多种方式完成此操作。主要思想是定义颜色 class。你可以有例如 -

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

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

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

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）

离子主题动态变化

Ionic themes change dynamically

themes

ionic-framework

ionic4