การเปลี่ยน Theme (Dynamic Theming)

มี 2 theme สามารถกดปุ่มเพื่อสลับ theme ไปมาระหว่าง theme.dark และ theme.light

theme dark theme light

สร้างโปนเจ็กส์ใหม่ myApp และทดลองรัน

> ionic start myApp blank
> cd myApp
> ionic serve

เพิ่ม Provider settings

> ionic g provider settings 

เพิ่มไฟล์ src/theme/theme.light.scss

เพิ่มไฟล์ src/theme/theme.dark.scss

ที่ไฟล์ src/theme/variables.scss เพิ่มโค๊ดที่ด้านบนของไฟล์

src/providers/settings/settings.ts

บรรทั่ดที่ 1: อย่าลืม comment หรือลบออก ไม่งั้นจะ error

src/app/app.component.ts

src/app/app.html

เพิ่ม [class]="selectedTheme"

src/pages/home/home.html

src/pages/home/home.ts

แต่ถ้าต้องการเปลี่ยนแค่สีของ ion-navbar ก็เปลี่ยนตามนี้

src/theme/theme.light.scss

src/theme/theme.dark.scss

จะได้

ถ้าจะเปลี่ยนสีปุ่มด้วยจะเป็น

src/theme/theme.light.scss

src/theme/theme.dark.scss

Link