More color schemes

Extensions/UserScript/Return Youtube Dislike.user.js

@@ -30,7 +30,8 @@ const extConfig = {
   disableVoteSubmission: false, // [true, false*] Disable like/dislike submission (Stops counting your likes and dislikes)
   coloredThumbs: false, // [true, false*] Colorize thumbs (Use custom colors for thumb icons)
   coloredBar: false, // [true, false*] Colorize ratio bar (Use custom colors for ratio bar)
-  colorTheme: "classic", // [classic*, accessible, neon] Color theme (red/green, blue/yellow, pink/cyan)
+  colorTheme: "watermelon", // [watermelon*, capetian, neon, hibiscus, nostalgia, custom] Color theme (red/green, blue/yellow, pink/cyan, green/megenta, blue/grey. Light/dark themes aware. Capetian and hibiscus are colorblind friendly)
+  colorThemeCustom: {like_dark: '#00ff00', dislike_dark: '#ff0000', like: '#008000', dislike: '#ff0000'}, // [rgb color codes] Custom color codes (works with "custom" color theme)
   numberDisplayFormat: "compactShort", // [compactShort*, compactLong, standard] Number format (For non-English locale users, you may be able to improve appearance with a different option. Please file a feature request if your locale is not covered)
   numberDisplayRoundDown: true, // [true*, false] Round down numbers (Show rounded down numbers)
   numberDisplayReformatLikes: false, // [true, false*] Re-format like numbers (Make likes and dislikes format consistent)
@@ -97,35 +98,57 @@ function getDislikeButton() {
   return getButtons().children[1];
 }
 
+cLog('initializing mutation observer');
 let mutationObserver = new Object();
-
-if (isShorts() && mutationObserver.exists !== true) {
-  cLog('initializing mutation observer')
-  mutationObserver.options = {
-    childList: false,
-    attributes: true,
-    subtree: false
-  };
-  mutationObserver.exists = true;
-  mutationObserver.observer = new MutationObserver( function(mutationList, observer) {
-    mutationList.forEach( (mutation) => {
-      if (mutation.type === 'attributes' && 
-        mutation.target.nodeName === 'TP-YT-PAPER-BUTTON' && 
-        mutation.target.id === 'button') {
-        cLog('Short thumb button status changed');
-        if (mutation.target.getAttribute('aria-pressed') === 'true') {
+mutationObserver.options = {
+  childList: false,
+  attributes: true,
+  subtree: false
+};
+mutationObserver.observer = new MutationObserver( function(mutationList, observer) {
+  mutationList.forEach( (mutation) => {
+    if (
+      isShorts() && 
+      mutation.type === "attributes" &&
+      mutation.target.nodeName === "TP-YT-PAPER-BUTTON" &&
+      mutation.target.id === "button"
+    ) {
+      // cLog('Short thumb button status changed');
+      if (extConfig.colorTheme === 'nostalgia') {
+        if (mutation.target.getAttribute("aria-pressed") === "true") {
+          mutation.target.style.color = getColorFromTheme(-1);
+        } else {
+          mutation.target.style.color = "unset";
+        }
+      } else {
+        if (mutation.target.getAttribute("aria-pressed") === "true") {
           mutation.target.style.color =
-            (mutation.target.parentElement.parentElement.id === 'like-button') ? 
-            getColorFromTheme(true) : getColorFromTheme(false);
+            mutation.target.parentElement.parentElement.id === "like-button"
+              ? getColorFromTheme(true)
+              : getColorFromTheme(false);
         } else {
-          mutation.target.style.color = 'unset';
+          mutation.target.style.color = "unset";
         }
-        return;
       }
-      cLog('unexpected mutation observer event: ' + mutation.target + mutation.type);
-    });
+      return;
+    }
+    if (
+      !isShorts() && 
+      extConfig.colorTheme === 'nostalgia' && 
+      mutation.type === "attributes" &&
+      mutation.target.nodeName === "YTD-TOGGLE-BUTTON-RENDERER"
+    ) {
+      let buttonDOM = mutation.target.querySelector('button#button');
+      if (buttonDOM) {
+        mutation.target.style.color = (buttonDOM.getAttribute("aria-pressed") === "true") ? getColorFromTheme(-1) : getColorFromTheme(true); 
+      }
+      return;
+    }
+    cLog(
+      "unexpected mutation observer event: " + mutation.target.nodeName + mutation.type
+    );
   });
-}
+});
 
 function isVideoLiked() {
   if (isMobile) {
@@ -266,7 +289,9 @@ function createRateBar(likes, dislikes) {
     let colorLikeStyle = "";
     let colorDislikeStyle = "";
     if (extConfig.coloredBar) {
-      colorLikeStyle = "; background-color: " + getColorFromTheme(true);
+      colorLikeStyle = (extConfig.colorTheme === 'nostalgia' && (isVideoDisliked() || isVideoLiked()) ) ?
+          "; background-color: " + getColorFromTheme(-1) :
+          "; background-color: " + getColorFromTheme(true);
       colorDislikeStyle = "; background-color: " + getColorFromTheme(false);
     }
 
@@ -305,7 +330,9 @@ function createRateBar(likes, dislikes) {
     if (extConfig.coloredBar) {
       document.getElementById("return-youtube-dislike-bar-container").style.backgroundColor =
         getColorFromTheme(false);
-      document.getElementById("return-youtube-dislike-bar").style.backgroundColor =
+      document.getElementById("return-youtube-dislike-bar").style.backgroundColor = 
+        (extConfig.colorTheme === 'nostalgia' && (isVideoDisliked() || isVideoLiked())) ?
+        getColorFromTheme(-1) :
         getColorFromTheme(true);
     }
   }
@@ -336,17 +363,39 @@ function setState() {
           if (isShorts()) { // for shorts, leave deactived buttons in default color
             let shortLikeButton = getLikeButton().querySelector('tp-yt-paper-button#button');
             let shortDislikeButton = getDislikeButton().querySelector('tp-yt-paper-button#button');
-            if (shortLikeButton.getAttribute('aria-pressed') === 'true') {
-              shortLikeButton.style.color = getColorFromTheme(true);
-            }
-            if (shortDislikeButton.getAttribute('aria-pressed') === 'true') {
-              shortDislikeButton.style.color = getColorFromTheme(false);
+            if (extConfig.colorTheme === 'nostalgia') {
+              if (shortLikeButton.getAttribute("aria-pressed") === "true") {
+                shortLikeButton.style.color = getColorFromTheme(-1);
+              }
+              if (shortDislikeButton.getAttribute("aria-pressed") === "true") {
+                shortDislikeButton.style.color = getColorFromTheme(-1);
+              }
+            } else {
+              if (shortLikeButton.getAttribute("aria-pressed") === "true") {
+                shortLikeButton.style.color = getColorFromTheme(true);
+              }
+              if (shortDislikeButton.getAttribute("aria-pressed") === "true") {
+                shortDislikeButton.style.color = getColorFromTheme(false);
+              }
             }
             mutationObserver.observer.observe(shortLikeButton, mutationObserver.options);
             mutationObserver.observer.observe(shortDislikeButton, mutationObserver.options);
           } else {
-            getLikeButton().style.color = getColorFromTheme(true);
-            getDislikeButton().style.color = getColorFromTheme(false);
+            if (extConfig.colorTheme === 'nostalgia') {
+              getLikeButton().style.color = getColorFromTheme(isVideoLiked() ? -1 : true);
+              getDislikeButton().style.color = getColorFromTheme(isVideoDisliked() ? -1 : true);
+              mutationObserver.observer.observe(
+                getLikeButton(),
+                mutationObserver.options
+              );
+              mutationObserver.observer.observe(
+                getDislikeButton(),
+                mutationObserver.options
+              );
+            } else {
+              getLikeButton().style.color = getColorFromTheme(true);
+              getDislikeButton().style.color = getColorFromTheme(false);
+            }
           }
         }
       }
@@ -487,28 +536,40 @@ function getNumberFormatter(optionSelect, userLocales) {
 
 function getColorFromTheme(voteIsLike) {
   let colorString;
+  const isDarkTheme = document.querySelector('html').getAttribute('dark') === 'true';
   switch (extConfig.colorTheme) {
-    case "accessible":
-      if (voteIsLike === true) {
-        colorString = "dodgerblue";
-      } else {
-        colorString = "gold";
-      }
+    case "capetian":
+      colorString = isDarkTheme ?
+        voteIsLike ? "dodgerblue" : "gold" :
+        voteIsLike ? "dodgerblue" : "goldenrod";
       break;
     case "neon":
-      if (voteIsLike === true) {
-        colorString = "aqua";
-      } else {
-        colorString = "magenta";
-      }
+      colorString = isDarkTheme ?
+        voteIsLike ? "aqua" : "magenta" :
+        voteIsLike ? "turquoise" : "magenta";
       break;
-    case "classic":
+    case "hibiscus":
+      colorString = isDarkTheme ?
+        voteIsLike ? "lime" : "magenta" :
+        voteIsLike ? "green" : "magenta";
+      break;
+    case "nostalgia":
+      colorString = (voteIsLike === -1) ?
+        isDarkTheme ? "#16a0ff" : "#0450dc" :
+        isDarkTheme ?
+        voteIsLike ? "#909090" : "#606060" :
+        voteIsLike ? "#909090" : "#cccccc";
+      break;
+    case "custom":
+      colorString = isDarkTheme ?
+        voteIsLike ? extConfig.colorThemeCustom.like_dark : extConfig.colorThemeCustom.dislike_dark :
+        voteIsLike ? extConfig.colorThemeCustom.like : extConfig.colorThemeCustom.dislike;
+      break;
+    case "watermelon":
     default:
-      if (voteIsLike === true) {
-        colorString = "lime";
-      } else {
-        colorString = "red";
-      }
+      colorString = isDarkTheme ?
+        voteIsLike ? "lime" : "red" :
+        voteIsLike ? "green" : "red";
   }
   return colorString;
 }

Extensions/combined/popup.css

@@ -68,9 +68,11 @@ button:hover {
   border-radius: 0.25rem;
 }
 
-.switch:before {
+.switch:before, .label-with-hover-tip:before {
   content: attr(data-hover);
   visibility: hidden;
+  opacity: 0;
+  transition: visibility 0.1s linear, opacity 0.1s linear;
   width: 250px;
   background-color: var(--secondary);
   border-radius: 0.5rem;
@@ -82,8 +84,26 @@ button:hover {
   top: 160%;
 }
 
-.switch:hover:before {
+.switch:hover:before, .label-with-hover-tip:hover:before {
   visibility: visible;
+  opacity: 1;
+}
+
+.fade-in {
+	opacity: 1;
+	animation-name: fadeInOpacity;
+	animation-iteration-count: 1;
+	animation-timing-function: ease-in;
+	animation-duration: 2s;
+}
+
+@keyframes fadeInOpacity {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
 }
 
 #advancedToggle {
@@ -123,6 +143,32 @@ button:hover {
   border: 2px solid var(--secondary);
   border-radius: 0.5rem;
   padding: 1rem;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+::-webkit-scrollbar {
+  width: 1rem;
+}
+
+::-webkit-scrollbar-track {
+  background: #111; /* color of the tracking area */
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #333; /* color of the scroll thumb */
+  border-radius: 1rem 0 0 1rem; /* roundness of the scroll thumb */
+  border-bottom: 0.25rem solid #111; /* creates padding around scroll thumb */
+  border-left: 0.25rem solid #111; /* creates padding around scroll thumb */
+  border-top: 0.25rem solid #111; /* creates padding around scroll thumb */
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: #f22; /* color of the scroll thumb */
+  border-radius: 1rem 0 0 1rem; /* roundness of the scroll thumb */
+  border-bottom: 0.25rem solid #111; /* creates padding around scroll thumb */
+  border-left: 0.25rem solid #111; /* creates padding around scroll thumb */
+  border-top: 0.25rem solid #111; /* creates padding around scroll thumb */
 }
 
 #advancedLegend {
@@ -142,6 +188,14 @@ button:hover {
   margin-bottom: 1rem;
 }
 
+.label-with-hover-tip {
+  position: relative;
+  display: inline-block;
+  width: 80px;
+  height: 17px;
+  margin-bottom: 1rem;
+}
+
 .switch:last-of-type {
   margin-bottom: 0;
 }
@@ -202,3 +256,16 @@ input:checked + .slider:before {
   flex-direction: column;
   align-items: center;
 }
+
+input.custom-color-picker {
+    width: 1em;
+    padding: 0px;
+    border: none;
+    height: 1em;
+    cursor: pointer;
+    -webkit-appearance: none;
+}
+
+input.custom-color-picker::-webkit-color-swatch-wrapper {
+	padding: 0;
+}