Dark like button fix

[zFishStick]

Related to issue #3298. I fixed the like button color for both light and dark modes. I created four selectors to accurately detect whether YouTube is in dark or light mode based on the page itself (not relying on the extension but on the YouTube settings). Additionally, the solution also handles color changes when the user switches the theme via the extension, ensuring the icons update correctly in all scenarios.

Small note: the commit is marked as small issue , it's just me who wrote wrong the commit message ;)

[ImprovedTube]

hi @zFishStick thank you!
[darker-dark-theme] is a placeholder to be removed?

( BTW :not([dark])[it-theme="default"] is optional, because it can be overwritten by lines processed after it or stating greater specificity )

[zFishStick]

Hi @ImprovedTube !
You're right, most probably i left the selector because i was continuously changing my YouTube and Extension theme in order to test all the 4 cases, and probably i left it there at the end. I tried to remove it and the fix still works.

About the second thing, you're right, i was sure that if i don't specify that there was a light theme then the selector doesn't work, but as you said it's still working even with only the second part of the selector (html .yt-spec-button-shape-next__icon ytd-lottie-player svg path[fill-opacity="0"])

I can fix these issues, thank you for the response! <3

[zFishStick]

Ok so, i managed to remove the placeholder selectors.
About this selector:

/* Light Mode + Fullscreen */
html:not([dark])[it-theme="default"] ytd-watch-flexy[fullscreen] .yt-spec-button-shape-next__icon ytd-lottie-player svg path[fill-opacity="1"] {
    fill: var(--yt-spec-text-primary-inverse);
}

/* Like button splash effect light mode */
html:not([dark])[it-theme="default"] .yt-spec-button-shape-next__icon ytd-lottie-player svg path[fill-opacity="0"] {
	stroke: var(--yt-spec-text-primary-inverse);
}

The first part of the selector is necessary, without it, the like button it's still black when the Extension theme is settled to dark while the system is light. Same thing for the splash effect.

Note that I'm trying the new changes on the master branch, as long the one where i implemented these changes was from an older version. Hope it's clear.

[ImprovedTube]

hi! :) @zFishStick sorry for the delay! yes, sorry i just thought of specificity generally (in two identical rules an extra attribute like [dark] will win).
glad you adopted this issue! (and might be the most-likely person now to follow up).

did you test with all settings reset / newly installed?
yet [it-theme="default"] will only take effect for users who enabled and disabled one of our themes.
(unless we start writing settings to the html attribute too, which the user didn't enable before.)
the currently it would have to be
... :not([it-theme]) ... ,
... [it-theme="default"] ... ,

i didn't write the themes, nor the previous commit
d727f82
on a long term we can move the themes to JS, except for the background color.
to deduplicate and reduce CSS overhead

[zFishStick]

Hiii @ImprovedTube , don't worry! Yes, i tested every scenario, which are four in total (System: light/dark and Extension: light/dark). All of them now seems to suit properly with the color of the other buttons.
Thank you for the merge, as long I have some time, i can manage to move the theme implementation to JavaScript, or if someone is up to help is appreciated 💯