From 20ce193b2ff97cae9c5bcb14a6ff71c06f2a34e7 Mon Sep 17 00:00:00 2001 From: AnkitaPihulkar <2024si96552@wilp.bits-pilani.ac.in> Date: Wed, 7 Jan 2026 21:33:43 +0530 Subject: [PATCH 1/2] Fix unreadable text in dark theme by aligning with YouTube design tokens --- .../www.youtube.com/night-mode/night-mode.css | 124 ++++++++++++++++-- 1 file changed, 112 insertions(+), 12 deletions(-) diff --git a/js&css/extension/www.youtube.com/night-mode/night-mode.css b/js&css/extension/www.youtube.com/night-mode/night-mode.css index 99b63ff2d..0deaf656c 100644 --- a/js&css/extension/www.youtube.com/night-mode/night-mode.css +++ b/js&css/extension/www.youtube.com/night-mode/night-mode.css @@ -3,6 +3,7 @@ ---------------------------------------------------------------- # Bluelight # Dim +# YouTube text color FIX (FINAL) --------------------------------------------------------------*/ /*-------------------------------------------------------------- @@ -22,16 +23,12 @@ html[it-bluelight]:not([it-bluelight='0']) .html5-video-player.ytp-fullscreen { position: fixed !important; top: 0 !important; left: 0 !important; - visibility: hidden !important; - width: 100% !important; height: 100vh !important; - pointer-events: none !important; } - /*-------------------------------------------------------------- # DIM --------------------------------------------------------------*/ @@ -41,12 +38,9 @@ html[it-bluelight]:not([it-bluelight='0']) .html5-video-player.ytp-fullscreen { z-index: 2147483645 !important; top: 0 !important; left: 0 !important; - width: 100% !important; height: 100vh !important; - pointer-events: none !important; - background: #000 !important; } @@ -55,17 +49,123 @@ html[it-bluelight]:not([it-bluelight='0']) .html5-video-player.ytp-fullscreen { z-index: 2147483645 !important; top: 0 !important; left: 0 !important; - visibility: hidden !important; - width: 100% !important; height: 100vh !important; - pointer-events: none !important; - background: #000 !important; } .html5-video-player.ytp-fullscreen #it-dim-player { visibility: visible !important; -} \ No newline at end of file +} + +/*============================================================== + ImprovedTube – YouTube TEXT COLOR FIX (PERMANENT) +==============================================================*/ + +/*------------------------- + LIGHT THEME (DEFAULT) +--------------------------*/ +ytd-app:not([dark]) { + --yt-spec-text-primary: #0f0f0f !important; + --yt-spec-text-secondary: #606060 !important; +} + +/*------------------------- + DARK / NIGHT / BLACK THEMES +--------------------------*/ +ytd-app[dark], +html[it-theme=black] ytd-app, +html[it-theme=night] ytd-app, +html[it-theme=dawn] ytd-app, +html[it-theme=sunset] ytd-app { + --yt-spec-text-primary: #ffffff !important; + --yt-spec-text-secondary: #cccccc !important; +} + +/*-------------------------------------------------------------- +# TITLES – FOLLOW YOUTUBE SYSTEM +--------------------------------------------------------------*/ + +.yt-lockup-metadata-view-model__title { + text-decoration: none; + word-break: break-word; + padding-right: 24px; + color: var(--yt-spec-text-primary) !important; +} + +/*-------------------------------------------------------------- +# VIDEO DESCRIPTION +--------------------------------------------------------------*/ + +ytd-watch-metadata #description, +ytd-watch-metadata ytd-text-inline-expander { + color: var(--yt-spec-text-primary) !important; +} + +ytd-watch-metadata a { + color: var(--yt-spec-call-to-action) !important; +} + +/*============================================================== + ImprovedTube – Remaining YouTube text variables FIX +==============================================================*/ + +/* ---------- LIGHT THEME ---------- */ +ytd-app:not([dark]) { + --yt-primary-text-color: #0f0f0f !important; + --yt-secondary-text-color: #606060 !important; + --yt-metadata-color: #606060 !important; + --yt-expand-color: #606060 !important; +} + +/* ---------- DARK / NIGHT / BLACK THEMES ---------- */ +ytd-app[dark], +html[it-theme=black] ytd-app, +html[it-theme=night] ytd-app, +html[it-theme=dawn] ytd-app, +html[it-theme=sunset] ytd-app { + --yt-primary-text-color: #ffffff !important; + --yt-secondary-text-color: #cccccc !important; + --yt-metadata-color: #cccccc !important; + --yt-expand-color: #cccccc !important; +} + +/*============================================================== + GLOBAL FALLBACK (IMPORTANT FOR SHORTS) +==============================================================*/ + +/* + Shorts UI can exist outside ytd-app. + These variables guarantee correct colors everywhere. +*/ + +html:not([dark]) { + --yt-primary-text-color: #0f0f0f; + --yt-secondary-text-color: #606060; +} + +html[dark], +html[it-theme=black], +html[it-theme=night], +html[it-theme=dawn], +html[it-theme=sunset] { + --yt-primary-text-color: #ffffff; + --yt-secondary-text-color: #cccccc; +} + +/*============================================================== + YouTube Shorts – FINAL FIX +==============================================================*/ + +/* Shorts titles */ +.shortsLockupViewModelHostOutsideMetadataTitle { + color: var(--yt-primary-text-color, var(--yt-spec-text-primary)) !important; +} + +/* Shorts metadata */ +.shortsLockupViewModelHostOutsideMetadataSubtitle, +.shortsLockupViewModelHostOutsideMetadata { + color: var(--yt-secondary-text-color, var(--yt-spec-text-secondary)) !important; +} From 5ce33472424ba007f6b3dd50232d669cb289d30a Mon Sep 17 00:00:00 2001 From: AnkitaPihulkar <2024si96552@wilp.bits-pilani.ac.in> Date: Thu, 8 Jan 2026 13:56:21 +0530 Subject: [PATCH 2/2] Fix dark theme text colors without overriding light theme defaults --- .../www.youtube.com/night-mode/night-mode.css | 51 +++---------------- 1 file changed, 8 insertions(+), 43 deletions(-) diff --git a/js&css/extension/www.youtube.com/night-mode/night-mode.css b/js&css/extension/www.youtube.com/night-mode/night-mode.css index 0deaf656c..25aa70898 100644 --- a/js&css/extension/www.youtube.com/night-mode/night-mode.css +++ b/js&css/extension/www.youtube.com/night-mode/night-mode.css @@ -63,18 +63,7 @@ html[it-bluelight]:not([it-bluelight='0']) .html5-video-player.ytp-fullscreen { /*============================================================== ImprovedTube – YouTube TEXT COLOR FIX (PERMANENT) ==============================================================*/ - -/*------------------------- - LIGHT THEME (DEFAULT) ---------------------------*/ -ytd-app:not([dark]) { - --yt-spec-text-primary: #0f0f0f !important; - --yt-spec-text-secondary: #606060 !important; -} - -/*------------------------- - DARK / NIGHT / BLACK THEMES ---------------------------*/ +/* ---------- DARK / NIGHT / BLACK THEMES ---------- */ ytd-app[dark], html[it-theme=black] ytd-app, html[it-theme=night] ytd-app, @@ -82,8 +71,14 @@ html[it-theme=dawn] ytd-app, html[it-theme=sunset] ytd-app { --yt-spec-text-primary: #ffffff !important; --yt-spec-text-secondary: #cccccc !important; + + --yt-primary-text-color: #ffffff !important; + --yt-secondary-text-color: #cccccc !important; + --yt-metadata-color: #cccccc !important; + --yt-expand-color: #cccccc !important; } + /*-------------------------------------------------------------- # TITLES – FOLLOW YOUTUBE SYSTEM --------------------------------------------------------------*/ @@ -108,43 +103,13 @@ ytd-watch-metadata a { color: var(--yt-spec-call-to-action) !important; } -/*============================================================== - ImprovedTube – Remaining YouTube text variables FIX -==============================================================*/ -/* ---------- LIGHT THEME ---------- */ -ytd-app:not([dark]) { - --yt-primary-text-color: #0f0f0f !important; - --yt-secondary-text-color: #606060 !important; - --yt-metadata-color: #606060 !important; - --yt-expand-color: #606060 !important; -} - -/* ---------- DARK / NIGHT / BLACK THEMES ---------- */ -ytd-app[dark], -html[it-theme=black] ytd-app, -html[it-theme=night] ytd-app, -html[it-theme=dawn] ytd-app, -html[it-theme=sunset] ytd-app { - --yt-primary-text-color: #ffffff !important; - --yt-secondary-text-color: #cccccc !important; - --yt-metadata-color: #cccccc !important; - --yt-expand-color: #cccccc !important; -} /*============================================================== GLOBAL FALLBACK (IMPORTANT FOR SHORTS) ==============================================================*/ -/* - Shorts UI can exist outside ytd-app. - These variables guarantee correct colors everywhere. -*/ - -html:not([dark]) { - --yt-primary-text-color: #0f0f0f; - --yt-secondary-text-color: #606060; -} +/*Fallback for dark/night themes when Shorts are rendered outside ytd-app */ html[dark], html[it-theme=black],