Progress bar color not uses ghost-accent-color (or any other)

Hi! I’ve implemented the progress bar for the articles (that’s very cool), but I’ve a problem with the color. Technically, by default gets the default accent color, but always use a blue color. I tried to force and put a specific color (#xxxxxx), but not works.

I use the code snippet from the tutorial:

.reading-progress::-webkit-progress-value {
  background: var(--ghost-accent-color); /* Progress bar color */
}

I’ve forgotten any step?

Thanks a lot in advance!

Edited to add a formatted codesnippet

Hey there! Are you able to share a link to your code or site?

Two suggestions:

  1. Your syntax for the CSS custom property isn’t quite right. There should be two hyphens before ghost-accent-color like this var(--ghost-accent-color).
  2. If you’re using a progress element, you can use the new accent-color CSS property to color it.
progress {
  accent-color: var(--ghost-accent-color);
}

Hi! The code I shared was only the specific part for the progress bar color, but I’ve entire snippet in the code injection:

<style>
.reading-progress {
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
  height: 5px; /* Progress bar height */
  background: #c5d2d9; /* Progress bar background color */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; /* Hide default progress bar */
}

.reading-progress::-webkit-progress-bar {
  background-color: transparent;
}

.reading-progress::-webkit-progress-value {
  background: var(--ghost-accent-color); /* Progress bar color */
}
</style>

I follow this tutorial official Show reading time & progress in your Ghost theme and my site is Toni Miquel - Second Brain

And yes, I’m using the progress element as is explained in the tutorial in the post.hbs file

<progress class="reading-progress" value="0" max="100" aria-label="Reading progress"></progress>

and I use the default Casper theme. Where I put this extra CSS property? In code injection or into a css file from the theme (global.css or screen.css)?

Thanks for your help!

Ah, gotcha!

It looks like you got it working :steam_locomotive:

If not, you’d add that exact block of code to SettingsCode InjectionSite Header.

Yes, the progress bar works fine, but what doesn’t work is change the color.

My accent color for the blog is green, but the progress bar color is blue
imagen

That’s the point. I’m trying to change this color, but seems that the configuration for this doesn’t work. And I don’t know if it is a problem from my site, from the Ghost core (with any update) or there is something missing/wrong in the tutorial. Or just this color cannot be changed, because I’be tried to put the code color #006432 instead of var(--ghost-accent-color), but the color keeps blue.

Maybe I explained wrong before.

Oh, seems the problem is from Firefox. I checked it from Chrome and works fine. Damn…

Sorry for this confusion! :bowing_man:

So, maybe there is something with the Firefox webkit.

Thanks for your help as well!

I’m going to update this tutorial to use different components to make this work better across browsers.

In the meantime, you can try this CSS to get more consistent styling:

.reading-progress::-moz-progress-bar, 
.reading-progress::-webkit-progress-value  {
  background: var(--ghost-accent-color); /* Progress bar color */
}

Can the Progress Bar be added to Ghost Pro with the same steps as the article?

Yes, as long as you’re on the Creator plan or higher since it requires changes to the theme.