Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update styles.css make desert theme search button icon visible #2172

Merged
merged 5 commits into from
Apr 27, 2024
Merged

Conversation

raszpl
Copy link
Contributor

@raszpl raszpl commented Apr 8, 2024

+more work to make CSS overrides [dark] independent

@ImprovedTube
Copy link
Member

ImprovedTube commented Apr 9, 2024

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
Copy link
Contributor Author

raszpl commented Apr 9, 2024

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
Copy link
Member

Screenshot_660
Screenshot_661

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
Copy link
Member

( ...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
Copy link
Contributor Author

raszpl commented Apr 10, 2024

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
Copy link
Contributor Author

raszpl commented Apr 10, 2024

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
Copy link
Member

ImprovedTube commented Apr 11, 2024

💡


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
Copy link
Contributor Author

raszpl commented Apr 11, 2024

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
Copy link
Contributor Author

raszpl commented Apr 20, 2024

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.

reformatted cinematics so its clearer what is happening. rejuggled rest of selectors to always tart with it-theme, added last missing [dark]
@ImprovedTube ImprovedTube merged commit 6d6d50e into code-charity:master Apr 27, 2024
@raszpl raszpl deleted the patch-8 branch April 28, 2024 05:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants