Ionic v3 toggle between light and dark theme at runtime (dynamically)

Ionic Framework ionic-v3
1

In Ionic v3 there is import of the theme in the file variable.scss.

@import 'ionic.theme.default';

and can be replaced by the dark theme to use the dark theme instead of the default light theme.

@import 'ionic.theme.dark';

Works great. But how to toggle between both themes at runtime? And how to know what theme is currently active to style custom components.

I have already searched the internet, including here. But I found nothing helpful. So I think this is not a duplicate. Maybe I missed something. But there should be a way to import the default AND dark theme and enable toggle between at runtime.

I could write my own themes by css “hacking”. But I prefer to use the Ionic preset official way.

2

I could build my app twice. In default light and dark theme. And copy the main.css to the default (light) build as “main-dark.css” and dynamically replace it in the index.html. But that’s not the way I prefer.

@mhartington @brandyshea Can you help me please? I think you have a better overview of the project than me. I wondering, is it possible to toggle between the default light and dark theme at runtime?

I don’t think so, because the import of ionic.theme.dark just overwrites the Ionic scss variables.
But maybe there is a way to wrap the dark mode in a selector. So that I can add the class dark-theme to the body or an Ionic element.

3

Hi I was having the same issue. I had two different themes and i had the themes as images/icons. After I had them as css. In the css way, when i was changing the theme at run time i had white screen.

What i did was to use window.location.reaload() function. I change the theme and reload the app which applies the css theme to the whole app. I know it is a work around but if you get some better solution please inform.

setTimeout(() => {
   window.location.reload();
 }, 100);
4

@nomanshah Thanks for the hint. I do not know yet if I will go this way. But if you wrap the other css in a selector. (do this in scss, otherwise you have to add the class name befor every selector :smiley: ) you can load both css in your index and just add the wrapper class name to the body. (Not tested, just an idea.)

5

As I have did

for dark theme
<ion-content *ngIf="!lightTheme" style="–ion-background-color: rgb(0, 0, 0) !important;color: #FFF;">

Light Theme
<ion-content *ngIf=“lightTheme”>

and inside my ts
/*

  • Light Theme Veriable
    */
    lightTheme: boolean = ApiService.lightTheme;

value is set inside service which will be handled at run time as
public static lightTheme: boolean = true;

cheers!!

6

If you are building an app using Ionic v3 you would need to build two copies of the Ionic CSS - one for light theme and one for dark theme.

In Ionic v4 you can change CSS variables to toggle between light & dark theme at runtime, see the following example:

https://codepen.io/brandyscarney/pen/mdbVMqN

1 Like
7

@brandyshea Thank you for the confirmation and your example. :slight_smile: In Ionic v3 we have to build the main.css twice. The second one with dark theme mode etc. enabled. Rename it to main-dark.css and handle it to toggle between both. …

I would say we have to upgrade to Ionic v4. Ok, this is not the only reason. ^^
Why still using Ionic v3? Well, we have a very complex app with native plugins,
which needs a lot of time for the upgrade. But this is another trigger to doing this as soon as possible.

Thanks again.