finish implementation

Extensions/combined/popup.html

@@ -77,19 +77,29 @@
         <span class="slider" />
         <span class="switchLabel">Disable vote submission</span>
       </label>
-      <label class="switch">
+      <br />
+      <label class="switch" data-hover="Use custom colors in new pages.">
         <input type="checkbox" id="colored_bar" />
         <span class="slider" />
         <span class="switchLabel">Colorize ratio bar</span>
       </label>
       <br />
-      <label class="switch">
-        <input type="checkbox" id="color_thumbs" />
+      <label class="switch" data-hover="Use custom colors in new pages.">
+        <input type="checkbox" id="colored_thumbs" />
         <span class="slider" />
         <span class="switchLabel">Colorize thumbs</span>
       </label>
       <br />
-      <!-- TODO: color theme menu select -->
+      <div class="custom-select">
+        <label for="color_theme">Color theme:</label>
+        <select name="color_theme" id="color_theme">
+          <option value="classic" id="color_theme_classic">Classic</option>
+          <option value="accessible" id="color_theme_accessible">Accessible</option>
+          <option value="neon" id="color_theme_neon">Neon</option>
+        </select>
+        <span id="color_theme_example_like" style="display: inline-block; vertical-align: text-top; width: 1em; height: 1em;">&nbsp;</span>
+        <span id="color_theme_example_dislike"  style="display: inline-block; vertical-align: text-top; width: 1em; height: 1em;">&nbsp;</span>
+      </div>
       
       <!-- <br />
       <label class="switch">

Extensions/combined/popup.js

@@ -51,7 +51,7 @@ document
 document
   .getElementById("color_theme")
   .addEventListener("click", (ev) => {
-    chrome.storage.sync.set({ colorTheme: ev.target.checked });
+    chrome.storage.sync.set({ colorTheme: ev.target.value });
   });
 
 /*   Advanced Toggle   */
