icons for channels

.dist/channel.js

@@ -304,22 +304,22 @@ class Channel {
             const myhtml = document.createElement("span");
             myhtml.textContent = this.name;
             if (this.type === 0) {
-                const decoration = document.createElement("b");
+                const decoration = document.createElement("img");
-                decoration.textContent = "#";
+                decoration.src = "/icons/channel.svg";
                 div.appendChild(decoration);
-                decoration.classList.add("space");
+                decoration.classList.add("space", "svgtheme");
             }
             else if (this.type === 2) { //
-                const decoration = document.createElement("b");
+                const decoration = document.createElement("img");
-                decoration.textContent = "🕪";
+                decoration.src = "/icons/voice.svg";
                 div.appendChild(decoration);
-                decoration.classList.add("spacee");
+                decoration.classList.add("spacee", "svgtheme");
             }
             else if (this.type === 5) { //
-                const decoration = document.createElement("b");
+                const decoration = document.createElement("img");
-                decoration.textContent = "📣";
+                decoration.src = "/icons/announce.svg";
                 div.appendChild(decoration);
-                decoration.classList.add("spacee");
+                decoration.classList.add("spacee", "svgtheme");
             }
             else {
                 console.log(this.type);
@@ -908,3 +908,47 @@ class Channel {
 }
 Channel.setupcontextmenu();
 export { Channel };
+function fixsvgtheme() {
+    const things = document.getElementsByClassName("svgtheme");
+    //console.log(things);
+    if (things.length) {
+        const thing = window.getComputedStyle(things[0]).color.replace("rgb(", "").replace(")", "").split(",");
+        //sconsole.log(thing);
+        const r = +thing[0] / 255;
+        const g = +thing[1] / 255;
+        const b = +thing[2] / 255;
+        const max = Math.max(r, g, b);
+        const min = Math.min(r, g, b);
+        const l = (max + min) / 2;
+        let s;
+        let h;
+        if (max !== min) {
+            if (l <= .5) {
+                s = (max - min) / (max + min);
+            }
+            else {
+                s = (max - min) / (2.0 - max - min);
+            }
+            if (r === max) {
+                h = (g - b) / (max - min);
+            }
+            else if (g === max) {
+                h = 2 + (b - r) / (max - min);
+            }
+            else if (b === max) {
+                h = 4 + (r - g) / (max - min);
+            }
+        }
+        else {
+            s = 0;
+            h = 0;
+        }
+        const rot = Math.floor(h * 60) + "deg";
+        const invert = .5 - (s / 2) + "";
+        const brightness = Math.floor((l * 200)) + "%";
+        document.documentElement.style.setProperty('--rot', rot);
+        document.documentElement.style.setProperty('--invert', invert);
+        document.documentElement.style.setProperty('--brightness', brightness);
+    }
+}
+setInterval(fixsvgtheme, 100);

webpage/channel.ts

@@ -317,20 +317,20 @@ class Channel{
             const myhtml=document.createElement("span");
             myhtml.textContent=this.name;
             if(this.type===0){
-                const decoration=document.createElement("b");
+                const decoration=document.createElement("img");
-                decoration.textContent="#"
+                decoration.src="/icons/channel.svg";
                 div.appendChild(decoration)
-                decoration.classList.add("space");
+                decoration.classList.add("space","svgtheme");
             }else if(this.type===2){//
-                const decoration=document.createElement("b");
+                const decoration=document.createElement("img");
-                decoration.textContent="🕪"
+                decoration.src="/icons/voice.svg";
                 div.appendChild(decoration)
-                decoration.classList.add("spacee");
+                decoration.classList.add("spacee","svgtheme");
             }else if(this.type===5){//
-                const decoration=document.createElement("b");
+                const decoration=document.createElement("img");
-                decoration.textContent="📣"
+                decoration.src="/icons/announce.svg";
                 div.appendChild(decoration)
-                decoration.classList.add("spacee");
+                decoration.classList.add("spacee","svgtheme");
             }else{
                 console.log(this.type)
             }
@@ -899,3 +899,44 @@ class Channel{
 }
 Channel.setupcontextmenu();
 export {Channel};
+function fixsvgtheme(){
+    const things=document.getElementsByClassName("svgtheme");
+    //console.log(things);
+    if(things.length){
+        const thing=window.getComputedStyle(things[0]).color.replace("rgb(","").replace(")","").split(",");
+        //sconsole.log(thing);
+        const r=+thing[0]/255;
+        const g=+thing[1]/255;
+        const b=+thing[2]/255;
+        const max=Math.max(r,g,b);
+        const min=Math.min(r,g,b);
+        const l=(max+min)/2;
+
+        let s:number;
+        let h:number;
+        if(max!==min){
+            if(l<=.5){
+                s=(max-min)/(max+min);
+            }else{
+                s=(max-min)/(2.0-max-min);
+            }
+            if(r===max){
+                h=(g-b)/(max-min);
+            }else if(g===max){
+                h=2+(b-r)/(max-min);
+            }else if(b===max){
+                h=4+(r-g)/(max-min);
+            }
+        }else{
+            s=0;
+            h=0;
+        }
+        const rot=Math.floor(h*60)+"deg";
+        const invert=.5-(s/2)+"";
+        const brightness=Math.floor((l*200))+"%";
+        document.documentElement.style.setProperty('--rot', rot);
+        document.documentElement.style.setProperty('--invert', invert);
+        document.documentElement.style.setProperty('--brightness', brightness);
+    }
+}
+setInterval(fixsvgtheme,100);

webpage/icons/announce.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180"><g style="fill:red;stroke:red;stroke-opacity:1"><path d="m25 73 54-11 46-25v106l-40-24-60-11z" style="fill:red;fill-opacity:1;stroke:red;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" transform="matrix(1.18556 0 0 1.1554 -26 -14)"/><path d="m32 90 13 2-5 32 38 7 5-32 14 2-7 46-66-11 7-46z" style="fill:red;fill-opacity:1;stroke:red;stroke-width:3.84496;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" transform="matrix(1.18556 0 0 1.1554 -26 -14)"/></g><path d="M180-7a57 57 0 0 1-17 97" style="fill:none;fill-rule:evenodd;stroke:red;stroke-width:7.62765;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1" transform="matrix(1.53155 -.25819 .26493 1.49259 -143 72)"/></svg>

webpage/icons/channel.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180"><path d="m117 165 13-148M47 165 60 17m108 46H20m140 65H12" style="fill:red;stroke:red;stroke-width:24.2188;stroke-linecap:round;stroke-dasharray:none"/></svg>

webpage/icons/voice.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 180 180"><defs><path id="a" d="M93 77C64 68 48 36 57 7c6-16 19-30 36-35" style="fill:none;fill-rule:evenodd;stroke:red;stroke-width:14.722;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1"/></defs><path d="M5 51h26l35-26h20v130H66l-35-25-26 1z" style="fill:red;stroke-width:1.35311;stroke-dasharray:none"/><use xlink:href="#a" style="fill:none;fill-rule:evenodd;stroke:red;stroke-width:14.722;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1" transform="matrix(-1.1895 0 0 -1.1728 210 120)"/><use xlink:href="#a" style="fill:none;fill-rule:evenodd;stroke:red;stroke-width:11.9801;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1" transform="matrix(-1.37947 0 0 -1.52719 246 128)"/></svg>

webpage/style.css

@@ -328,6 +328,7 @@ p {
 	font-size: .25in;
 	display: inline-block;
 	text-indent: .05in;
+	width: .2in;
 }
 
 .spacee {
@@ -335,6 +336,7 @@ p {
 	margin-right: .02in;
 	font-size: .15in;
 	display: inline-block;
+	width: .2in;
 }
 
 #channels p2 {
@@ -1510,3 +1512,7 @@ span {
 form div{
 	width:100%;
 }
+.svgtheme{
+	color: var(--icon-color);
+	filter:hue-rotate(var(--rot)) invert(var(--invert)) brightness(var(--brightness));
+}

webpage/themes.css

@@ -53,6 +53,7 @@
 	--link: #8888ff;
 	--discovery-bg: #37373b;
 	--message-jump:#7678b0;
+	--icon-color:white;
 }
 .WHITE-theme {
 	color-scheme: light;
@@ -104,6 +105,7 @@
 	--link: #3333ee;
 	--discovery-bg: #c6c6d8;
 	--message-jump:#ccceff;
+	--icon-color:black;
 }
 .Light-theme {
 	color-scheme: light;
@@ -163,4 +165,5 @@
 	--link: #5566cc;
 	--discovery-bg: #c6c6d8;
 	--message-jump:#ccceff;
+	--icon-color:black;
 }