Add darkness and lightness to hover effects

[mouhammad-zd]

I am wonder how can i achieve the w3-theme-d1 etc... for a hover effect

I can override that manually but i do not want because if you update this i will lose my changes and i will need again to re add them, if you can add .w3-hover-theme-d1 ..... .w3-hover-d5 and .w3-hover-theme-l1 ........ .w3-hover-theme-l5

Example, you have :

.w3-theme-l5 {color:#000 !important; background-color:#f4faf4 !important}
.w3-theme-l4 {color:#000 !important; background-color:#dbefdc !important}
.w3-theme-l3 {color:#000 !important; background-color:#b7dfb8 !important}
.w3-theme-l2 {color:#000 !important; background-color:#93cf95 !important}
.w3-theme-l1 {color:#fff !important; background-color:#6ec071 !important}
.w3-theme-d1 {color:#fff !important; background-color:#459c48 !important}
.w3-theme-d2 {color:#fff !important; background-color:#3d8b40 !important}
.w3-theme-d3 {color:#fff !important; background-color:#357a38 !important}
.w3-theme-d4 {color:#fff !important; background-color:#2e6830 !important}
.w3-theme-d5 {color:#fff !important; background-color:#265728 !important}

in these file
https://www.w3schools.com/lib/w3-theme-green.css

If you can copy theme to contain also hover effect it willbe perfect

look like this

.w3-hover-theme-l5:hover {color:#000 !important; background-color:#f4faf4 !important}
.w3-hover-theme-l4:hover {color:#000 !important; background-color:#dbefdc !important}
.w3-hover-theme-l3:hover {color:#000 !important; background-color:#b7dfb8 !important}
.w3-hover-theme-l2:hover {color:#000 !important; background-color:#93cf95 !important}
.w3-hover-theme-l1:hover {color:#fff !important; background-color:#6ec071 !important}
.w3-hover-theme-d1:hover {color:#fff !important; background-color:#459c48 !important}
.w3-hover-theme-d2:hover {color:#fff !important; background-color:#3d8b40 !important}
.w3-hover-theme-d3:hover {color:#fff !important; background-color:#357a38 !important}
.w3-hover-theme-d4:hover {color:#fff !important; background-color:#2e6830 !important}
.w3-hover-theme-d5:hover {color:#fff !important; background-color:#265728 !important}

also if you add the same for text hover effects like these:

.w3-hover-text-theme-l5:hover {color:#f4faf4 !important}
.w3-hover-text-theme-l4:hover {color:#dbefdc !important}
.w3-hover-text-theme-l3:hover {color:#b7dfb8 !important}
.w3-hover-text-theme-l2:hover {color:#93cf95 !important}
.w3-hover-text-theme-l1:hover {color:#6ec071 !important}
.w3-hover-text-theme-d1:hover {color:#459c48 !important}
.w3-hover-text-theme-d2:hover {color:#3d8b40 !important}
.w3-hover-text-theme-d3:hover {color:#357a38 !important}
.w3-hover-text-theme-d4:hover {color:#2e6830 !important}
.w3-hover-text-theme-d5:hover {color:#265728 !important}

also if you add the same for border hover effects like these:

.w3-hover-border-theme-l5:hover {border-color:#f4faf4 !important}
.w3-hover-border-theme-l4:hover {border-color:#dbefdc !important}
.w3-hover-border-theme-l3:hover {border-color:#b7dfb8 !important}
.w3-hover-border-theme-l2:hover {border-color:#93cf95 !important}
.w3-hover-border-theme-l1:hover {border-color:#6ec071 !important}
.w3-hover-border-theme-d1:hover {border-color:#459c48 !important}
.w3-hover-border-theme-d2:hover {border-color:#3d8b40 !important}
.w3-hover-border-theme-d3:hover {border-color:#357a38 !important}
.w3-hover-border-theme-d4:hover {border-color:#2e6830 !important}
.w3-hover-border-theme-d5:hover {border-color:#265728 !important}

also do the same for both border and text color

This it will be a great addition as i think and it is almost needed

[mesbahulalam]

You don't have to edit the original CSS, put the new rules in another file, and link to it. Even if the base CSS is updated, your additions won't get lost. The framework is kept light so that users get a lot of room for customization.

[umbundu]

I wish we had a sass/scss version so we could write the css in a more manageable way!