diff --git a/js&css/extension/www.youtube.com/styles.css b/js&css/extension/www.youtube.com/styles.css index 2c58d1fca..889ace1e0 100644 --- a/js&css/extension/www.youtube.com/styles.css +++ b/js&css/extension/www.youtube.com/styles.css @@ -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); +} diff --git a/js&css/web-accessible/www.youtube.com/themes.js b/js&css/web-accessible/www.youtube.com/themes.js index a302a504d..8a67a5334 100644 --- a/js&css/web-accessible/www.youtube.com/themes.js +++ b/js&css/web-accessible/www.youtube.com/themes.js @@ -115,6 +115,11 @@ 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)) { @@ -122,7 +127,7 @@ ImprovedTube.setTheme = function () { 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;