diff --git a/.dist/channel.js b/.dist/channel.js
index 6eb2261..b47d660 100644
--- a/.dist/channel.js
+++ b/.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");
- decoration.textContent = "#";
+ const decoration = document.createElement("img");
+ 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");
- decoration.textContent = "🕪";
+ const decoration = document.createElement("img");
+ 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");
- decoration.textContent = "📣";
+ const decoration = document.createElement("img");
+ 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);
diff --git a/webpage/channel.ts b/webpage/channel.ts
index e6e3601..77c3889 100644
--- a/webpage/channel.ts
+++ b/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");
- decoration.textContent="#"
+ const decoration=document.createElement("img");
+ 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");
- decoration.textContent="🕪"
+ const decoration=document.createElement("img");
+ 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");
- decoration.textContent="📣"
+ const decoration=document.createElement("img");
+ 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);
diff --git a/webpage/icons/announce.svg b/webpage/icons/announce.svg
new file mode 100644
index 0000000..77a9108
--- /dev/null
+++ b/webpage/icons/announce.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/webpage/icons/channel.svg b/webpage/icons/channel.svg
new file mode 100644
index 0000000..4ed51df
--- /dev/null
+++ b/webpage/icons/channel.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/webpage/icons/voice.svg b/webpage/icons/voice.svg
new file mode 100644
index 0000000..fc42db7
--- /dev/null
+++ b/webpage/icons/voice.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/webpage/style.css b/webpage/style.css
index 03235cd..763eccf 100644
--- a/webpage/style.css
+++ b/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));
+}
diff --git a/webpage/themes.css b/webpage/themes.css
index 1d3971a..aa46983 100644
--- a/webpage/themes.css
+++ b/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;
}