Fixed themes for new YouTube

code-charity · Oct 25, 2019 · a4d2316 · a4d2316
1 parent 57dcf4e
commit a4d2316
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 23 deletions.
diff --git a/youtube/css/themes/default.css b/youtube/css/themes/default.css
@@ -1,4 +1,4 @@
-[it-default-dark-theme=true]:not([it-base-on-system-color-scheme=dark]):not([it-base-on-system-color-scheme=light])
+[legacy-youtube=true][it-default-dark-theme=true]:not([it-base-on-system-color-scheme=dark]):not([it-base-on-system-color-scheme=light])
 {
     --yt-swatch-header-primary: rgb(34,38,42)!important;
     --yt-swatch-primary: rgb(34,38,42)!important;
@@ -11,20 +11,20 @@
     --yt-swatch-icon-color: rgba(136,136,136,1)!important;
 }
 
-[it-default-dark-theme=true]:not([it-base-on-system-color-scheme=dark]):not([it-base-on-system-color-scheme=light]) #masthead-search-term
+[legacy-youtube=true][it-default-dark-theme=true]:not([it-base-on-system-color-scheme=dark]):not([it-base-on-system-color-scheme=light]) #masthead-search-term
 {
     border: 1px solid #444!important;
     border-right: none!important;
 }
-[it-default-dark-theme=true]:not([it-base-on-system-color-scheme=dark]):not([it-base-on-system-color-scheme=light]) html[youtube-version=old] body
+[legacy-youtube=true][it-default-dark-theme=true]:not([it-base-on-system-color-scheme=dark]):not([it-base-on-system-color-scheme=light])[youtube-version=old] body
 {
     height: auto;
 }
-[it-default-dark-theme=true]:not([it-base-on-system-color-scheme=dark]):not([it-base-on-system-color-scheme=light])
+[legacy-youtube=true][it-default-dark-theme=true]:not([it-base-on-system-color-scheme=dark]):not([it-base-on-system-color-scheme=light])
 {
     background: var(--yt-swatch-primary-darker)!important;
 }
-[it-default-dark-theme=true]:not([it-base-on-system-color-scheme=dark]):not([it-base-on-system-color-scheme=light]) ytd-masthead
+[legacy-youtube=true][it-default-dark-theme=true]:not([it-base-on-system-color-scheme=dark]):not([it-base-on-system-color-scheme=light]) ytd-masthead
 {
     background: #232323!important;
 
@@ -37,7 +37,7 @@
     --yt-swatch-logo-override: rgb(255, 255, 255)!important;
     --yt-swatch-icon-color: rgba(136, 136, 136, 1)!important;
 }
-[it-default-dark-theme=true]:not([it-base-on-system-color-scheme=dark]):not([it-base-on-system-color-scheme=light]):not([style-scope]):not(.style-scope) :not([style-scope]):not(.style-scope)
+[legacy-youtube=true][it-default-dark-theme=true]:not([it-base-on-system-color-scheme=dark]):not([it-base-on-system-color-scheme=light]):not([style-scope]):not(.style-scope) :not([style-scope]):not(.style-scope)
 {
     --yt-live-chat-action-panel-background-color: #282828;
     --yt-live-chat-action-panel-background-color-transparent: rgba(40, 40, 40, .8);
@@ -48,7 +48,7 @@
     --yt-live-chat-picker-button-color: var(--yt-live-chat-tertiary-text-color);
     --yt-formatted-string-emoji-size: 24px;
 }
-[it-default-dark-theme=true]:not([it-base-on-system-color-scheme=dark]):not([it-base-on-system-color-scheme=light]):not([style-scope]):not(.style-scope)
+[legacy-youtube=true][it-default-dark-theme=true]:not([it-base-on-system-color-scheme=dark]):not([it-base-on-system-color-scheme=light]):not([style-scope]):not(.style-scope)
 {
     --ytd-searchbox-border-color: hsla(0, 0%, 53.3%, .2);
     --ytd-searchbox-legacy-border-color: hsl(0, 0%, 18.82%);
@@ -175,7 +175,7 @@
     --yt-blue-suggestive: transparent;
 }
 
-[it-default-dark-theme=true]:not([it-base-on-system-color-scheme=dark]):not([it-base-on-system-color-scheme=light])[youtube-version=old] body
+[legacy-youtube=true][it-default-dark-theme=true]:not([it-base-on-system-color-scheme=dark]):not([it-base-on-system-color-scheme=light])[youtube-version=old] body
 {
     height: auto!important;
 
@@ -200,20 +200,20 @@
         --yt-swatch-icon-color: rgba(136,136,136,1)!important;
     }
 
-    [it-default-dark-theme=true][it-base-on-system-color-scheme=dark] #masthead-search-term
+    [legacy-youtube=true][it-default-dark-theme=true][it-base-on-system-color-scheme=dark] #masthead-search-term
     {
         border: 1px solid #444!important;
         border-right: none!important;
     }
-    [it-default-dark-theme=true][it-base-on-system-color-scheme=dark] html[youtube-version=old] body
+    [legacy-youtube=true][it-default-dark-theme=true][it-base-on-system-color-scheme=dark] html[youtube-version=old] body
     {
         height: auto;
     }
-    [it-default-dark-theme=true][it-base-on-system-color-scheme=dark]
+    [legacy-youtube=true][it-default-dark-theme=true][it-base-on-system-color-scheme=dark]
     {
         background: var(--yt-swatch-primary-darker)!important;
     }
-    [it-default-dark-theme=true][it-base-on-system-color-scheme=dark] ytd-masthead
+    [legacy-youtube=true][it-default-dark-theme=true][it-base-on-system-color-scheme=dark] ytd-masthead
     {
         background: #232323!important;
 
@@ -226,7 +226,7 @@
         --yt-swatch-logo-override: rgb(255, 255, 255)!important;
         --yt-swatch-icon-color: rgba(136, 136, 136, 1)!important;
     }
