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 functions.js fix YT dark theme #2253

Merged
merged 13 commits into from
May 9, 2024
Merged

Update functions.js fix YT dark theme #2253

merged 13 commits into from
May 9, 2024

Conversation

raszpl
Copy link
Contributor

@raszpl raszpl commented May 8, 2024

No description provided.

@raszpl
Copy link
Contributor Author

raszpl commented May 8, 2024

almost there, but
this.storage.theme = 'dark';
of course doesnt store to storage, it only writes to temporary ImprovedTube.storage. Hmm we need a way of sending settings from \web-accessible back to \extension context, need to use ImprovedTube.messages.send({});

@raszpl
Copy link
Contributor Author

raszpl commented May 8, 2024

hi! :) @raszpl

and --ytd-searchbox-text-color needs defining for all styles, defaults to black or white depending on cookie, probably should be same color as normal text in all themes

--yt-searchbox-text-color: var(--yt-primary-text-color); appears 6 times in styles.css

yes, but we need ytd-searchbox-text-color. Wait a minute, I remember this conversation happening already? aaah #2143 its another one of those yt- to ytd- renamed color variables

And this should require html[it-theme]?

looks like simple rename will suffice
https://github.com/code-charity/youtube/blob/da7935a8576d1bde54852b3876897ce45e786678/js%26css/extension/www.youtube.com/styles.css#L885C11-L885C58
to
--ytd-searchbox-text-color: var(--yt-primary-text-color);

will suffice
I looked at other YT color variable declarations in CSS and they have lots of --yt- and --ytd- , You should probably do a list to check if YT didnt rename more of them.

(and, i forgot, are you sure about the " [dark]"-lines? otherwise everything would have to be !important; ?)`

yes, the " [dark]" rules override inside "#ytd-masthead [dark]"

yes! shortcuts need reload. idk why. somehow it was easier to let them run for once when set (confusing)

because nobody bothered writing code doing live updates :) Ill do it some time later eventually as the way it "works" now is gross, might make users think its broken like I thought.

ImprovedTube.messages.send
might be repurposed

dont know how useful that will be for other functionality

not afraid of the cookie either f6=. (i should just have reviewed your PR more since issue with it happened years ago.) (the shortcut could additionally store an f6previously in the cookie, to go back to where it came from, if pressed ever again.)

I think I finally have working Theme switching and dark shortcut working, will update this pull in a sec. It does involve manipulating cookie after all

our themes: default can be called "none" (default appears in my active settings now, when going back form another theme)

the way I rewrote it now extension picks up what default is based on cookie at the time of switching themes.
So user with dark YT cookie will open themes and see youtubesDark as default with second option being youtubesLight. Switching to youtubesLight, exiting Themes and going back will display those reversed with youtubesLight being default now.

Or make it a dropdown "YouTube's Theme Setting": Device setting | Light | Dark (Reading & indicating the F6 cookie only once.) (Web accessible files can run even without currently being on youtube.com)

I was considering this, but I dont think extension can read youtube.com cookie without at least one tab being open on youtube.com

@ImprovedTube
Copy link
Member

ImprovedTube commented May 8, 2024

hi! :) @raszpl

and --ytd-searchbox-text-color needs defining for all styles, defaults to black or white depending on cookie, probably should be same color as normal text in all themes

--yt-searchbox-text-color: var(--yt-primary-text-color); appears 6 times in styles.css


And this should be html[it-theme] :

/*------------------------------------------------------------------------------
YT hardcoded CSS for DARK/light mode switching
Need HTML in front to make CSS rule more specific than one they are overiding
------------------------------------------------------------------------------*/
html .yt-spec-icon-shape,
html .yt-spec-icon-badge-shape--style-overlay .yt-spec-icon-badge-shape__icon,
html .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--text,
html .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal,
html .yt-video-attribute-view-model__title {
color: var(--yt-spec-text-primary);
}
/*Dark colors get highlight*/
html .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {
background-color: rgba(255, 255, 255, 0.1);
}
/*Light colors get shadow, overrides above highlight*/
html[it-theme=desert] .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal,
html[it-theme=plain] .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal,
html:not([dark]):not([it-theme=black]):not([it-theme=sunset]):not([it-theme=night]):not([it-theme=dawn]) .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {
background-color: rgba(0, 0, 0, 0.05) !important;
}
/*subscribe button when not subscribed*/
html .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled {
color: var(--yt-spec-base-background);
background-color: var(--yt-spec-text-primary);
}
/*override bell and thumbs up icons hardcoded colors inside SVG data*/
/*bell icon*/
html .yt-spec-button-shape-next__icon ytd-lottie-player svg path[fill-opacity="1"] {
fill: var(--yt-spec-text-primary);
}
/*thumbs up icon*/

(and, i forgot, are you sure about the " [dark]"-lines? otherwise everything would have to be !important; ?)`


