Ioni c темы меняются динамически - PullRequest
Новая
       9

Ioni c темы меняются динамически

1 голос
/ 23 апреля 2020

В моем 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
 );

Сейчас я могу добавить только одну тему в свое приложение. Если я хочу изменить тему, я должен закомментировать одну переменную, а другую - удалить комментарии.

Как я могу использовать эти две темы, динамически менять тему в приложении в машинописном тексте?

В каждом уроке я вижу эти --ion-color-primary, но у меня нет этих --ion-color предваряющих

1 Ответ

1 голос
/ 26 апреля 2020

Вы можете сделать это несколькими способами. Основная идея заключается в том, чтобы определить свой класс цветов. например, вы можете указать - 

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

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

. По умолчанию будет применена световая тема, поскольку <body> вашего приложения не содержит никакого класса. Теперь, чтобы применить темную тему, просто добавьте класс dark в <body> вашего приложения. Например, у вас может быть сервис, который просто выбирает тело и добавляет к нему класс. И удалите его в go, чтобы вернуться к светлой теме. 

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');
  }
}

Кстати, я вижу, вы используете собственную цветовую переменную. Я только что привел пример использования переменных по умолчанию ioni c (из src/theme/variables.scss)

...