-    [it-default-dark-theme=true][it-base-on-system-color-scheme=dark]:not([style-scope]):not(.style-scope) :not([style-scope]):not(.style-scope)
+    [legacy-youtube=true][it-default-dark-theme=true][it-base-on-system-color-scheme=dark]:not([style-scope]):not(.style-scope) :not([style-scope]):not(.style-scope)
     {
         --yt-live-chat-action-panel-background-color: #282828;
         --yt-live-chat-action-panel-background-color-transparent: rgba(40, 40, 40, .8);
@@ -237,7 +237,7 @@
         --yt-live-chat-picker-button-color: var(--yt-live-chat-tertiary-text-color);
         --yt-formatted-string-emoji-size: 24px;
     }
-    [it-default-dark-theme=true][it-base-on-system-color-scheme=dark]:not([style-scope]):not(.style-scope)
+    [legacy-youtube=true][it-default-dark-theme=true][it-base-on-system-color-scheme=dark]:not([style-scope]):not(.style-scope)
     {
         --ytd-searchbox-border-color: hsla(0, 0%, 53.3%, .2);
         --ytd-searchbox-legacy-border-color: hsl(0, 0%, 18.82%);
@@ -364,7 +364,7 @@
         --yt-blue-suggestive: transparent;
     }
 
-    [it-default-dark-theme=true][it-base-on-system-color-scheme=dark][youtube-version=old] body
+    [legacy-youtube=true][it-default-dark-theme=true][it-base-on-system-color-scheme=dark][youtube-version=old] body
     {
         height: auto!important;
 
@@ -390,20 +390,20 @@
         --yt-swatch-icon-color: rgba(136,136,136,1)!important;
     }
 
-    [it-default-dark-theme=true][it-base-on-system-color-scheme=light] #masthead-search-term
+    [legacy-youtube=true][it-default-dark-theme=true][it-base-on-system-color-scheme=light] #masthead-search-term
     {
         border: 1px solid #444!important;
         border-right: none!important;
     }
-    [it-default-dark-theme=true][it-base-on-system-color-scheme=light] html[youtube-version=old] body
+    [legacy-youtube=true][it-default-dark-theme=true][it-base-on-system-color-scheme=light] html[youtube-version=old] body
     {
         height: auto;
     }
-    [it-default-dark-theme=true][it-base-on-system-color-scheme=light]
+    [legacy-youtube=true][it-default-dark-theme=true][it-base-on-system-color-scheme=light]
     {
         background: var(--yt-swatch-primary-darker)!important;
     }
-    [it-default-dark-theme=true][it-base-on-system-color-scheme=light] ytd-masthead
+    [legacy-youtube=true][it-default-dark-theme=true][it-base-on-system-color-scheme=light] ytd-masthead
     {
         background: #232323!important;
 
@@ -416,7 +416,7 @@
         --yt-swatch-logo-override: rgb(255, 255, 255)!important;
         --yt-swatch-icon-color: rgba(136, 136, 136, 1)!important;
     }
-    [it-default-dark-theme=true][it-base-on-system-color-scheme=light]:not([style-scope]):not(.style-scope) :not([style-scope]):not(.style-scope)
+    [legacy-youtube=true][it-default-dark-theme=true][it-base-on-system-color-scheme=light]:not([style-scope]):not(.style-scope) :not([style-scope]):not(.style-scope)
     {
         --yt-live-chat-action-panel-background-color: #282828;
         --yt-live-chat-action-panel-background-color-transparent: rgba(40, 40, 40, .8);
@@ -427,7 +427,7 @@
         --yt-live-chat-picker-button-color: var(--yt-live-chat-tertiary-text-color);
         --yt-formatted-string-emoji-size: 24px;
     }
-    [it-default-dark-theme=true][it-base-on-system-color-scheme=light]:not([style-scope]):not(.style-scope)
+    [legacy-youtube=true][it-default-dark-theme=true][it-base-on-system-color-scheme=light]:not([style-scope]):not(.style-scope)
     {
         --ytd-searchbox-border-color: hsla(0, 0%, 53.3%, .2);
         --ytd-searchbox-legacy-border-color: hsl(0, 0%, 18.82%);
@@ -554,7 +554,7 @@
         --yt-blue-suggestive: transparent;
     }
 
-    [it-default-dark-theme=true][it-base-on-system-color-scheme=light][youtube-version=old] body
+    [legacy-youtube=true][it-default-dark-theme=true][it-base-on-system-color-scheme=light][youtube-version=old] body
     {
         height: auto!important;
 

diff --git a/youtube/js/features/themes.js b/youtube/js/features/themes.js
@@ -88,8 +88,27 @@ ImprovedTube.theme = function() {
         this.isset(ImprovedTube.storage.black_theme) && ImprovedTube.storage.black_theme !== false
     ) {
         document.documentElement.setAttribute('dark', '');
+
+        if (ImprovedTube.storage.default_dark_theme === true) {
+            var wait = setInterval(function() {
+                if (document.body) {
+                    clearInterval(wait);
+
+                    document.body.setAttribute('dark', '');
+                }
+            });
+        } else {
+            var wait = setInterval(function() {
+                if (document.body) {
+                    clearInterval(wait);
+
+                    document.body.removeAttribute('dark', '');
+                }
+            });
+        }
+
         document.documentElement.setAttribute('it-theme', 'true');
     } else {
-        document.documentElement.removeAttribute('it-theme',);
+        document.documentElement.removeAttribute('it-theme', );
     }
 };