User custom global theme

Ionic Framework ionic-v3
1

Hi,

I have an app where users have 3 colors: base (main brand color), accent, and contrast. This is stored in the database and when the user logs in I want to update the global theme. Is this possible?

Thank you,

2

A few months ago I created a tutorial on dynamically styling your Ionic app, you can check it out here!

So basically you can retrieve the data from your backend and then apply the needed styles to the root element of your app!

3

Thank you for your response, I came across your post in my hunt for a solution. I’m unsure how that would work, say I want to style the toolbar (not using the sass variables, obviously) I could do something like:

.toolbar-background{
     background-color:{brand};
}

I only need to style the background-color of the toolbar, so applying the style to the root element would be ineffective.

One suggestion I’ve been given is when the user logs in, build a theme.css file and write it to disk, then reference it with <link href="some/path/theme.css" rel="stylesheet" />

Am I missing something?

4

I’ve even tried creating a theme-provider component which wraps the whole app. This would build up some CSS and pass it to a style tag like so:

<style type="text/css" [innerHtml]="css"></style> <!-- tried innerText and ngmodel, too--> 
<ng-content></ng-content> <!-- rest of app -->

app.html

<theme-provider>

<ion-menu [content]="content">
  <ion-header>
    <ion-toolbar>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <button menuClose ion-item link *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
   
  </ion-content>

</ion-menu>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

    
</theme-provider>

but ionic removes the style tag.

I feel like someone must have done this stuff before. :confused:

5

i follow your guide but i need to change my sidebar color.
how can i change the sidebar color in each theme?
I can change the toolbar title and background color in each page, but in the sidebar does not grab the CSS.
I do not know how to change the global css in each theme (I usually change the css of the sidebar in app.scss).