Update styles.css make desert theme search button icon visible

[raszpl]

+more work to make CSS overrides [dark] independent

[ImprovedTube]

html[it-theme=dawn][dark],

the original 3 lines look equivalent to all html[it-theme=dawn] {

html[it-theme=dawn] :not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]),
html[it-theme=dawn][data-system-color-scheme=dark][it-schedule=system_peference_dark],
html[it-theme=dawn][data-system-color-scheme=light][it-schedule=system_peference_light] {

[raszpl]

html[it-theme=dawn][dark],

the line you quoted doesnt exist in the patch, there is
html[it-theme=dawn] [dark]
and its required to override [dark] attribute on masthead

html[it-theme=dawn] :not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]), html[it-theme=dawn][data-system-color-scheme=dark][it-schedule=system_peference_dark], html[it-theme=dawn][data-system-color-scheme=light][it-schedule=system_peference_light] {

So all 4 can be commented unless different CSS shall be defined for each.

no, separate one with [dark] is required. The goal is #2174. With proper CSS there is no need to manipulate HTML adding/removing [dark] attributes, With current changes our themes work independent of [dark] attribute presence.

[data-system-color-scheme=light][it-schedule=system_peference_light]

I just got here :), I dont know what whoever made those CSS selectors had in mind and why they are there. There was some YT day/night dynamic switching theme in the past? still is? no idea what data-system-color-scheme or system_peference does ...edit: found "Night mode" hidden away next to settings. Thats too much for me to read and learn what it does right now.

[ImprovedTube]

the original 3 lines look equivalent to all html[it-theme=dawn] {

the 3 lines almost the same as html[it-theme=dawn] { (, unless the system-color-scheme=light but the schedule only enables the theme when it is dark or the other way around)
, so adding html[it-theme=dawn] [dark], can do nothing but overwrite that type of scheduling.

found "Night mode" hidden away next to settings.

yes 😃 mentioned here #2138 (comment)

I don't know why these features didnt stay in the same section (besides that operating systems have night mode). To me the theme previews look like maybe there also was an idea to keep working on it and have a dynamic theme changing all around the clock)

[ImprovedTube]

( ...more relevant

and i remembered only changing the attribute also doesn't stick when logged out of youtube

#2138 (comment)

), i dont know the percentage but assumable we a significant % who aren't logged-in to youtube. (And changing the cookie once sticks as said.)

[raszpl]

the 3 lines almost the same as html[it-theme=dawn] { (, unless the system-color-scheme=light but the schedule only enables the theme when it is dark or the other way around) , so adding html[it-theme=dawn] [dark], can do nothing but overwrite that type of scheduling.

ok now I get it! :). Like I said I dont know the purpose of it-schedule data-system-color-scheme and dont have mental capacity to learn about it, quickest way for me to make changes I needed right now was to leave it as is. Ideally then instead of adding
html[it-theme=dawn] [dark],
should be

html[it-theme=dawn]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]) [dark],
html[it-theme=dawn][data-system-color-scheme=dark][it-schedule=system_peference_dark] [dark],
html[it-theme=dawn][data-system-color-scheme=light][it-schedule=system_peference_light] [dark],
html[it-theme=dawn]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]),
html[it-theme=dawn][data-system-color-scheme=dark][it-schedule=system_peference_dark],
html[it-theme=dawn][data-system-color-scheme=light][it-schedule=system_peference_light] {

What Im trying to fix is situation where user has YT set to Dark but then sets ImproveTube theme:
1 set dark cookie, either manually or using YT native menu set YT dark mode
2 set 'dawn' theme
Some of the colors of dawn theme dont work when YT loads with [dark] in ytd-masthead element
<ytd-masthead id="masthead" logo-type="YOUTUBE_LOGO" slot="masthead" class="chunked masthead-finish" page-dark-theme="" role="banner" dark="" is-watch-page="">

The way I test it is I modified shortcutDarkTheme

ImprovedTube.shortcutDarkTheme = function () {
	if (document.documentElement.hasAttribute('dark')) {
		document.documentElement.removeAttribute('dark');
		document.querySelector('ytd-masthead')?.removeAttribute('dark');
	} else {
   	    document.documentElement.setAttribute('dark', '');
		document.querySelector('ytd-masthead').setAttribute('dark', '');
	}
};

and look for changes when forcing [dark] on different themes.
this is probably why #2174 (comment)

related /BTW: idk why, when a theme is set already, then our dark theme shortcut might only makes the search field black (
some colors are not overriding masthead

[raszpl]

oooor, we leave simple CSS and just keep changing [dark] attribute on both html and ytd-masthead elements in a reliable way on page load - up to now myColor()/myTheme() code was being called before ytd-masthead was present, thus color glitches in the header. We will need to divide themes into light and dark ones and apply/remove [dark] attributes accordingly.

[ImprovedTube]

💡

---

setting the header only seemed to fail in 2023 after switching so setting a background color then was a solution.

(besides that i remember #79 a4d2316 )
( and if it ever helps i guess one could for the first time correctly set any of the 6 values for f6= (80000 80001 400 401 1 none), only based on user input not on page load )

---

html[it-theme=dawn]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]) [dark],
html[it-theme=dawn][data-system-color-scheme=dark][it-schedule=system_peference_dark] [dark],
html[it-theme=dawn][data-system-color-scheme=light][it-schedule=system_peference_light] [dark],
html[it-theme=dawn]:not([it-schedule=system_peference_dark]):not([it-schedule=system_peference_light]),
html[it-theme=dawn][data-system-color-scheme=dark][it-schedule=system_peference_dark],
html[it-theme=dawn][data-system-color-scheme=light][it-schedule=system_peference_light] {

just thought thats makes no difference

[raszpl]

yes, at least the page's background color should be finial immediately.

setting the header only seemed to fail in 2023 after switching so setting in manually then was a solution.

by header you mean [dark] attribute ?

header color

I do know we need " [dark]" (with a space) to override YT putting [dark] in ytd-masthead element.

or !important after our header colors?

[raszpl]

found another one, .yt-video-attribute-view-model__title is hardcoded depending on cookie value
Light/no cookie:

.yt-video-attribute-view-model__title {
    color: #0f0f0f;

Dark cookie:

.yt-video-attribute-view-model__title {
    color: #f1f1f1;

example https://www.youtube.com/watch?v=dPs4kN9DRgw in Description link to Music references. Curently text "Aldebert raconte : La grande évasion, Pt. 12" is invisible with Desert theme and Dark F6 cookie.