Ionic button color overridden

[chrisgriffith]

Bug Report

Ionic version:
[x] 4.x

Current behavior:
Running, when the icon is the color defined by the ion-toolbar's color variable. If I run this in Ionic Lab, the iOS version of the icon is the default primary color, while the Android version uses my overrides.

Expected behavior:
Not sure which might be right, just have the platforms do the same thing.

Steps to reproduce:
define two CSS Variables in variabled.scss

: root{}
--mycolor: rebeccapurple;
--mytextcolor: #fff;
...

Then set the CSS variables in the global.scss

ion-toolbar {
    --background: var(--mycolor);
    --color: var(--mytextcolor);
}

In my template, I have this:

<ion-buttons slot="secondary">
      <ion-button fill="outline">
        <ion-icon slot="start" name="star"></ion-icon>
        Star
      </ion-button>
    </ion-buttons>

Related code:
run this code to update the variables
document.documentElement.style.setProperty(--mycolor, '#ccc');
document.documentElement.style.setProperty(--mytextcolor, '#000');

Other information:

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.3.1
   @angular-devkit/build-angular : 0.13.8
   @angular-devkit/schematics    : 7.3.8
   @angular/cli                  : 7.3.8
   @ionic/angular-toolkit        : 1.5.1

System:

   NodeJS : v10.14.2 (/usr/local/bin/node)
   npm    : 6.9.0
   OS     : macOS Mojave

[brandyscarney]

Thanks for the issue! Could you paste the full markup for the header? The toolbar is setting color?

[chrisgriffith]

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="secondary">
      <ion-button fill="outline">
        <ion-icon slot="start" name="star"></ion-icon>
        Star
      </ion-button>
    </ion-buttons>
    <ion-title>Theme Demo</ion-title>
    <ion-buttons slot="primary">
      <ion-button color="danger" fill="outline">
        Edit
        <ion-icon slot="end" name="create"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-button (click)="colorIt()">Color Theme</ion-button>
  <ion-button (click)="setTheme('dark')">Dark Theme</ion-button>
  <ion-button (click)="setTheme('light')">Light Theme</ion-button>
</ion-content>

and the methods

olorIt() {
    document.documentElement.style.setProperty(`--mycolor`, '#ccc');
    document.documentElement.style.setProperty(`--mytextcolor`, '#000');
  }

  setTheme(userTheme: string) {
    if (userTheme === 'dark') {
      this.theme.mycolor = 'rebeccapurple';
      this.theme.mytextcolor = '#fff';
    } else {
      this.theme.mycolor = '#ccc';
      this.theme.mytextcolor = '#000';
    }

    Object.keys(this.theme).forEach(k =>
      document.documentElement.style.setProperty(`--${k}`, this.theme[k])
    );
  }

[brandyscarney]

Thanks! I was able to reproduce it in this Codepen: https://codepen.io/brandyscarney/pen/VNoPNj?editors=1000

I think I have found the issue as well.

[chrisgriffith]

I had no doubts :)

…

On Thu, May 2, 2019 at 12:12 PM Brandy Carney ***@***.***> wrote: Thanks! I was able to reproduce it in this Codepen: https://codepen.io/brandyscarney/pen/VNoPNj?editors=1000 I think I have found the issue as well. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#18184 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAEA4AZPCWEURKJ6IQM5G3LPTM4KVANCNFSM4HJYRMVA> .

[brandyscarney]

Actually, in revisiting this, I don't think it is possible to work like that. I created a simple Codepen showing this behavior with normal divs: https://codepen.io/brandyscarney/pen/BeKGyZ

You can see that the problem you're running into is that the iOS buttons use the primary color by default, but the title is black. Material Design uses whatever the toolbar color is for both the title and buttons.

The component-level CSS variables should be set on the components themselves and used more on a per-component basis. If the component has --color set, it won't inherit --color from its parent, that's just how CSS variables work. I think if you're trying to change global themes, you should use the provided theme variables which work a bit differently than trying to override component by component. There is some documentation on the themes here: https://ionicframework.com/docs/theming/advanced#themes

I think the solution is something like this: https://codepen.io/brandyscarney/pen/BeKvaq?editors=0110

However, in testing this out I realized iOS wasn't theming the toolbar properly using our global toolbar variables, so I updated the PR to fix this now: #18191

Let me know if you have any concerns with this!

[chrisgriffith]

Makes sense to me. Glad you found that other issue. Should I close this out?

[brandyscarney]

@chrisgriffith No I will close this with that fix, thank you!!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.