Ionic-framework: bug: Progress bar doesn't use theme colors

[schontz]

Bug Report

Ionic version:


[x] 4.x

Current behavior:

Using an ion-progress-bar with a dark theme results in a white progress bar.

Expected behavior:

Progress bar would pick up the theme colors.

Steps to reproduce:

1. Create an app with a progress bar
2. Use the dark theme
3. Progress bar is a white strip

Related code:
I had to do the following to fix it:

ion-progress-bar {
  --buffer-background: var(--ion-background-color);
  --background: var(--ion-background-color);
  --progress-background: var(--ion-color-step-400);
}

It seems like that should be the default.

Ionic info:

Ionic:

   Ionic CLI       : 5.4.12 
   Ionic Framework : @ionic/react 4.11.6

Capacitor:

   Capacitor CLI   : 1.2.1
   @capacitor/core : 1.3.0

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.11.0 
   npm    : 6.13.4
   OS     : macOS Mojave

[brandyscarney]

Thanks for the issue! The progress bar background is actually using --buffer-background: rgba( 56,128,255 ,0.2); which is appearing as white, but it is a shade of the primary color.

Per the Material Design spec for dark theme, it does need to be a darker shade of the primary color:

I am adding all of this because this is a bug but when this issue is fixed it won't be using the colors you are setting it to. 🙂

[schontz]

Thanks for the update. I don't expect it to be the colors I picked, per se, but I assume it would pick up the appropriate theme colors.

[infacto]

A year later... Here's a demo on Stackblitz

<ion-progress-bar value="0.5" color="primary"></ion-progress-bar>

(Toggle the background in Browser DevTools)

Why is the background set to 255, 255, 255 (white)? It's not a variable. No half opacity. It's just fixed white. (--buffer-background does not work.)

https://github.com/ionic-team/ionic-framework/blob/0a765c7172d49211e94ca5f37ca6059a33844b40/core/src/components/progress-bar/progress-bar.scss#L77

btw. I would suggest implementing a dark mode switch for the examples on the docs page.

Ionic 5 (5.4.4)
No solution yet.

[domske]

The progress bar background is actually using --buffer-background: rgba( 56,128,255 ,0.2); which is appearing as white, but it is a shade of the primary color.

This is not exactly right. It does not appearing as white. It is set to white ('#fff'). See line 77 (code block below). It violates style conventions. Any idea is welcome. ...

Here is the reason for the solid color.

https://github.com/ionic-team/ionic-framework/blob/0a765c7172d49211e94ca5f37ca6059a33844b40/core/src/components/progress-bar/progress-bar.scss#L74-L77

Changing to this:

.progress-buffer-bar {
  background: var(--buffer-background);
}

Result:

But, this should not be the solution. Never use fixed colors. Use theme variables or fixed colors with semi transparent color which does not interfere the theme.

We need a dark mode for the test bench during development and in the docs.
But back to this issue: Any suggestions? A spontaneous ideas: Use width and position for the buffer dots. So that the elements do not overlay. Or use a solid theme color. ... I see that the .buffer-circles animation is based on position (translateX). This limits possible quick fixes like using width / scale. 🤔 Maybe with a wrapper overlay hidden? ...

[infacto]

Could we assign --buffer-background with default #fff to keep the current behavior. But with the option that the user can change it? It's better than a fixed solid color. I think the buffer feature is more rarely used than the default appearance. So with the accessibility to the buffer background variable I can control that color. And implement a workaround in my app. The long term solution is to replace the fixed solid color and use the theme variable like all other components.

[domske]

Ok, I found a solution and will create a pull-request soon. It works with a wrapper for the circles buffer bar. It's moved by absolute position left and overflow hidden. Tested with reversed bar and theme light / dark.

[domske]

Just for info: I see that the Angular Material UI framework also has this issue. I guess for that same reason. 😃 (You can switch the theme light / dark in the toolbar above.)

_{(You see the Angular Material progress-bar) 👎}

To be honest, I have to say that I don't like the Angular Material Framework. Because it is too limited. A good material design framework is Vuetify. Which has a great progress-bar with the same behavior as the Ionic progress bar with my changes. I have not checked the source code yet. ... It's not about code theft. It's about being inspired.

_{(You see the Vuetify progress-bar) 👍}