@@ -167,7 +167,8 @@ function handleColoredBarChangeEvent(value) {
 
 function handleColorThemeChangeEvent(value) {
   config.colorTheme = value;
-  // TODO: check selected menu item
+  document.getElementById("color_theme_example_like").style.backgroundColor = getColorFromTheme(value, true);
+  document.getElementById("color_theme_example_dislike").style.backgroundColor = getColorFromTheme(value, false);
 }
 
 (async function getStatus() {
@@ -190,6 +191,34 @@ function handleColorThemeChangeEvent(value) {
   }
 })();
 
+function getColorFromTheme(colorTheme, voteIsLike) {
+  let colorString;
+  switch(colorTheme) {
+    case 'accessible':
+      if (voteIsLike === true) {
+        colorString = 'dodgerblue';
+      } else {
+        colorString = 'gold';
+      }
+      break;
+    case 'neon':
+      if (voteIsLike === true) {
+        colorString = 'aqua';
+      } else {
+        colorString = 'magenta';
+      }
+      break;
+    case 'classic':
+    default:
+      if (voteIsLike === true) {
+        colorString = 'lime';
+      } else {
+        colorString = 'red';
+      }
+  }
+  return colorString;
+}
+
 
 /* popup-script.js
 document.querySelector('#login')

Extensions/combined/src/bar.js

@@ -1,6 +1,9 @@
 import { getButtons } from "./buttons";
 import { likesDisabledState, extConfig } from "./state";
-import { cLog } from "./utils";
+import {
+  cLog,
+  getColorFromTheme,
+} from "./utils";
 
 function createRateBar(likes, dislikes) {
   if (!likesDisabledState) {
@@ -15,6 +18,12 @@ function createRateBar(likes, dislikes) {
       likes + dislikes > 0 ? (likes / (likes + dislikes)) * 100 : 50;
 
     if (!rateBar) {
+      let colorLikeStyle = '';
+      let colorDislikeStyle = '';
+      if (extConfig.coloredBar) {
+        colorLikeStyle = '; background-color: ' + getColorFromTheme(true);
+        colorDislikeStyle = '; background-color: ' + getColorFromTheme(false);
+      }
       (
         document.getElementById("menu-container") ||
         document.querySelector("ytm-slim-video-action-bar-renderer")
@@ -25,11 +34,11 @@ function createRateBar(likes, dislikes) {
             <div class="ryd-tooltip-bar-container">
                <div
                   id="ryd-bar-container"
-                  style="width: 100%; height: 2px;"
+                  style="width: 100%; height: 2px;${colorDislikeStyle}"
                   >
                   <div
                      id="ryd-bar"
-                     style="width: ${widthPercent}%; height: 100%"
+                     style="width: ${widthPercent}%; height: 100%${colorLikeStyle}"
                      ></div>
                </div>
             </div>
@@ -45,12 +54,11 @@ function createRateBar(likes, dislikes) {
       document.querySelector(
         "#ryd-dislike-tooltip > #tooltip"
       ).innerHTML = `${likes.toLocaleString()}&nbsp;/&nbsp;${dislikes.toLocaleString()}`;
+      if (extConfig.coloredBar) {
+        document.getElementById("ryd-bar-container").style.backgroundColor = getColorFromTheme(true);
+        document.getElementById("ryd-bar").style.backgroundColor = getColorFromTheme(false);
+      }
     }
-  
-  if (extConfig.coloredBar) {
-    // TODO: colorize bar
-  }
-  
   } else {
     cLog("removing bar");
     let ratebar = document.getElementById("ryd-bar-container");

Extensions/combined/src/state.js

@@ -1,6 +1,12 @@
 import { getLikeButton, getDislikeButton, getButtons } from "./buttons";
 import { createRateBar } from "./bar";
-import { getBrowser, getVideoId, cLog, numberFormat } from "./utils";
+import { 
+  getBrowser,
+  getVideoId,
+  cLog,
+  numberFormat,
+  getColorFromTheme,
+} from "./utils";
 import { sendVideoIds } from "./events";
 
 //TODO: Do not duplicate here and in ryd.background.js
@@ -102,7 +108,8 @@ function processResponse(response, storedData) {
   storedData.likes = getLikeCountFromButton() || parseInt(response.likes);
   createRateBar(storedData.likes, storedData.dislikes);
   if (extConfig.coloredThumbs === true) {
-    // TODO: colorize thumbs
+    getLikeButton().style.color = getColorFromTheme(true);
+    getDislikeButton().style.color = getColorFromTheme(false);
   }
 }
 
@@ -163,6 +170,39 @@ function initializeDisableVoteSubmission() {
   });
 }
 
+function initializeColoredThumbs() {
+  getBrowser().storage.sync.get(['coloredThumbs'], (res) => {
+    if (res.coloredThumbs === undefined) {
+      getBrowser().storage.sync.set({coloredThumbs: false});
+    }
+    else {
+      extConfig.coloredThumbs = res.coloredThumbs;
+    }
+  });
+}
+
+function initializeColoredBar() {
+  getBrowser().storage.sync.get(['coloredBar'], (res) => {
+    if (res.coloredBar === undefined) {
+      getBrowser().storage.sync.set({coloredBar: false});
+    }
+    else {
+      extConfig.coloredBar = res.coloredBar;
+    }
+  });
+}
+
+function initializeColorTheme() {
+  getBrowser().storage.sync.get(['colorTheme'], (res) => {
+    if (res.colorTheme === undefined) {
+      getBrowser().storage.sync.set({colorTheme: false});
+    }
+    else {
+      extConfig.colorTheme = res.colorTheme;
+    }
+  });
+}
+
 export {
   isMobile,
   isVideoDisliked,

Extensions/combined/src/utils.js

@@ -99,4 +99,11 @@ function getColorFromTheme(voteIsLike) {
   return colorString;
 }
 
-export { numberFormat, getBrowser, getVideoId, isVideoLoaded, cLog }
+export {
+  numberFormat,
+  getBrowser,
+  getVideoId,
+  isVideoLoaded,
+  cLog,
+  getColorFromTheme,
+}