Как добавить пользовательскую тему в приложение Ioni c 5?

Question

Мне нужно добавить собственную тему в приложение Ioni c 5. Я пытался добавить red-theme к переменным. S css

@media (prefers-color-scheme: red) {
  :root {
    --ion-color-primary: red;

И затем я пытаюсь инициализировать его с помощью индекса. html

 <meta name="color-scheme" content="red" />

Но это не так за работой. Я также попытался добавить код переключателя javascript из https://ionicframework.com/docs/theming/advanced

Можно ли создать тему для приложения Ioni c, добавив новые первичные, вторичные и третичные цвета, а затем изменив их во время выполнения?

Answer 1

Вы можете использовать медиа-запрос prefers-color-scheme для тем dark и light.

Чтобы добавить новую пользовательскую тему в Ioni c, вы просто создаете для нее новый класс CSS и перезаписываете каждую переменную цвета в соответствии с этим правилом CSS:

variables.s css

body.red {
  --ion-color-primary: red;
  /*...*/
}

Остальные цвета можно создать с помощью Генератор цвета и Ступенчатый генератор цвета . Наконец, вы можете настроить некоторые c переменные цвета, такие как --ion-toolbar-background et c., Для режимов ios и md, вы можете посмотреть на Стандартные темные цвета , скопировать и отредактируйте остальные цвета оттуда.

После этого вы можете создать кнопку, которая переключает класс .red на элементе body, а также сохранить предпочитаемую тему внутри localStorage или использовать * 1030. * и переключение класса при загрузке приложения:

main.ts

const theme = localStorage.getItem('theme')

document.body.classList.toggle('red', theme === 'red')