Open gilprime opened 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;
}
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 >}} |
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.