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.

Sign up for GitHub

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

themes.js hopefully last time #2133

Merged
merged 2 commits into from
Mar 30, 2024
Merged

themes.js hopefully last time #2133

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
34aea42
themes.js hopefully last time
raszpl Mar 30, 2024
68995be
styles.css overriding some YT hardcodes
raszpl Mar 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions js&css/extension/www.youtube.com/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2023,3 +2023,36 @@ html[data-system-color-scheme=light][it-theme=sunset][it-schedule=system_peferen
--yt-lightsource-primary-title-color: var(--yt-spec-text-primary) !important;
--yt-lightsource-secondary-title-color: var(--yt-spec-text-secondary) !important;
}

/*Fixing YT hardcoded CSS for DARK/light mode switching*/

html:not([dark]) .yt-spec-icon-badge-shape,
html:not([dark]) .yt-spec-icon-badge-shape__icon .yt-spec-icon-shape {
color: var(--yt-spec-text-primary) !important;
}

html[dark] .yt-spec-icon-badge-shape--style-overlay .yt-spec-icon-badge-shape__icon,
html[dark] .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--text,
html:not([dark]) .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--text {
color: var(--yt-spec-text-primary);
}
html[dark] .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {
color: var(--yt-spec-text-primary);
background-color: rgba(255, 255, 255, 0.1);
}
html:not([dark]) .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {
color: var(--yt-spec-text-primary);
background-color: rgba(0, 0, 0, 0.05);
}

/*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"],
html:not([dark]) .yt-spec-button-shape-next__icon ytd-lottie-player svg path[fill-opacity="1"] {
fill: var(--yt-spec-text-primary);
}
/*thumbs up icon*/
html .yt-spec-button-shape-next__icon ytd-lottie-player svg path[fill-opacity="0"],
html:not([dark]) .yt-spec-button-shape-next__icon ytd-lottie-player svg path[fill-opacity="0"] {
stroke: var(--yt-spec-text-primary);
}
7 changes: 6 additions & 1 deletion js&css/web-accessible/www.youtube.com/themes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,14 +115,19 @@ ImprovedTube.setTheme = function () {
break
}

// Video description has some hardcoded text color, remove it
for (const styled of Array.from(document.querySelectorAll(".yt-core-attributed-string--link-inherit-color[style]"))) {
styled.removeAttribute('style');
}

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.toString(16); // back to hex
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;
Expand Down