yes! shortcuts need reload. idk why. somehow it was easier to let them run for once when set (confusing)

ImprovedTube.messages.send

yay (that will leave a reference to it in shortcuts.js, which might be repurposed)


yes, the (youtube's-)dark shortcut code, was rather testing. Was made not to stick before to avoid cookies: (https://github.com/code-charity/youtube/blob/4f18256ab1b7fda9320084824d69e2a039a6b804/content-scripts/website-context/youtube-features/shortcuts.js#L614C1-L622C3).

Not afraid of the cookie either f6=, if this shortcut shall stick. (i should just have reviewed your PR more since issues with it happened years ago.) (the shortcut could store another cookie setByImprovedTubeShortcut=dark priorToThat=device so if the shortcut is pressed ever again it can go back where it was, if not changed inbetween)

(While now, without cookie we set [dark] everytime, which might helps a few users who remove all cookies, but otherwise isnt required)


Our themes: default can be called none or off
(default appears in my active settings now, when going back form another theme)

And we can still remove/replace the "Youtube's dark theme" button (to either replace it with this screenshot: ) - Or, if we finish your cookie code to also make the shortcut (or more one day), then we can make it a dropdown "YouTube's Theme Setting": Device setting | Light | Dark ( - Not required to be a stored feature. Reading F6 cookie to indicate the current and changing it only once Web accessible files can run even without currently being on youtube.com). (Next to adding/removing dark attribute as GUI feedback (so niceer than youtube's which will reload)


do you still want to inject all theme's CSS with JS?

most CSS variable appear exactly 6 times (some currently have irregular counts in styles.css:)

	 12		 --yt-swatch-textbox-bg:
	 12		 --yt-swatch-text:
	 12		 --yt-swatch-primary:
	 12		 --yt-swatch-primary-darker:
	 12		 --yt-swatch-logo-override:
	 12		 --yt-swatch-input-text:
	 12		 --yt-swatch-important-text:
	 12		 --yt-swatch-icon-color:
	 12		 --yt-spec-icon-inactive:
	 11		 --yt-spec-general-background-c:
	 11		 --yt-spec-general-background-b:
	 11		 --yt-spec-general-background-a:
	  8		 --yt-spec-text-primary:
	  7		 --yt-spec-text-secondary:				
	  5		 --yt-lightsource-section4-color:
	  5		 --yt-lightsource-section3-color:
	  5		 --yt-lightsource-section2-color:
	  5		 --yt-lightsource-secondary-title-color:
	  5		 --yt-lightsource-primary-title-color:				
				--ytd-watch-split-pane-sidebar-background-color:
 			--ytd-watch-card-secondary-text-color:
 			--ytd-watch-card-album-header-background:
 			--ytd-video-publish-date-color:
 			--ytd-video-game-watch-card-logo-color:
 			--ytd-vat-notice-text:
 			--ytd-transcript-toolbar-text:
 			--ytd-transcript-toolbar-background-color:
 			--ytd-transcript-cue-hover-background-color:
 			--ytd-toggle-color:
 			--ytd-survey-button-color:
 			--ytd-sponsorships-background-color-focus:
 			--ytd-simple-badge-color:
 			--ytd-shopping-product-info:
 			--ytd-searchbox-legacy-button-icon-color:
 			--ytd-searchbox-legacy-button-hover-color:
 			--ytd-searchbox-legacy-button-hover-border-color:
 			--ytd-searchbox-legacy-button-focus-color:
 			--ytd-searchbox-legacy-button-color:
 			--ytd-searchbox-legacy-button-border-color:
 			--ytd-searchbox-legacy-border-shadow-color:
 			--ytd-searchbox-legacy-border-color:
 			--ytd-searchbox-border-color:
 			--ytd-searchbox-background:
 			--ytd-owner-badge-color:
 			--ytd-offer-background-color:
 			--ytd-moderation-panel-hover:
 			--ytd-moderation-panel-comment-text:
 			--ytd-moderation-panel-comment-metadata-text:
 			--ytd-moderation-panel-background:
 			--ytd-moderation-icon-hover-color:
 			--ytd-moderation-icon-color:
 			--ytd-comment-text-color:
 			--ytd-comment-metadata-text-color:
 			--ytd-collection-badge-color:
 			--ytd-badge-disabled-color:
 			--ytd-badge-background:
 			--ytd-backstage-video-link-background-color:
 			--ytd-backstage-metadata-text-color:
 			--ytd-backstage-image-alert-color:
 			--ytd-backstage-creationbox-text-color:
 			--ytd-backstage-creationbox-input-text-color:
 			--ytd-backstage-creationbox-inactive-color:
 			--ytd-backstage-creationbox-disabled-button-text-color:
 			--ytd-backstage-creationbox-disabled-button-color:
 			--ytd-backstage-creationbox-background-color:
 			--ytd-backstage-creationbox-background-color-focus:
 			--ytd-backstage-cancel-color:
 			--ytd-backstage-cancel-background-color:
 			--ytd-backstage-attachment-icon-hover-color:
 			--ytd-ad-badge-text-color:
 			--yt-transcript-background:
 			--yt-thumbnail-placeholder-color:
 			--yt-tertiary-text-color:
 			--yt-swatch-header-primary:
 			--yt-subscribe-button-text-color:
 			--yt-std-surface-400:
 			--yt-std-surface-300:
 			--yt-std-surface-200:
 			--yt-std-body-300:
 			--yt-std-body-200:
 			--yt-std-body-100:
 			--yt-spec-wordmark-text:
 			--yt-spec-verified-badge-background:
 			--yt-spec-touch-response:
 			--yt-spec-themed-green:
 			--yt-spec-themed-blue:
 			--yt-spec-text-primary-inverse:
 			--yt-spec-text-disabled:
 			--yt-spec-suggested-action:
 			--yt-spec-selected-nav-text:
 			--yt-spec-raised-background:
 			--yt-spec-menu-background:
 			--yt-spec-inverted-background:
 			--yt-spec-inactive-text-button-focus-outline:
 			--yt-spec-icon-disabled:
 			--yt-spec-icon-active-other:
 			--yt-spec-filled-button-text:
 			--yt-spec-filled-button-focus-outline:
 			--yt-spec-error-background:
 			--yt-spec-call-to-action:
 			--yt-spec-call-to-action-inverse:
 			--yt-spec-call-to-action-button-focus-outline:
 			--yt-spec-button-chip-background-hover:
 			--yt-spec-brand-text-button-focus-outline:
 			--yt-spec-brand-subscribe-button-background:
 			--yt-spec-brand-link-text:
 			--yt-spec-brand-icon-inactive:
 			--yt-spec-brand-icon-active:
 			--yt-spec-brand-button-background:
 			--yt-spec-brand-background-solid:
 			--yt-spec-brand-background-secondary:
 			--yt-spec-brand-background-primary:
 			--yt-spec-base-background:
 			--yt-spec-badge-chip-background:
 			--yt-spec-10-percent-layer:
 			--yt-simple-menu-header-background:
 			--yt-sidebar-background:
 			--yt-secondary-text-color:
 			--yt-searchbox-text-color:
 			--yt-primary-text-color:
 			--yt-primary-disabled-button-text-color:
 			--yt-primary-color:
 			--yt-playlist-title-text:
 			--yt-playlist-message-text:
 			--yt-playlist-message-text-hover:
 			--yt-playlist-background-item:
 			--yt-playlist-background-header:
 			--yt-placeholder-text:
 			--yt-placeholder-text-color:
 			--yt-paper-button-ink-color:
 			--yt-metadata-color:
 			--yt-menu-hover-backgound-color:
 			--yt-menu-focus-background-color:
 			--yt-material-searchbox-text-color:
 			--yt-material-searchbox-inset:
 			--yt-material-searchbox-inactive:
 			--yt-material-searchbox-inactive-shadow:
 			--yt-material-searchbox-active:
 			--yt-material-searchbox-active-shadow:
 			--yt-main-app-background:
 			--yt-main-app-background-tmp:
 			--yt-live-chat-tertiary-text-color:
 			--yt-live-chat-secondary-text-color:
 			--yt-live-chat-primary-text-color:
 			--yt-live-chat-picker-button-color:
 			--yt-live-chat-disabled-icon-button-color:
 			--yt-live-chat-action-panel-background-color:
 			--yt-live-chat-action-panel-background-color-transparent:
 			--yt-item-section-header-color:
 			--yt-icon-hover-color:
 			--yt-icon-disabled-color:
 			--yt-icon-color:
 			--yt-icon-active-color:
 			--yt-hovered-text-color:
 			--yt-guide-entry-hover-background-color:
 			--yt-guide-background:
 			--yt-formatted-string-emoji-size:
 			--yt-formatted-string-deemphasize-color:
 			--yt-featured-channel-title-text-color:
 			--yt-expand-color:
 			--yt-endpoint-color:
 			--yt-disabled-text-color:
 			--yt-dialog-background:
 			--yt-copyright-text:
 			--yt-commentbox-border-inactive:
 			--yt-commentbox-border-active:
 			--yt-chat-bubble-self-border-color:
 			--yt-chat-bubble-self-background-color:
 			--yt-chat-bubble-other-border-color:
 			--yt-chat-bubble-other-background-color:
 			--yt-channel-owner:
 			--yt-channel-header-background:
 			--yt-button-text-color:
 			--yt-button-payment-text-color:
 			--yt-brand-color:
 			--yt-border-color:
 			--yt-blue-suggestive:
 			--yt-app-background:
 			--yt-alert-background:
 			--paper-toggle-button-unchecked-bar-color:
 			--paper-menu-color:
 			--paper-menu-background-color:
 			--paper-listbox-color:
 			--paper-listbox-background-color:
 			--paper-dialog-background-color:

@ImprovedTube
Copy link
Member

yay! a PR with 7+ files changed

And this should be html[it-theme] :

meant your hardcoded "CSS for DARK/light switching

@ImprovedTube
Copy link
Member

is this a time to remember that f6 can have 5 different values and you wrote code for it? 😅

(the shortcut could store another cookie setByImprovedTubeShortcut=dark priorToThat=device so if the shortcut is pressed ever again it can go back where it was, if not changed inbetween)

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

(none = device theme preference)

)

@raszpl
Copy link
Contributor Author

raszpl commented May 8, 2024

Thats all.

automagically picks up Dark cookie on load if there was no theme set

shortcutDarkTheme just sends the signal up the chain to switch dark/light theme

light theme doesnt really exist, its just a placeholder for a signal. It does live theme change ([dark] deletion), saves F6 light cookie and deletes itself

dark is normal permanent theme

@raszpl
Copy link
Contributor Author

raszpl commented May 8, 2024

6 values for f6= (80000 80001 400 401 1 none)

do you remember what they all meant? I remember discovering it, but cant find the post now

@ImprovedTube
Copy link
Member

1 list view  
400 dark
401 dark & list view
80000 light 
80001 light & list view
none = device preference (dark or light) 

so we have to respect/carry on device preference none

and grid/list view. you started with that here:

let cookie = this.getPrefCookieValueByName('f6');
// f6 stores more than Theme. Treat it like hex number, we are only allowed to add/remove 0x80000 (light theme) and 0x400 (dark theme).
if (cookie && !isNaN(cookie)) {
// valid f6
let negation = parseInt(cookie, 16) & parseInt(80400, 16);
cookie = (parseInt(cookie, 16) - negation); // remove 80000 and 400
cookie = cookie ^ (darkCookie ? parseInt(400, 16) : 0); // apply optional darkCookie
cookie = cookie ? cookie.toString(16) : null; // back to hex, 0 means we want null to remove f6 cookie instead
} else {
// missing or corrupted f6, fully overwrite
cookie = darkCookie ? 400 : null;
}
this.setPrefCookieValueByName('f6', cookie);
};

and when changing it, through shortcut, can remember it, with two more variables (in storage or cookie)

setByImprovedTubeShortcut=dark priorToThat=device so if the shortcut is pressed ever again it can go back where it was, if not changed inbetween)

