thegeeklab / hugo-geekdoc

Hugo theme made for documentation
https://geekdocs.de
MIT License
515 stars 314 forks source link

Allow to change color of progress #852

Open gilprime opened 4 months ago

gilprime commented 4 months ago

Progress is always in blue, add a way to change the tint of colors, for example, red, orange, green... Or based on a Hue or hex value that will affect the other striped color automatically based on the first one.

xoxys commented 4 months ago

The color of UI elements (progress, buttons, etc.) is based on the --accent-color-lite and --accent-color vars. These vars can be changed as described in https://hugo-geekblog.geekdocs.de/posts/features/theming/. However, this will affect all UI elements and I would like to keep this behavor as it results in a consistent UI.

If you still want to use a different color for progess only, you can still use the custom css file to override the property in the progress bar class directly:

.gblog-progress__bar {
  background-color: green !important;
}
gilprime commented 4 months ago

Thanks for you response, i kenw that it is possible to customize color, but, my request was to customize it progress by progress, for example, if i have a table of items to develop with item in the first column and a progress on the second indicating the development progress of it. I wish to set the progress to green if item is completed, let it blue is in progress, and customize it to red if not started. So in one page i can have three coloring schemes for the progress.

See example of what i mean below:

Features to develop Status
Feat. one {{< progress title="Done" value=100 color=green >}}
Feat. two {{< progress title="In progress" value=80 >}}
Feat. three {{< progress title="Not started" value=0 color=red >}}