Update functions.js fix YT dark theme #2253

raszpl · 2024-05-08T02:41:53Z

No description provided.

raszpl · 2024-05-08T14:31:59Z

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 · 2024-05-08T18:23:39Z

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 · 2024-05-08T18:30:08Z

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] :

youtube/js&css/extension/www.youtube.com/styles.css

Lines 2064 to 2100 in da7935a

    
           /*------------------------------------------------------------------------------ 
        
           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 · 2024-05-08T18:58:30Z

yay! a PR with 7+ files changed

And this should be html[it-theme] :

meant your hardcoded "CSS for DARK/light switching

ImprovedTube · 2024-05-08T19:22:27Z

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 · 2024-05-08T19:43:47Z

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 · 2024-05-08T20:00:40Z

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 · 2024-05-08T20:47:16Z

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:

youtube/js&css/web-accessible/www.youtube.com/themes.js

Lines 115 to 129 in b80b77f

    
           	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 · 2024-05-08T21:01:02Z

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

raszpl · 2024-05-09T02:22:06Z

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

ImprovedTube · 2024-05-09T02:32:52Z

...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 · 2024-05-09T02:50:05Z

#2253 (comment)

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

youtube/js&css/extension/www.youtube.com/styles.css

Lines 635 to 641 in 64f89e5

    
           /*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 · 2024-05-09T03:19:23Z

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

youtube/menu/styles/themes.css

Lines 222 to 223 in 8f6ac27

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

#1969

raszpl · 2024-05-09T03:28:42Z

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.

raszpl added 3 commits May 8, 2024 04:41

Update functions.js YT dark theme requires existing YTD-MASTHEAD

705c4d2

Update themes.js fixing dark theme

7748aa0

Update shortcuts.js shortcutDarkTheme switching to native dark theme

5578cf1

raszpl mentioned this pull request May 8, 2024

Update themes.js ytd-masthead is handled by CSS now #2247

Merged

Update functions.js update menu theme when we remove it

3c5317a

raszpl added 5 commits May 8, 2024 20:32

Update satus.js delete default .radio selection

3cc077d

Update themes.js dynamic default theme

9c7299b

Update functions.js no need for additional theme calls

ef88ec4

Update themes.js cookies set only on dark/light theme

0fa865e

Update shortcuts.js switch light/dark theme

5ccdc79

raszpl added 2 commits May 8, 2024 21:04

Update init.js new message type 'set'

bac7951

Update satus.js let sections be functions

8acc734

Update core.js initialize theme in case YT is in Dark cookie mode

9f4bfa0

Update functions.js f6 cookie respect subscription list view

3fa9016

ImprovedTube merged commit 64c94a5 into code-charity:master May 9, 2024

raszpl deleted the patch-1 branch May 9, 2024 02:11

ImprovedTube added a commit that referenced this pull request May 9, 2024

#2253 your "bug" @raszpl

ab235f4

ImprovedTube added a commit that referenced this pull request May 9, 2024

#2253

b752af3

This was referenced Jun 16, 2024

Sync YouTube's native dark theme setting with ImprovedTube's #93

Closed

Youtube Homepage : Subscription doesn't save list or grid #342

Closed

raszpl mentioned this pull request Jun 29, 2024

Set black background from Youtube #1773

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update functions.js fix YT dark theme #2253

Update functions.js fix YT dark theme #2253

raszpl commented May 8, 2024

raszpl commented May 8, 2024

raszpl commented May 8, 2024 •

edited by ImprovedTube

Loading

ImprovedTube commented May 8, 2024 •

edited

Loading

ImprovedTube commented May 8, 2024

ImprovedTube commented May 8, 2024

raszpl commented May 8, 2024

raszpl commented May 8, 2024

ImprovedTube commented May 8, 2024

raszpl commented May 8, 2024 •

edited

Loading

raszpl commented May 9, 2024

ImprovedTube commented May 9, 2024

raszpl commented May 9, 2024

ImprovedTube commented May 9, 2024

raszpl commented May 9, 2024

Update functions.js fix YT dark theme #2253

Update functions.js fix YT dark theme #2253

Conversation

raszpl commented May 8, 2024

raszpl commented May 8, 2024

raszpl commented May 8, 2024 • edited by ImprovedTube Loading

ImprovedTube commented May 8, 2024 • edited Loading

ImprovedTube commented May 8, 2024

ImprovedTube commented May 8, 2024

raszpl commented May 8, 2024

raszpl commented May 8, 2024

ImprovedTube commented May 8, 2024

raszpl commented May 8, 2024 • edited Loading

raszpl commented May 9, 2024

ImprovedTube commented May 9, 2024

raszpl commented May 9, 2024

ImprovedTube commented May 9, 2024

raszpl commented May 9, 2024

raszpl commented May 8, 2024 •

edited by ImprovedTube

Loading

ImprovedTube commented May 8, 2024 •

edited

Loading

raszpl commented May 8, 2024 •

edited

Loading