Fix issue 2044

[Viktor-3]

Add a light/dark mode icon on the left side of the search icon.
When click on the icon, it switches between the light theme and the dark theme.
The icon also changes to sun or moon, depends on the current theme color.
Four of the existing themes are categorized as light themes and the other four as dark themes.
The custom theme is none of them and is not affected by any of them. It also remembers which theme color was used previously.
When switching back to the light/dark mode, it switches to the previously used light/dark theme.
https://github.com/code-charity/youtube/assets/37882796/4fe8a187-02f0-4439-b522-b8c574de7c36

[ImprovedTube]

Wow! @Viktor-3 The video even has motivational music.

[ImprovedTube]

• we can also consider the brightness of the background color set for the custom theme: primary color, to determine if that's bright or dark ( @Viktor-3 )

---

fix-issue-2044.mp4

did you see this? @Meluhan677

---

Edit: This could be synced with the youtube site theme? Maybe somebody would like the extensions light but youtube dark, but unlikely the other way around. And we could make a shortcut for your button.

[Viktor-3]

I, too, doubt people would want the extension dark and YouTube light at the same time. However, I don't reject this possibility and a solution I can think of is to add a "keep same color" option(like a slide button) in the setting.

---

• we can also consider the brightness of the background color set for the custom theme: primary color, to determine if that's bright or dark ( @Viktor-3 )

I have thought about this while fixing the issue. I asked Google about it and I found that the luminance value can be an indicator of whether the theme color should be considered light or dark. However, I wasn't sure what was the best way to implement it. I had two options: the first option was that when using the custom theme, the light/dark switch would change the theme color to some kind of the opposite color. But then I thought this "opposite color" could look very weird and ruin visibility. Another better option I thought was to switch back to the previously selected dark/light color, depending on the current custom color of course.

[ImprovedTube]

brightness

oh, i forgot thats not standard, nor solved in your code:

const colorLuminance=(R,G,B,a)=>
( (G*0.7152+R*0.2125 +B*0.0722)*(a!==undefined?a:1);
//  R-, G-, B-brightnesses are not perceived equal by human eyes, which are best with green (wavelength inbetween red & blue):
	https://improvedtube.com/chromostereopsis.html#:~:text=Brightness%20equalizing
// Yet blue keeps awake (reduces the release of melatonin the most). 
     So for melatonin the porportion is very different and rather:	       	     
const colorMelatonin=(R,G,B,a)=>((B*5 + G*2 + R)/8 *(a!==undefined?a:1);

• We should indicate both values in the color picker, when picking a custom background color

---

const backgroundIsBright=isBright(window.getComputedStyle(document.body).getPropertyValue('background-color'));
console.log("bright background?",backgroundIsBright);

const isBright=colorString=>{const rgb=parseColor(colorString);
	if(rgb){const luminance=colorLuminance(rgb[0],rgb[1],rgb[2],rgb[3]);return brightness>=125}
		else{console.error("color is formatted wrong. [Or the css includes unexpected whitespace & your browser is old]",colorString);return null;}    
};

//Required when there are 4 possible formats: 
const parseColor=(colorString)=>{  
    if(colorString.startsWith("#")){
        const hexToRgb=(hex)=>{
            hex=hex.substring(1);
            if(hex.length===3) hex=hex.replace(/(.)/g,"$1$1");
            const r=parseInt(hex.substring(0,2),16);
            const g=parseInt(hex.substring(2,4),16);
            const b=parseInt(hex.substring(4,6),16);
            return [r,g,b];
        };   return hexToRgb(colorString);
    }else if(colorString.startsWith("rgba")){
        const parseRgba=(color)=>{
            const match=color.match(/(\d+(\.\d+)?)/g);
            return match.slice(0,4).map(c=>parseFloat(c));
        };   return parseRgba(colorString);
    }else if(colorString.startsWith("rgb")){
        const parseRgb=(color)=>color.match(/(\d+(\.\d+)?)/g).map(c=>parseFloat(c));
       	 	return parseRgb(colorString);
    }else if(colorString.startsWith("hsl")){
        const parseHsl=(color)=>{
            const match=color.match(/(\d+(\.\d+)?)/g);
            const [h,s,l]=match.map(c=>parseFloat(c));
            const c=(1-Math.abs(2*l-1))*s;
            const x=c*(1-Math.abs(((h/60)%2)-1));
            const m=l-c/2;
            let r=0,g=0,b=0;
            if(0<=h&&h<60){r=c; g=x;}
            else if(60<=h&&h<120){r=x; g=c;}
            else if(120<=h&&h<180){g=c; b=x;}
            else if(180<=h&&h<240){g=x; b=c;}
            else if(240<=h&&h<300){r=x; b=c;}
            else if(300<=h&&h<360){r=c; b=x;}
            return [(r+m)*255,(g+m)*255,(b+m)*255];
        };	return parseHsl(colorString);
    }else if(/^[a-zA-Z]{3,}/.test(colorString) && colorString.length <= 14){ 
			const namedColors={"aliceblue":[240,248,255],"antiquewhite":[250,235,215],"aqua":[0,255,255],"aquamarine":[127,255,212],"azure":[240,255,255],"beige":[245,245,220],"bisque":[255,228,196],"black":[0,0,0],"blanchedalmond":[255,235,205],"blue":[0,0,255],"blueviolet":[138,43,226],"brown":[165,42,42],"burlywood":[222,184,135],"cadetblue":[95,158,160],"chartreuse":[127,255,0],"chocolate":[210,105,30],"coral":[255,127,80],"cornflowerblue":[100,149,237],"cornsilk":[255,248,220],"crimson":[220,20,60],"cyan":[0,255,255],"darkblue":[0,0,139],"darkcyan":[0,139,139],"darkgoldenrod":[184,134,11],"darkgray":[169,169,169],"darkgreen":[0,100,0],"darkgrey":[169,169,169],"darkkhaki":[189,183,107],"darkmagenta":[139,0,139],"darkolivegreen":[85,107,47],"darkorange":[255,140,0],"darkorchid":[153,50,204],"darkred":[139,0,0],"darksalmon":[233,150,122],"darkseagreen":[143,188,143],"darkslateblue":[72,61,139],"darkslategray":[47,79,79],"darkslategrey":[47,79,79],"darkturquoise":[0,206,209],"darkviolet":[148,0,211],"deeppink":[255,20,147],"deepskyblue":[0,191,255],"dimgray":[105,105,105],"dimgrey":[105,105,105],"dodgerblue":[30,144,255],"firebrick":[178,34,34],"floralwhite":[255,250,240],"forestgreen":[34,139,34],"fuchsia":[255,0,255],"gainsboro":[220,220,220],"ghostwhite":[248,248,255],"gold":[255,215,0],"goldenrod":[218,165,32],"gray":[128,128,128],"green":[0,128,0],"greenyellow":[173,255,47],"grey":[128,128,128],"honeydew":[240,255,240],"hotpink":[255,105,180],"indianred":[205,92,92],"indigo":[75,0,130],"ivory":[255,255,240],"khaki":[240,230,140],"lavender":[230,230,250],"lavenderblush":[255,240,245],"lawngreen":[124,252,0],"lemonchiffon":[255,250,205],"lightblue":[173,216,230],"lightcoral":[240,128,128],"lightcyan":[224,255,255],"lightgoldenrodyellow":[250,250,210],"lightgray":[211,211,211],"lightgreen":[144,238,144],"lightgrey":[211,211,211],"lightpink":[255,182,193],"lightsalmon":[255,160,122],"lightseagreen":[32,178,170],"lightskyblue":[135,206,250],"lightslategray":[119,136,153],"lightslategrey":[119,136,153],"lightsteelblue":[176,196,222],"lightyellow":[255,255,224],"lime":[0,255,0],"limegreen":[50,205,50],"linen":[250,240,230],"magenta":[255,0,255],"maroon":[128,0,0],"mediumaquamarine":[102,205,170],"mediumblue":[0,0,205],"mediumorchid":[186,85,211],"mediumpurple":[147,112,219],"mediumseagreen":[60,179,113],"mediumslateblue":[123,104,238],"mediumspringgreen":[0,250,154],"mediumturquoise":[72,209,204],"mediumvioletred":[199,21,133],"midnightblue":[25,25,112],"mintcream":[245,255,250],"mistyrose":[255,228,225],"moccasin":[255,228,181],"navajowhite":[255,222,173],"navy":[0,0,128],"oldlace":[253,245,230],"olive":[128,128,0],"olivedrab":[107,142,35],"orange":[255,165,0],"orangered":[255,69,0],"orchid":[218,112,214],"palegoldenrod":[238,232,170],"palegreen":[152,251,152],"paleturquoise":[175,238,238],"palevioletred":[219,112,147],"papayawhip":[255,239,213],"peachpuff":[255,218,185],"peru":[205,133,63],"pink":[255,192,203],"plum":[221,160,221],"powderblue":[176,224,230],"purple":[128,0,128],"rebeccapurple":[102,51,153],"red":[255,0,0],"rosybrown":[188,143,143],"royalblue":[65,105,225],"saddlebrown":[139,69,19],"salmon":[250,128,114],"sandybrown":[244,164,96],"seagreen":[46,139,87],"seashell":[255,245,238],"sienna":[160,82,45],"silver":[192,192,192],"skyblue":[135,206,235],"slateblue":[106,90,205],"slategray":[112,128,144],"slategrey":[112,128,144],"snow":[255,250,250],"springgreen":[0,255,127],"steelblue":[70,130,180],"tan":[210,180,140],"teal":[0,128,128],"thistle":[216,191,216],"tomato":[255,99,71],"turquoise":[64,224,208],"violet":[238,130,238],"wheat":[245,222,179],"white":[255,255,255],"whitesmoke":[245,245,245],"yellow":[255,255,0],"yellowgreen":[154,205,50]};
         return namedColors[colorString.toLowerCase()]||null;
    }
};

We have related code to replace / tidy:

• our dark mode extension https://github.com/code-charity/dark-mode/blob/aa9a37555a58fa6ebba5049e6a0ddc56ea17c0de/content-scripts/dynamic-theme.js#L380-L420
  • and the lines above, which are similar to:

    youtube/menu/satus.js

    Lines 2617 to 2622 in 86fb775

    	>>> COLOR:
    	----------------------------------------------------------------
    	# String to array
    	# RGB to HSL
    	# HUE to RGB
    	# HSL to RGB