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) 👍}

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/22957, and a fix will be available in an upcoming release of Ionic Framework.

[ionitron-bot[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.