@raszpl
Copy link
Contributor Author

raszpl commented May 8, 2024

yeah I found #2105
done, ready for testing :)

@ImprovedTube ImprovedTube merged commit 64c94a5 into code-charity:master May 9, 2024
@raszpl raszpl deleted the patch-1 branch May 9, 2024 02:11
@raszpl
Copy link
Contributor Author

raszpl commented May 9, 2024

Now find some bugs in there for me to fix X-)

ImprovedTube added a commit that referenced this pull request May 9, 2024
@ImprovedTube
Copy link
Member

...And there is another shortcut/button already:
#2161


(

I was considering this, but I dont think extension can read youtube.com cookie without at least one tab being open on youtube.com

just to be complete https://developer.chrome.com/docs/extensions/reference/api/cookies )

@raszpl
Copy link
Contributor Author

raszpl commented May 9, 2024

#2253 (comment)

YT shows Ambient/Cinematics option only with Dark cookie present, switching to Light removes dark cookie

/*update: cinematics */
html[it-theme=black] #cinematics,
html[it-theme=desert] #cinematics {display:none !important}
html[it-theme=dawn] #cinematics,
html[it-theme=sunset] #cinematics,
html[it-theme=night] #cinematics {mix-blend-mode: lighten !important}
html[it-theme=plain] #cinematics {filter:invert(100%) !important; mix-blend-mode: darken !important}

it should all be converted to CSS with no manual style manipulation anyway :)

ImprovedTube added a commit that referenced this pull request May 9, 2024
@ImprovedTube
Copy link
Member

Just in case you like another little @raszpl puzzle around satus.js & colors
somebody asked to make the custom theme button reflect the colors set

.satus-label--custom-theme {
background: linear-gradient(to left, #e52d27, #b31217);

#1969

@raszpl
Copy link
Contributor Author

raszpl commented May 9, 2024

somebody asked to make the custom theme button reflect the colors set

I also asked for same thing :] but didnt think about how to implement it

almost forgot, we need locale for youtubesLight like the one for youtubesDark [YouTube's dark]
and first two themes probably cant be moved around, at least the first one should always stay on top so empty theme is picked up as default.

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