Using html element with dark mode

[Nick390]

I tried to use the script and it worked with me on all class but Bootstrap is known to be having effect like :focus and :hover
so if you use

[data-theme="dark"] a.bg-light:focus, a.bg-light:hover, button.bg-light:focus, button.bg-light:hover {
    background-color: #6c757d!important;
}

And you switched between the dark mode and the normal mode, you will find that the dark mode applies these changes and cannot be changed completely until you remove !important from background-color as example and when you do, you are not able to implement these changes at all

My question is, Is there a solution to this problem?

And I thank you with all my heart for your wonderful effort

[Nick390]

It seems that my luck not good to find someone will answer me

[ardianta]

I think the CSS code should like this:

[data-theme="dark"] a.bg-light:focus, 
[data-theme="dark"] a.bg-light:hover,
[data-theme="dark"] button.bg-light:focus,
[data-theme="dark"] button.bg-light:hover {
    background-color: #6c757d!important;
}

or if you use SASS:

[data-theme="dark"] { 
    a.bg-light:focus, 
    a.bg-light:hover, 
    button.bg-light:focus, 
    button.bg-light:hover {
       background-color: #6c757d!important;
   }
}

[Nick390]

I think the CSS code should like this:

[data-theme="dark"] a.bg-light:focus, 
[data-theme="dark"] a.bg-light:hover,
[data-theme="dark"] button.bg-light:focus,
[data-theme="dark"] button.bg-light:hover {
    background-color: #6c757d!important;
}

or if you use SASS:

[data-theme="dark"] { 
    a.bg-light:focus, 
    a.bg-light:hover, 
    button.bg-light:focus, 
    button.bg-light:hover {
       background-color: #6c757d!important;
   }
}

Thanks I will try it 👍