bug: Progress bar doesn't use theme colors

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

[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]

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? …