Merge pull request #68 from ygg2/voice-css

Voice css
2024-10-26 16:17:57 -05:00 · 2024-10-26 16:17:57 -05:00 · a1bd2836ba
commit a1bd2836ba
parent f8e10a1e09 c5a34df847
28 changed files with 2262 additions and 2574 deletions
--- a/src/webpage/channel.ts
+++ b/src/webpage/channel.ts
@ -120,13 +120,14 @@ class Channel extends SnowFlake{
 		const div = document.createElement("div");
 		div.classList.add("invitediv");
 		const text = document.createElement("span");
+		text.classList.add("ellipsis");
 		div.append(text);
 		let uses = 0;
 		let expires = 1800;
 		const copycontainer = document.createElement("div");
 		copycontainer.classList.add("copycontainer");
 		const copy = document.createElement("span");
-		copy.classList.add("copybutton", "svgtheme", "svg-copy");
+		copy.classList.add("copybutton", "svgicon", "svg-copy");
 		copycontainer.append(copy);
 		copycontainer.onclick = _=>{
 			if(text.textContent){
@ -489,18 +490,18 @@ class Channel extends SnowFlake{

 			const decdiv = document.createElement("div");
 			const decoration = document.createElement("span");
-			decoration.classList.add("svgtheme", "collapse-icon", "svg-category");
+			decoration.classList.add("svgicon", "collapse-icon", "svg-category");
 			decdiv.appendChild(decoration);

 			const myhtml = document.createElement("p2");
+			myhtml.classList.add("ellipsis");
 			myhtml.textContent = this.name;
 			decdiv.appendChild(myhtml);
 			caps.appendChild(decdiv);
 			const childrendiv = document.createElement("div");
 			if(admin){
 				const addchannel = document.createElement("span");
-				addchannel.textContent = "+";
-				addchannel.classList.add("addchannel");
+				addchannel.classList.add("addchannel","svgicon","svg-plus");
 				caps.appendChild(addchannel);
 				addchannel.onclick = _=>{
 					this.guild.createchannels(this.createChannel.bind(this));
@ -508,8 +509,8 @@ class Channel extends SnowFlake{
 				this.coatDropDiv(decdiv, childrendiv);
 			}
 			div.appendChild(caps);
-			caps.classList.add("capsflex");
-			decdiv.classList.add("channeleffects");
+			caps.classList.add("flexltr","capsflex");
+			decdiv.classList.add("flexltr","channeleffects");
 			decdiv.classList.add("channel");

 			Channel.contextmenu.bindContextmenu(decdiv, this,undefined);
@ -554,29 +555,34 @@ class Channel extends SnowFlake{
 			}
 			// @ts-ignore I dont wanna deal with this
 			div.all = this;
+			const button = document.createElement("button");
+			button.classList.add("channelbutton");
+			div.append(button);
 			const myhtml = document.createElement("span");
+			myhtml.classList.add("ellipsis");
 			myhtml.textContent = this.name;
 			if(this.type === 0){
 				const decoration = document.createElement("span");
-				div.appendChild(decoration);
-				decoration.classList.add("space", "svgtheme", "svg-channel");
+				button.appendChild(decoration);
+				decoration.classList.add("space", "svgicon", "svg-channel");
 			}else if(this.type === 2){
 				//
 				const decoration = document.createElement("span");
-				div.appendChild(decoration);
-				decoration.classList.add("space", "svgtheme", "svg-voice");
-
+				button.appendChild(decoration);
+				decoration.classList.add("space", "svgicon", "svg-voice");
 			}else if(this.type === 5){
 				//
 				const decoration = document.createElement("span");
-				div.appendChild(decoration);
-				decoration.classList.add("space", "svgtheme", "svg-announce");
+				button.appendChild(decoration);
+				decoration.classList.add("space", "svgicon", "svg-announce");
 			}else{
 				console.log(this.type);
 			}
-			div.appendChild(myhtml);
-			div.onclick = _=>{
+			button.appendChild(myhtml);
+			button.onclick = _=>{
 				this.getHTML();
+				const toggle = document.getElementById("maintoggle") as HTMLInputElement;
+				toggle.checked = true;
 			};
 			if(this.type===2){
 				const voiceUsers=document.createElement("div");
@ -617,6 +623,7 @@ class Channel extends SnowFlake{
 				return [];
 			}
 			const div=document.createElement("div");
+			div.classList.add("voiceuser");
 			const span=document.createElement("span");
 			span.textContent=member.name;
 			div.append(span);
@ -812,6 +819,7 @@ class Channel extends SnowFlake{
 	}
 	makereplybox(){
 		const replybox = document.getElementById("replybox") as HTMLElement;
+		const typebox = document.getElementById("typebox") as HTMLElement;
 		if(this.replyingto){
 			replybox.innerHTML = "";
 			const span = document.createElement("span");
@ -824,14 +832,16 @@ class Channel extends SnowFlake{
 				replybox.classList.add("hideReplyBox");
 				this.replyingto = null;
 				replybox.innerHTML = "";
+				typebox.classList.remove("typeboxreplying");
 			};
 			replybox.classList.remove("hideReplyBox");
-			X.textContent = "⦻";
-			X.classList.add("cancelReply");
+			X.classList.add("cancelReply","svgicon","svg-x");
 			replybox.append(span);
 			replybox.append(X);
+			typebox.classList.add("typeboxreplying");
 		}else{
 			replybox.classList.add("hideReplyBox");
+			typebox.classList.remove("typeboxreplying");
 		}
 	}
 	async getmessage(id: string): Promise<Message>{
--- a/src/webpage/contextmenu.ts
+++ b/src/webpage/contextmenu.ts
@ -90,6 +90,13 @@ class Contextmenu<x, y>{
 			this.makemenu(event.clientX, event.clientY, addinfo, other);
 		};
 		obj.addEventListener("contextmenu", func);
+		obj.addEventListener("touchstart",(event: TouchEvent)=>{
+			if(event.touches.length > 1){
+				event.preventDefault();
+				event.stopImmediatePropagation();
+				this.makemenu(event.touches[0].clientX, event.touches[0].clientY, addinfo, other);
+			}
+		});
 		return func;
 	}
 	static keepOnScreen(obj: HTMLElement){
--- a/src/webpage/dialog.ts
+++ b/src/webpage/dialog.ts
@ -197,11 +197,17 @@ class Dialog{
 		case"select": {
 			const div = document.createElement("div");
 			const label = document.createElement("label");
+			const selectSpan = document.createElement("span");
+			selectSpan.classList.add("selectspan");
 			const select = document.createElement("select");
+			const selectArrow = document.createElement("span");
+			selectArrow.classList.add("svgicon","svg-category","selectarrow");

 			label.textContent = array[1];
+			selectSpan.append(select);
+			selectSpan.append(selectArrow);
 			div.append(label);
-			div.appendChild(select);
+			div.appendChild(selectSpan);
 			for(const thing of array[2]){
 				const option = document.createElement("option");
 				option.textContent = thing;
--- a/src/webpage/direct.ts
+++ b/src/webpage/direct.ts
@ -153,8 +153,9 @@ class Group extends Channel{
 		const div = document.createElement("div");
 		Group.contextmenu.bindContextmenu(div, this,undefined);
 		this.html = new WeakRef(div);
-		div.classList.add("channeleffects");
+		div.classList.add("flexltr","liststyle");
 		const myhtml = document.createElement("span");
+		myhtml.classList.add("ellipsis");
 		myhtml.textContent = this.name;
 		div.appendChild(this.user.buildpfp());
 		div.appendChild(myhtml);
--- a/src/webpage/embed.ts
+++ b/src/webpage/embed.ts
@ -157,13 +157,11 @@ Url.pathname.split("/")[Url.pathname.split("/").length - 1];
 			if(this.json?.footer?.text){
 				const span = document.createElement("span");
 				span.textContent = this.json.footer.text;
-				span.classList.add("spaceright");
 				footer.append(span);
 			}
 			if(this.json?.footer && this.json?.timestamp){
 				const span = document.createElement("span");
-				span.textContent = "•";
-				span.classList.add("spaceright");
+				span.textContent = " • ";
 				footer.append(span);
 			}
 			if(this.json?.timestamp){
@ -288,7 +286,7 @@ json.guild;
 guild as invitejson["guild"] & { info: { cdn: string } }
 			);
 			const iconrow = document.createElement("div");
-			iconrow.classList.add("flexltr", "flexstart");
+			iconrow.classList.add("flexltr");
 			iconrow.append(icon);
 			{
 				const guildinfo = document.createElement("div");
--- a/src/webpage/emoji.ts
+++ b/src/webpage/emoji.ts
@ -143,7 +143,7 @@ class Emoji{
 		title.classList.add("emojiTitle");
 		menu.append(title);
 		const selection = document.createElement("div");
-		selection.classList.add("flexltr", "dontshrink", "emojirow");
+		selection.classList.add("flexltr", "emojirow");
 		const body = document.createElement("div");
 		body.classList.add("emojiBody");

--- a/src/webpage/file.ts
+++ b/src/webpage/file.ts
@ -83,7 +83,9 @@ class File{
 		div.append(contained);
 		const controls = document.createElement("div");
 		const garbage = document.createElement("button");
-		garbage.textContent = "🗑";
+		const icon = document.createElement("span");
+		icon.classList.add("svgicon","svg-delete");
+		garbage.append(icon);
 		garbage.onclick = _=>{
 			div.remove();
 			files.splice(files.indexOf(file), 1);
--- a/src/webpage/home.html
+++ b/src/webpage/home.html
@ -11,28 +11,29 @@
 		<meta content="#4b458c" data-react-helmet="true" name="theme-color">
 		<link href="/style.css" rel="stylesheet">
 		<link href="/themes.css" rel="stylesheet" id="lightcss">
+		<style>body.no-theme{background:#16191b;}@media(prefers-color-scheme:light){body.no-theme{background:#9397bd;}}</style>
 	</head>

-	<body class="Dark-theme" style="overflow-y: scroll;">
+	<body class="no-theme" style="overflow-y: scroll;">
 		<div id="titleDiv">
 			<img src="/logo.svg" width="40">
 			<h1 id="pageTitle">Jank Client</h1>
 			<a href="https://sb-jankclient.vanillaminigames.net/invite/USgYJo?instance=https%3A%2F%2Fspacebar.chat"
 				class="TitleButtons">
-				<h1>Spacebar Guild</h1>
+				Spacebar Guild
 			</a>
 			<a href="https://github.com/MathMan05/JankClient" class="TitleButtons">
-				<h1>Github</h1>
+				Github
+			</a>
+			<a href="/channels/@me" class="TitleButtons">
+				Open Client
 			</a>
 		</div>
-		<div class="flexttb">
+		<div id="homePage">

-			<div class="flexttb pagehead">
-				<h1>Welcome to Jank Client</h1>
-			</div>
+			<h1 class="pagehead">Welcome to Jank Client</h1>
 			<div class="pagebox">
-				<p>Jank Client is a spacebar compatible client seeking to be as good as it can be with many features including:
-				</p>
+				<p>Jank Client is a Spacebar-compatible client seeking to be as good as it can be with many features including:</p>
 				<ul>
 					<li>Direct Messaging</li>
 					<li>Reactions support</li>
@ -44,16 +45,16 @@
 				</ul>
 			</div>
 			<div class="pagebox">
-				<h2>Spacebar compatible Instances:</h2>
+				<h2>Spacebar-Compatible Instances:</h2>
 				<div id="instancebox">
 				</div>
 			</div>
 			<div class="pagebox">
 				<h2>Contribute to Jank Client</h2>
-				<p>We always appreciate some help, wether that be in the form of bug reports, or code, or even just pointing out
+				<p>We always appreciate some help, whether that be in the form of bug reports, or code, or even just pointing out
 					some typos.</p><br>
-			</a><a href="https://github.com/MathMan05/JankClient" class="TitleButtons">
-					<h1>Github</h1>
+				<a href="https://github.com/MathMan05/JankClient" class="TitleButtons">
+					Github
 				</a>
 			</div>
 		</div>
--- a/src/webpage/home.ts
+++ b/src/webpage/home.ts
@ -37,11 +37,11 @@ login?: string;
 					div.append(img);
 				}
 				const statbox = document.createElement("div");
-				statbox.classList.add("flexttb");
+				statbox.classList.add("flexttb","flexgrow");

 				{
 					const textbox = document.createElement("div");
-					textbox.classList.add("flexttb", "instatancetextbox");
+					textbox.classList.add("flexttb", "instancetextbox");
 					const title = document.createElement("h2");
 					title.innerText = instance.name;
 					if(instance.online !== undefined){
--- a/src/webpage/icons/plus.svg
+++ b/src/webpage/icons/plus.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180"><path fill="#c9c9c9" stroke="red" stroke-linecap="round" stroke-width="24" d="M90 168V12M12 90h156"/></svg>
--- a/src/webpage/icons/x.svg
+++ b/src/webpage/icons/x.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180"><path fill="red" d="M90 0A90 90 0 0 0 0 90a90 90 0 0 0 90 90 90 90 0 0 0 90-90A90 90 0 0 0 90 0zM61.7 49.7a12 12 0 0 1 8.5 3.5L90 73l19.8-19.8a12 12 0 0 1 8.5-3.5 12 12 0 0 1 8.5 3.5 12 12 0 0 1 0 17L107 90l19.8 19.8a12 12 0 0 1 0 17 12 12 0 0 1-17 0L90 107l-19.8 19.8a12 12 0 0 1-17 0 12 12 0 0 1 0-17L73 90 53.2 70.2a12 12 0 0 1 0-17 12 12 0 0 1 8.5-3.5z"/></svg>
--- a/src/webpage/index.html
+++ b/src/webpage/index.html
@ -11,15 +11,15 @@
 		<meta content="#4b458c" data-react-helmet="true" name="theme-color">
 		<link href="/style.css" rel="stylesheet">
 		<link href="/themes.css" rel="stylesheet" id="lightcss">
-
+		<style>body.no-theme,#loading{background:#16191b;}@media(prefers-color-scheme:light){body.no-theme,#loading{background:#9397bd;}}</style>
 		<link rel="manifest" href="/manifest.json">
 	</head>

-	<body class="Dark-theme">
+	<body class="no-theme">
 		<script src="/index.js" type="module"></script>

 		<div id="loading" class="loading">
-			<div id="centerdiv">
+			<div class="centeritem">
 				<img src="/logo.svg" style="width:3in;height:3in;">
 				<h1>Jank Client is loading</h1>
 				<h2 id="load-desc">This shouldn't take long</h2>
@ -27,15 +27,13 @@
 			</div>
 		</div>
 		<div class="flexltr" id="page">
-			<div id="neunence">
-				<div id="servers"></div>
-			</div>
+			<div id="servers"></div>
 			<div class="flexttb channelflex">
-				<div class="servertd" id="servertd">
-					<h2 id="serverName">Server Name</h2>
+				<div class="flexltr header" id="servertd">
+					<h2 id="serverName" class="ellipsis">Server Name</h2>
 				</div>
 				<div id="channels"></div>
-				<div class="flexttb" style="flex-shrink: 0;">
+				<div class="flexttb">
 					<div class="flexltr" id="VoiceBox">
 						<span id="VoiceStatus"></span>
 					</div>
@ -43,39 +41,48 @@
 						<div class="flexltr" id="userinfo">
 							<img id="userpfp" class="pfp">

-							<div class="userflex">
+							<div class="flexttb userflex">
 								<p id="username">USERNAME</p>
 								<p id="status">STATUS</p>
 							</div>
 						</div>

 						<div id="user-actions">
-							<span id="settings" class="svgtheme svg-settings"></span>
+							<span id="settings" class="svgicon svg-settings"></span>
 						</div>
 					</div>
 				</div>
 			</div>
-			<div class="flexttb messageflex">
-				<div class="servertd channelnamediv">
-					<span id="mobileback" hidden></span>
-					<span id="channelname">Channel name</span>
-					<span id="channelTopic" hidden>Channel topic</span>
+			<div class="flexttb flexgrow" id="mainarea">
+				<div class="flexltr header channelnamediv">
+					<label for="maintoggle" id="maintoggleicon">
+						<span class="svgicon svg-category"></span>
+					</label>
+					<input type="checkbox" id="maintoggle">
+					<span class="flexltr">
+						<span id="channelname">Channel name</span>
+						<span id="channelTopic" class="ellipsis" hidden>Channel topic</span>
+					</span>
+					<label for="memberlisttoggle" id="memberlisttoggleicon">
+						<span class="svgicon svg-channel"></span>
+					</label>
+					<input type="checkbox" id="memberlisttoggle" checked>
 				</div>
-				<div class="flexltr">
-					<div class="flexttb">
-						<div id="channelw">
+				<div class="flexltr flexgrow">
+					<div class="flexttb flexgrow">
+						<div id="channelw" class="flexltr">
 							<div id="loadingdiv">
 							</div>
 						</div>
-						<div id="pasteimage"></div>
+						<div id="pasteimage" class="flexltr"></div>
 						<div id="replybox" class="hideReplyBox"></div>
 						<div id="typediv">
 							<div id="realbox">
 								<div id="typebox" contentEditable="true"></div>
 							</div>
-							<div id="typing" class="hidden">
+							<div id="typing" class="hidden flexltr">
 								<p id="typingtext">typing</p>
-								<div class="loading-indicator">
+								<div class="flexltr loading-indicator">
 									<div class="dot"></div>
 									<div class="dot"></div>
 									<div class="dot"></div>
--- a/src/webpage/index.ts
+++ b/src/webpage/index.ts
@ -22,7 +22,7 @@ import{ File }from"./file.js";

 	function showAccountSwitcher(): void{
 		const table = document.createElement("div");
-		table.classList.add("accountSwitcher");
+		table.classList.add("flexttb","accountSwitcher");

 		for(const user of Object.values(users.users)){
 			const specialUser = user as Specialuser;
@ -235,25 +235,12 @@ import{ File }from"./file.js";
 		userSettings;

 		if(mobile){
-			const channelWrapper = document.getElementById(
-				"channelw"
-			) as HTMLDivElement;
+			const channelWrapper = document.getElementById("channelw") as HTMLDivElement;
 			channelWrapper.onclick = ()=>{
-				(
-		document.getElementById("channels")!.parentNode as HTMLElement
-				).classList.add("collapse");
-		document.getElementById("servertd")!.classList.add("collapse");
-		document.getElementById("servers")!.classList.add("collapse");
-			};
-
-			const mobileBack = document.getElementById("mobileback") as HTMLDivElement;
-			mobileBack.textContent = "#";
-			mobileBack.onclick = ()=>{
-				(
-		document.getElementById("channels")!.parentNode as HTMLElement
-				).classList.remove("collapse");
-		document.getElementById("servertd")!.classList.remove("collapse");
-		document.getElementById("servers")!.classList.remove("collapse");
+				const toggle = document.getElementById("maintoggle") as HTMLInputElement;
+				toggle.checked = true;
 			};
+			const memberListToggle = document.getElementById("memberlisttoggle") as HTMLInputElement;
+			memberListToggle.checked = false;
 		}
 })();
--- a/src/webpage/infiniteScroller.ts
+++ b/src/webpage/infiniteScroller.ts
@ -39,7 +39,7 @@ offset: number
 		}

 		const scroll = document.createElement("div");
-		scroll.classList.add("flexttb", "scroller");
+		scroll.classList.add("scroller");
 		this.div = scroll;

 		this.div.addEventListener("scroll", ()=>{
--- a/src/webpage/invite.html
+++ b/src/webpage/invite.html
@ -1,4 +1,5 @@
-<body class="Dark-theme">
+<!DOCTYPE html>
+<html lang="en">
 	<head>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -10,14 +11,17 @@
 		<meta content="#4b458c" data-react-helmet="true" name="theme-color">
 		<link href="/style.css" rel="stylesheet">
 		<link href="/themes.css" rel="stylesheet" id="lightcss">
+		<style>body.no-theme{background:#16191b;}@media(prefers-color-scheme:light){body.no-theme{background:#9397bd;}}</style>
 	</head>
-	<div>
-		<div id="invitebody">
-			<div id="inviteimg"></div>
-			<h1 id="invitename">Server Name</h1>
-			<p id="invitedescription">Someone invited you to Server Name</p>
-			<button id="AcceptInvite">Accept Invite</button>
+	<body class="no-theme">
+		<div>
+			<div id="invitebody">
+				<div id="inviteimg"></div>
+				<h1 id="invitename">Server Name</h1>
+				<p id="invitedescription">Someone invited you to Server Name</p>
+				<button id="AcceptInvite">Accept Invite</button>
+			</div>
 		</div>
-	</div>
-	<script type="module" src="/invite.js"></script>
-</body>
+		<script type="module" src="/invite.js"></script>
+	</body>
+</html>
--- a/src/webpage/invite.ts
+++ b/src/webpage/invite.ts
@ -136,7 +136,7 @@ document.getElementById("inviteimg")!.append(div);
 		}

 		table.append(td);
-		table.classList.add("accountSwitcher");
+		table.classList.add("flexttb","accountSwitcher");
 		console.log(table);
 		document.body.append(table);
 	}
--- a/src/webpage/localuser.ts
+++ b/src/webpage/localuser.ts
@ -635,11 +635,12 @@ class Localuser{
 				const memberdiv=document.createElement("div");
 				const pfp=await member.user.buildstatuspfp();
 				const username=document.createElement("span");
+				username.classList.add("ellipsis");
 				username.textContent=member.name;
 				member.bind(username)
 				member.user.bind(memberdiv,member.guild,false);
 				memberdiv.append(pfp,username);
-				memberdiv.classList.add("flexltr");
+				memberdiv.classList.add("flexltr","liststyle");
 				membershtml.append(memberdiv);
 			}
 			category.append(membershtml);
@ -754,7 +755,7 @@ class Localuser{
 		const div = document.createElement("div");
 		div.classList.add("home", "servericon");

-		home.classList.add("svgtheme", "svgicon", "svg-home");
+		home.classList.add("svgicon", "svg-home");
 		home.all = this.guildids.get("@me");
 		(this.guildids.get("@me") as Guild).html = outdiv;
 		const unread = document.createElement("div");
@ -792,19 +793,17 @@ class Localuser{
 			br.id = "bottomseparator";

 			const div = document.createElement("div");
-			div.textContent = "+";
+			const plus = document.createElement("span");
+			plus.classList.add("svgicon", "svg-plus");
 			div.classList.add("home", "servericon");
+			div.appendChild(plus);
 			serverlist.appendChild(div);
 			div.onclick = _=>{
 				this.createGuild();
 			};
 			const guilddsdiv = document.createElement("div");
 			const guildDiscoveryContainer = document.createElement("span");
-			guildDiscoveryContainer.classList.add(
-				"svgtheme",
-				"svgicon",
-				"svg-explore"
-			);
+			guildDiscoveryContainer.classList.add("svgicon", "svg-explore");
 			guilddsdiv.classList.add("home", "servericon");
 			guilddsdiv.appendChild(guildDiscoveryContainer);
 			serverlist.appendChild(guilddsdiv);
@ -870,7 +869,7 @@ class Localuser{
 						["title", "Create a guild"],
 						[
 							"fileupload",
-							"Icon:",
+							"Icon: ",
 							function(event: Event){
 								const target = event.target as HTMLInputElement;
 								if(!target.files)return;
@ -893,7 +892,7 @@ class Localuser{
 						[
 							"button",
 							"",
-							"submit",
+							"Submit",
 							()=>{
 								this.makeGuild(fields).then(_=>{
 									if(_.message){
@ -921,7 +920,7 @@ class Localuser{
 	}
 	async guildDiscovery(){
 		const content = document.createElement("div");
-		content.classList.add("guildy");
+		content.classList.add("flexttb","guildy");
 		content.textContent = "Loading...";
 		const full = new Dialog(["html", content]);
 		full.show();
@ -1136,7 +1135,7 @@ class Localuser{
 			});
 			let changed = false;
 			const pronounbox = settingsLeft.addTextInput(
-				"Pronouns",
+				"Pronouns:",
 				_=>{
 					if(newpronouns || newbio || changed){
 						this.updateProfile({
@ -1168,7 +1167,7 @@ class Localuser{
 				color = "transparent";
 			}
 			const colorPicker = settingsLeft.addColorInput(
-				"Profile color",
+				"Profile color:",
 				_=>{},
 				{ initColor: color }
 			);
@ -1181,9 +1180,9 @@ class Localuser{
 			});
 		}
 		{
-			const tas = settings.addButton("Themes & sounds");
+			const tas = settings.addButton("Themes & Sounds");
 			{
-				const themes = ["Dark", "WHITE", "Light"];
+				const themes = ["Dark", "WHITE", "Light", "Dark-Accent"];
 				tas.addSelect(
 					"Theme:",
 					_=>{
@ -1459,9 +1458,9 @@ class Localuser{
 						}
 					);

-					form.addTextInput("Name", "name", { required: true });
+					form.addTextInput("Name:", "name", { required: true });
 					form.addSelect(
-						"Team",
+						"Team:",
 						"team_id",
 						["Personal", ...teams.map((team: { name: string })=>team.name)],
 						{
@ -1577,7 +1576,7 @@ class Localuser{
 		});
 		form.addTextInput("Bot username:","username",{initText:bot.username});
 		form.addFileInput("Bot avatar:","avatar");
-		form.addButtonInput("Reset Token:","Reset",async ()=>{
+		form.addButtonInput("","Reset Token",async ()=>{
 			if(!confirm("Are you sure you want to reset the bot token? Your bot will stop working until you update it.")){
 				return;
 			}
@ -1617,7 +1616,7 @@ class Localuser{
 				this.userinfo.updateLocal();
 			}
 		});
-		form.addButtonInput("","Advanced bot settings",()=>{
+		form.addButtonInput("","Advanced Bot Settings",()=>{
 			const token=this.botTokens.get(appId);
 			if(token){
 				const botc=new Bot(bot,token,this);
--- a/src/webpage/login.html
+++ b/src/webpage/login.html
@ -1,4 +1,5 @@
-<body class="Dark-theme">
+<!DOCTYPE html>
+<html lang="en">
 	<head>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -12,51 +13,49 @@
 		<meta content="#4b458c" data-react-helmet="true" name="theme-color">
 		<link href="/style.css" rel="stylesheet">
 		<link href="/themes.css" rel="stylesheet" id="lightcss">
+		<style>body.no-theme{background:#16191b;}@media(prefers-color-scheme:light){body.no-theme{background:#9397bd;}}</style>
 	</head>
-	<div id="logindiv">
-		<h1>Login</h1>
-		<br >
-		<form id="form" submit="check(e)">
-			<label for="instance"><b>Instance:</b></label
-      ><br >
-			<p id="verify"></p>
-			<input
-				type="search"
-				list="instances"
-				placeholder="Instance URL"
-				name="instance"
-				id="instancein"
-				value=""
-				id="instancein"
-				required
-			><br ><br >
+	<body class="no-theme">
+		<div id="logindiv">
+			<h1>Login</h1>
+			<form id="form" submit="check(e)">
+				<label for="instance"><b>Instance:</b></label>
+				<p id="verify"></p>
+				<input
+					type="search"
+					list="instances"
+					placeholder="Instance URL"
+					name="instance"
+					id="instancein"
+					value=""
+					required
+				>

-			<label for="uname"><b>Email:</b></label
-      ><br >
-			<input
-				type="text"
-				placeholder="Enter email address"
-				name="uname"
-				id="uname"
-				required
-			><br ><br >
+				<label for="uname"><b>Email:</b></label>
+				<input
+					type="text"
+					placeholder="Enter email address"
+					name="uname"
+					id="uname"
+					required
+				>

-			<label for="psw"><b>Password:</b></label
-      ><br >
-			<input
-				type="password"
-				placeholder="Enter Password"
-				name="psw"
-				id="psw"
-				required
-			><br ><br ><br ><br >
-			<p class="wrongred" id="wrong"></p>
+				<label for="psw"><b>Password:</b></label>
+				<input
+					type="password"
+					placeholder="Enter Password"
+					name="psw"
+					id="psw"
+					required
+				>
+				<p class="wrongred" id="wrong"></p>

-			<div id="h-captcha"></div>
-			<button type="submit">Login</button>
-		</form>
-		<a href="/register.html" id="switch">Don't have an account?</a>
-	</div>
-	<datalist id="instances"></datalist>
-	<script src="/login.js" type="module"></script>
-</body>
+				<div id="h-captcha"></div>
+				<button type="submit">Login</button>
+			</form>
+			<a href="/register.html" id="switch">Don't have an account?</a>
+		</div>
+		<datalist id="instances"></datalist>
+		<script src="/login.js" type="module"></script>
+	</body>
+</html>
--- a/src/webpage/login.ts
+++ b/src/webpage/login.ts
@ -95,7 +95,7 @@ function setDefaults(){
 		userinfos.users = {};
 	}
 	if(userinfos.accent_color === undefined){
-		userinfos.accent_color = "#242443";
+		userinfos.accent_color = "#3096f7";
 	}
 	document.documentElement.style.setProperty(
 		"--accent-color",
--- a/src/webpage/markdown.ts
+++ b/src/webpage/markdown.ts
@ -765,12 +765,12 @@ txt[j + 1] === undefined)
 				}else{
 					const full: Dialog = new Dialog([
 						"vdiv",
-						["title", "You're leaving spacebar"],
+						["title", "You're leaving Spacebar"],
 						[
 							"text",
 							"You're going to " +
 	Url.host +
-	" are you sure you want to go there?",
+	". Are you sure you want to go there?",
 						],
 						[
 							"hdiv",
--- a/src/webpage/message.ts
+++ b/src/webpage/message.ts
@ -11,6 +11,7 @@ import{ SnowFlake }from"./snowflake.js";
 import{ memberjson, messagejson }from"./jsontypes.js";
 import{ Emoji }from"./emoji.js";
 import{ Dialog }from"./dialog.js";
+import{ mobile }from"./login.js";
 import { I18n } from "./i18n.js";

 class Message extends SnowFlake{
@ -403,22 +404,19 @@ class Message extends SnowFlake{
 		}
 		if(this.message_reference){
 			const replyline = document.createElement("div");
-			const line = document.createElement("hr");
 			const minipfp = document.createElement("img");
 			minipfp.classList.add("replypfp");
-			replyline.appendChild(line);
 			replyline.appendChild(minipfp);
 			const username = document.createElement("span");
 			replyline.appendChild(username);
 			const reply = document.createElement("div");
 			username.classList.add("username");
-			reply.classList.add("replytext");
+			reply.classList.add("replytext","ellipsis");
 			replyline.appendChild(reply);
 			const line2 = document.createElement("hr");
 			replyline.appendChild(line2);
 			line2.classList.add("reply");
-			line.classList.add("startreply");
-			replyline.classList.add("replyflex");
+			replyline.classList.add("flexltr","replyflex");
 			// TODO: Fix this
 			this.channel.getmessage(this.message_reference.message_id).then(message=>{
 				if(message.author.relationshipType === 2){
@ -441,7 +439,6 @@ class Message extends SnowFlake{
 		div.appendChild(build);
 		if({ 0: true, 19: true }[this.type] || this.attachments.length !== 0){
 			const pfpRow = document.createElement("div");
-			pfpRow.classList.add("flexltr");
 			let pfpparent, current;
 			if(premessage != null){
 				pfpparent ??= premessage;
@ -465,10 +462,7 @@ class Message extends SnowFlake{
 			pfpRow.classList.add("pfprow");
 			build.appendChild(pfpRow);
 			const text = document.createElement("div");
-			text.classList.add("flexttb");
-			const texttxt = document.createElement("div");
-			texttxt.classList.add("commentrow", "flexttb");
-			text.appendChild(texttxt);
+			text.classList.add("commentrow", "flexttb");
 			if(combine){
 				const username = document.createElement("span");
 				username.classList.add("username");
@ -476,7 +470,6 @@ class Message extends SnowFlake{
 				div.classList.add("topMessage");
 				username.textContent = this.author.username;
 				const userwrap = document.createElement("div");
-				userwrap.classList.add("flexltr");
 				userwrap.appendChild(username);
 				if(this.author.bot){
 					const username = document.createElement("span");
@ -489,7 +482,7 @@ class Message extends SnowFlake{
 				time.classList.add("timestamp");
 				userwrap.appendChild(time);

-				texttxt.appendChild(userwrap);
+				text.appendChild(userwrap);
 			}else{
 				div.classList.remove("topMessage");
 			}
@ -498,13 +491,13 @@ class Message extends SnowFlake{
 			const messagedwrap = document.createElement("div");
 			messagedwrap.classList.add("flexttb");
 			messagedwrap.appendChild(messaged);
-			texttxt.appendChild(messagedwrap);
+			text.appendChild(messagedwrap);

 			build.appendChild(text);
 			if(this.attachments.length){
 				console.log(this.attachments);
 				const attach = document.createElement("div");
-				attach.classList.add("flexltr");
+				attach.classList.add("flexltr","attachments");
 				for(const thing of this.attachments){
 					attach.appendChild(thing.getHTML());
 				}
@ -512,7 +505,6 @@ class Message extends SnowFlake{
 			}
 			if(this.embeds.length){
 				const embeds = document.createElement("div");
-				embeds.classList.add("flexltr");
 				for(const thing of this.embeds){
 					embeds.appendChild(thing.generateHTML());
 				}
@ -521,27 +513,23 @@ class Message extends SnowFlake{
 			//
 		}else if(this.type === 7){
 			const text = document.createElement("div");
-			text.classList.add("flexttb");
-			const texttxt = document.createElement("div");
-			text.appendChild(texttxt);
 			build.appendChild(text);
-			texttxt.classList.add("flexltr");
 			const messaged = document.createElement("span");
 			div.txt = messaged;
 			messaged.textContent = "welcome: ";
-			texttxt.appendChild(messaged);
+			text.appendChild(messaged);

 			const username = document.createElement("span");
 			username.textContent = this.author.username;
 			//this.author.profileclick(username);
 			this.author.bind(username, this.guild);
-			texttxt.appendChild(username);
+			text.appendChild(username);
 			username.classList.add("username");

 			const time = document.createElement("span");
 			time.textContent = "  " + formatTime(new Date(this.timestamp));
 			time.classList.add("timestamp");
-			texttxt.append(time);
+			text.append(time);
 			div.classList.add("topMessage");
 		}
 		const reactions = document.createElement("div");
@ -556,6 +544,7 @@ class Message extends SnowFlake{
 		if(this.div){
 			let buttons: HTMLDivElement | undefined;
 			this.div.onmouseenter = _=>{
+				if(mobile)return;
 				if(buttons){
 					buttons.remove();
 					buttons = undefined;
@ -564,9 +553,9 @@ class Message extends SnowFlake{
 					buttons = document.createElement("div");
 					buttons.classList.add("messageButtons", "flexltr");
 					if(this.channel.hasPermission("SEND_MESSAGES")){
-						const container = document.createElement("div");
+						const container = document.createElement("button");
 						const reply = document.createElement("span");
-						reply.classList.add("svgtheme", "svg-reply", "svgicon");
+						reply.classList.add("svg-reply", "svgicon");
 						container.append(reply);
 						buttons.append(container);
 						container.onclick = _=>{
@ -574,9 +563,9 @@ class Message extends SnowFlake{
 						};
 					}
 					if(this.author === this.localuser.user){
-						const container = document.createElement("div");
+						const container = document.createElement("button");
 						const edit = document.createElement("span");
-						edit.classList.add("svgtheme", "svg-edit", "svgicon");
+						edit.classList.add("svg-edit", "svgicon");
 						container.append(edit);
 						buttons.append(container);
 						container.onclick = _=>{
@ -584,9 +573,9 @@ class Message extends SnowFlake{
 						};
 					}
 					if(this.canDelete()){
-						const container = document.createElement("div");
+						const container = document.createElement("button");
 						const reply = document.createElement("span");
-						reply.classList.add("svgtheme", "svg-delete", "svgicon");
+						reply.classList.add("svg-delete", "svgicon");
 						container.append(reply);
 						buttons.append(container);
 						container.onclick = _=>{
@ -595,25 +584,28 @@ class Message extends SnowFlake{
 								return;
 							}
 							const diaolog = new Dialog([
-								"hdiv",
-								["title", "are you sure you want to delete this?"],
+								"vdiv",
+								["title", "Are you sure you want to delete this?"],
 								[
-									"button",
-									"",
-									"yes",
-									()=>{
-										this.delete();
-										diaolog.hide();
-									},
-								],
-								[
-									"button",
-									"",
-									"no",
-									()=>{
-										diaolog.hide();
-									},
-								],
+									"hdiv",
+									[
+										"button",
+										"",
+										"Yes",
+										()=>{
+											this.delete();
+											diaolog.hide();
+										},
+									],
+									[
+										"button",
+										"",
+										"No",
+										()=>{
+											diaolog.hide();
+										},
+									],
+								]
 							]);
 							diaolog.show();
 						};
--- a/src/webpage/oauth2/auth.ts
+++ b/src/webpage/oauth2/auth.ts
@ -102,18 +102,24 @@ type botjsonfetch={
 				}
 			}
 			const dialog=document.createElement("dialog");
-			dialog.classList.add("accountSwitcher");
+			dialog.classList.add("flexttb","accountSwitcher");
 			const h1=document.createElement("h1");
 			dialog.append(h1);
 			h1.textContent="Invite to server:";
 			const select=document.createElement("select");
+			const selectSpan=document.createElement("span");
+			selectSpan.classList.add("selectspan");
+			const selectArrow = document.createElement("span");
+			selectArrow.classList.add("svgicon","svg-category","selectarrow");
 			for(const guild of guilds){
 				const option=document.createElement("option");
 				option.textContent=guild.name;
 				option.value=guild.id;
 				select.append(option);
 			}
-			dialog.append(select);
+			selectSpan.append(select);
+			selectSpan.append(selectArrow);
+			dialog.append(selectSpan);
 			const button=document.createElement("button");
 			button.textContent="Invite";
 			dialog.append(button);
@ -193,7 +199,7 @@ type botjsonfetch={
 		}

 		table.append(td);
-		table.classList.add("accountSwitcher");
+		table.classList.add("flexttb","accountSwitcher");
 		console.log(table);
 		document.body.append(table);
 	}
@ -221,7 +227,7 @@ type botjsonfetch={
 			const int = Number((BigInt(json.bot.id) >> 22n) % 6n);
 			pfp.src=`${urls.cdn}/embed/avatars/${int}.png`;
 		}
-		const perms=document.getElementById("permsions") as HTMLDivElement;
+		const perms=document.getElementById("permissions") as HTMLDivElement;

 		if(perms&&permstr){
 			const permisions=new Permissions(permstr)
--- a/src/webpage/oauth2/authorize.html
+++ b/src/webpage/oauth2/authorize.html
@ -1,4 +1,5 @@
-<body class="Dark-theme">
+<!DOCTYPE html>
+<html lang="en">
 	<head>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -9,15 +10,18 @@
 		<meta content="#4b458c" data-react-helmet="true" name="theme-color">
 		<link href="/style.css" rel="stylesheet">
 		<link href="/themes.css" rel="stylesheet" id="lightcss">
+		<style>body.no-theme{background:#16191b;}@media(prefers-color-scheme:light){body.no-theme{background:#9397bd;}}</style>
 	</head>
-	<div>
-		<div id="invitebody">
-			<img id="inviteimg" class="pfp"/>
-			<h1 id="invitename">Bot Name</h1>
-			<p id="invitedescription">Add Bot</p>
-			<div id="permsions"><h1>This will allow the bot to:</h1></div>
-			<button id="AcceptInvite">Add to server</button>
+	<body class="no-theme">
+		<div>
+			<div id="invitebody">
+				<img id="inviteimg" class="pfp"/>
+				<h1 id="invitename">Bot Name</h1>
+				<p id="invitedescription">Add Bot</p>
+				<div id="permissions"><h1>This will allow the bot to:</h1></div>
+				<button id="AcceptInvite">Add to server</button>
+			</div>
 		</div>
-	</div>
-	<script type="module" src="/oauth2/auth.js"></script>
-</body>
+		<script type="module" src="/oauth2/auth.js"></script>
+	</body>
+</html>
--- a/src/webpage/register.html
+++ b/src/webpage/register.html
@ -1,5 +1,5 @@
-<body class="Dark-theme">
-
+<!DOCTYPE html>
+<html lang="en">
 	<head>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -10,53 +10,55 @@
 		<meta content="#4b458c" data-react-helmet="true" name="theme-color">
 		<link href="/style.css" rel="stylesheet">
 		<link href="/themes.css" rel="stylesheet" id="lightcss">
+		<style>body.no-theme{background:#16191b;}@media(prefers-color-scheme:light){body.no-theme{background:#9397bd;}}</style>
 	</head>
-	<div id="logindiv">
-		<h1>Create an account</h1><br>
-		<form id="register" submit="registertry(e)">
-			<div>
-				<label for="instance"><b>Instance:</b></label><br>
-				<p id="verify"></p>
-				<input type="search" list="instances" placeholder="Instance URL" id="instancein" name="instance" value=""
-					id="instancein" required>
-			</div>
-			<div>
-				<label for="uname"><b>Email:</b></label><br>
-				<input type="text" placeholder="Enter Email" name="uname" id="uname" required>
-			</div>
+	<body class="no-theme">
+		<div id="logindiv">
+			<h1>Create an account</h1>
+			<form id="register" submit="registertry(e)">
+				<div>
+					<label for="instance"><b>Instance:</b></label>
+					<p id="verify"></p>
+					<input type="search" list="instances" placeholder="Instance URL" id="instancein" name="instance" value="" required>
+				</div>
+				<div>
+					<label for="uname"><b>Email:</b></label>
+					<input type="text" placeholder="Enter Email" name="uname" id="uname" required>
+				</div>

-			<div>
-				<label for="uname"><b>Username:</b></label><br>
-				<input type="text" placeholder="Enter Username" name="username" id="username" required>
-			</div>
-			<div>
-				<label for="psw"><b>Password:</b></label><br>
-				<input type="password" placeholder="Enter Password" name="psw" id="psw" required>
-			</div>
+				<div>
+					<label for="uname"><b>Username:</b></label>
+					<input type="text" placeholder="Enter Username" name="username" id="username" required>
+				</div>
+				<div>
+					<label for="psw"><b>Password:</b></label>
+					<input type="password" placeholder="Enter Password" name="psw" id="psw" required>
+				</div>

-			<div>
-				<label for="psw2"><b>Enter password again:</b></label><br>
-				<input type="password" placeholder="Enter Password Again" name="psw2" id="psw2" required>
-			</div>
+				<div>
+					<label for="psw2"><b>Enter password again:</b></label>
+					<input type="password" placeholder="Enter Password Again" name="psw2" id="psw2" required>
+				</div>

-			<div>
-				<label for="date"><b>Date of birth:</b></label><br>
-				<input type="date" id="date" name="date">
-			</div>
+				<div>
+					<label for="date"><b>Date of birth:</b></label>
+					<input type="date" id="date" name="date">
+				</div>

-			<div>
-				<b id="TOSbox">I agree to the <a href="" id="TOSa">Terms of Service</a>:</b>
-				<input type="checkbox" id="TOS" name="TOS">
-			</div>
+				<div>
+					<b id="TOSbox">I agree to the <a href="" id="TOSa">Terms of Service</a>:</b>
+					<input type="checkbox" id="TOS" name="TOS">
+				</div>

-			<p class="wrongred" id="wrong"></p>
-			<div id="h-captcha">
+				<p class="wrongred" id="wrong"></p>
+				<div id="h-captcha">

-			</div>
-			<button type="submit" class="dontgrow">Create account</button>
-		</form>
-		<a href="/login.html" id="switch">Already have an account?</a>
-	</div>
-	<datalist id="instances"></datalist>
-	<script src="/register.js" type="module"></script>
-</body>
+				</div>
+				<button type="submit" class="dontgrow">Create account</button>
+			</form>
+			<a href="/login.html" id="switch">Already have an account?</a>
+		</div>
+		<datalist id="instances"></datalist>
+		<script src="/register.js" type="module"></script>
+	</body>
+</html>
--- a/src/webpage/settings.ts
+++ b/src/webpage/settings.ts
@ -31,7 +31,7 @@ class Buttons implements OptionsElement<unknown>{
 		const htmlarea = document.createElement("div");
 		htmlarea.classList.add("flexgrow");
 		const buttonTable = document.createElement("div");
-		buttonTable.classList.add("flexttb", "settingbuttons");
+		buttonTable.classList.add("settingbuttons");
 		for(const thing of this.buttons){
 			const button = document.createElement("button");
 			button.classList.add("SettingsButton");
@ -244,9 +244,12 @@ class ButtonInput implements OptionsElement<void>{
 	}
 	generateHTML(): HTMLDivElement{
 		const div = document.createElement("div");
-		const span = document.createElement("span");
-		span.textContent = this.label;
-		div.append(span);
+		if(this.label){
+			const span = document.createElement("span");
+			span.classList.add("inlinelabel");
+			span.textContent = this.label;
+			div.append(span);
+		}
 		const button = document.createElement("button");
 		button.textContent = this.textContent;
 		button.onclick = this.onClickEvent.bind(this);
@ -338,6 +341,8 @@ class SelectInput implements OptionsElement<number>{
 		const span = document.createElement("span");
 		span.textContent = this.label;
 		div.append(span);
+		const selectSpan = document.createElement("span");
+		selectSpan.classList.add("selectspan");
 		const select = document.createElement("select");

 		select.onchange = this.onChange.bind(this);
@ -348,7 +353,11 @@ class SelectInput implements OptionsElement<number>{
 		}
 		this.select = new WeakRef(select);
 		select.selectedIndex = this.index;
-		div.append(select);
+		selectSpan.append(select);
+		const selectArrow = document.createElement("span");
+		selectArrow.classList.add("svgicon","svg-category","selectarrow");
+		selectSpan.append(selectArrow);
+		div.append(selectSpan);
 		return div;
 	}
 	private onChange(){
@ -438,11 +447,13 @@ class FileInput implements OptionsElement<FileList | null>{
 		const span = document.createElement("span");
 		span.textContent = this.label;
 		div.append(span);
+		const innerDiv = document.createElement("div");
+		innerDiv.classList.add("flexltr","fileinputdiv");
 		const input = document.createElement("input");
 		input.type = "file";
 		input.oninput = this.onChange.bind(this);
 		this.input = new WeakRef(input);
-		div.append(input);
+		innerDiv.append(input);
 		if(this.clear){
 			const button = document.createElement("button");
 			button.textContent = "Clear";
@ -453,8 +464,9 @@ class FileInput implements OptionsElement<FileList | null>{
 				this.value = null;
 				this.owner.changed();
 			};
-			div.append(button);
+			innerDiv.append(button);
 		}
+		div.append(innerDiv);
 		return div;
 	}
 	onChange(){
@ -719,7 +731,7 @@ class Options implements OptionsElement<void>{
 	title: WeakRef<HTMLElement> = new WeakRef(document.createElement("h2"));
 	generateHTML(): HTMLElement{
 		const div = document.createElement("div");
-		div.classList.add("titlediv");
+		div.classList.add("flexttb","titlediv");
 		const title = document.createElement("h2");
 		title.textContent = this.name;
 		div.append(title);
@ -1199,7 +1211,7 @@ class Settings extends Buttons{
 	}
 	show(){
 		const background = document.createElement("div");
-		background.classList.add("background");
+		background.classList.add("flexttb","menu","background");

 		const title = document.createElement("h2");
 		title.textContent = this.name;
@ -1209,8 +1221,7 @@ class Settings extends Buttons{
 		background.append(this.generateHTML());

 		const exit = document.createElement("span");
-		exit.textContent = "✖";
-		exit.classList.add("exitsettings");
+		exit.classList.add("exitsettings","svgicon","svg-x");
 		background.append(exit);
 		exit.onclick = _=>{
 			this.hide();
--- a/src/webpage/style.css
+++ b/src/webpage/style.css
--- a/src/webpage/themes.css
+++ b/src/webpage/themes.css
@ -1,178 +1,176 @@
 :root {
-	--servertd-height: 0px;
-	/* Default value */
-	--red: red;
-	--green: green;
-	--yellow:yellow;
-	--accent-color:#242443;
+	--font: "acumin-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
+	--black: #000000;
+	--red: #ff5555;
+	--yellow: #ffc159;
+	--green: #1c907b;
 }
-.Dark-theme { /* thanks to TomatoCake for the updated CSS vars and such*/
+
+/* Themes. See themes.txt */
+.Dark-theme {
 	color-scheme: dark;
-	--primary-text: #FFF;
-	--primary-bg: color-mix(in srgb, #2f2f2f 70%, var(--accent-color));
-	--black: #000;
-	--shadow: #000;
-	--focus: #8888ff;
-	--message-bg-hover: color-mix(in srgb, #191919 85%, var(--accent-color));
-	--typing-bg: #161616;
-	--timestamp-color: #a2a2a2;
-	--code-bg: color-mix(in srgb, #121212 95%, var(--accent-color));
-	--user-info-bg: color-mix(in srgb,#383838 85%, var(--accent-color));
-	--user-dock-bg: color-mix(in srgb,#111111 90%, var(--accent-color));
-	--channels-bg: color-mix(in srgb, #2a2a2a 90%, var(--accent-color));
-	--channel-hover: color-mix(in srgb, #121212 70%, var(--accent-color));
-	--blank-bg: #323232;
-	--light-border: #92929B;
-	--settings-hover: color-mix(in srgb, #000000 95%, var(--accent-color) 5%);
-	--quote-bg: #7a798e;
-	--button-bg: color-mix(in srgb, #191919 85%, var(--accent-color));
-	--button-hover: color-mix(in srgb, #2f2f2f 70%, var(--accent-color));
-	--textarea-bg: color-mix(in srgb, #484848 80%, var(--accent-color));
-	--filename: #47bbff;
-	--mention-bg: #F00;
-	--mention-md-bg: #3b588b;
-	--pronouns: #797979;
-	--profile-bg: color-mix(in srgb, #232323 90%, var(--accent-color));
-	--profile-info-bg: color-mix(in srgb, #121212 90%, var(--accent-color));
-	--server-border: color-mix(in srgb, #000000 80%, var(--accent-color));
-	--channel-name-bg: color-mix(in srgb, #2a2a2a 80%, var(--accent-color));
-	--server-name-bg: color-mix(in srgb, #232323 90%, var(--accent-color));
-	--reply-border: #474b76;
-	--reply-bg: #0b0d20;
-	--reply-text: #acacac;
-	--spoiler-hover: #111111;
-	--spoiler-open-bg: #1e1e1e;
-	--unknown-file-bg: #141316;
-	--unknown-file-border: #474555;
-	--login-border: #131315;
-	--loading-bg: #22232c;
-	--dialog-bg: #33363d;
-	--dialog-border: #1c1b31;
-	--scrollbar-track: #34313c;
-	--scrollbar-thumb: #201f29;
-	--scrollbar-thumb-hover: #16161f;
-	--markdown-timestamp: #2f2f33;
-	--embed: color-mix(in srgb, #131313 90%, var(--accent-color));
-	--link: #8888ff;
-	--discovery-bg: #37373b;
-	--message-jump:#7678b0;
-	--icon-color:white;
-	--server-list: color-mix(in srgb, #1d1d1d 90%, var(--accent-color));
+
+	--primary-bg: #303339;
+	--primary-hover: #272b31;
+	--primary-text: #dfdfdf;
+	--primary-text-soft: #adb8b9;
+
+	--secondary-bg: #16191b;
+	--secondary-hover: #252b2c;
+
+	--servers-bg: #141718;
+	--channels-bg: #25282b;
+	--channel-selected: #3c4046;
+	--typebox-bg: #3a3e45;
+
+	--button-bg: #4e5457;
+	--button-hover: #6b7174;
+	--spoiler-bg: #000000;
+	--link: #5ca9ed;
+
+	--primary-text-prominent: #efefef;
+	--dock-bg: #1b1e20;
+	--card-bg: #000000;
 }
+
 .WHITE-theme {
 	color-scheme: light;
-	--primary-text: #000;
-	--primary-bg: #FFF;
-	--black: #FFF;
-	--red: #dd6c6c;
-	--green: #639d63;
-	--shadow: #777;
-	--focus: #47bbff;
-	--message-bg-hover: #dedee2;
-	--typing-bg: #dad8d8;
-	--timestamp-color: #929297;
-	--code-bg: #cbcbcc;
-	--user-info-bg: #b0abc2;
-	--user-dock-bg: #b2b2c4;
-	--channels-bg: #cbcbd8;
-	--channel-hover: #b8b5cc;
-	--blank-bg: #ceccdd;
-	--light-border: #96959e;
-	--settings-hover: #b5b1bb;
-	--quote-bg: #7a798e;
-	--button-bg: #b7b7cc;
-	--button-hover: #FFF;
-	--textarea-bg: #b1b6ce;
-	--filename: #47bbff;
-	--mention-bg: #F00;
-	--mention-md-bg: #3b588b;
-	--pronouns: #6a6a6d;
-	--profile-bg: #cacad8;
-	--profile-info-bg: #bbbbce;
-	--server-border: #bebed3;
-	--channel-name-bg: #c0c0d4;
-	--server-name-bg: #a3a3b5;
-	--reply-border: #b1b2bd;
-	--reply-bg: #d4d6e9;
-	--reply-text: #2e2e30;
-	--spoiler-hover: #b9b9b9;
-	--spoiler-open-bg: #dadada;
-	--unknown-file-bg: #bdbdbd;
-	--unknown-file-border: #adadad;
-	--login-border: #c3c0e0;
-	--loading-bg: #b5b7cc;
-	--dialog-bg: #c1c8d6;
-	--dialog-border: #b9b7db;
-	--scrollbar-track: #d5d1e2;
-	--scrollbar-thumb: #b0afc0;
-	--scrollbar-thumb-hover: #a5a5b8;
-	--markdown-timestamp: #c8c8da;
-	--embed: #f2f3f5;
-	--link: #3333ee;
-	--discovery-bg: #c6c6d8;
-	--message-jump:#ccceff;
-	--icon-color:black;
+
+	--primary-bg: #fefefe;
+	--primary-hover: #f6f6f9;
+	--primary-text: #4b4b59;
+	--primary-text-soft: #656575;
+
+	--secondary-bg: #e0e0ea;
+	--secondary-hover: #d0d0dd;
+
+	--servers-bg: #b4b4ca;
+	--channels-bg: #eaeaf0;
+	--channel-selected: #c7c7d9;
+	--typebox-bg: #ededf4;
+
+	--button-bg: #cacad8;
+	--button-hover: #b3b3c4;
+	--spoiler-bg: #dadada;
+	--link: #056cd9;
+
+	--black: #4b4b59;
+	--green: #68d79d;
+	--primary-text-prominent: #08080d;
+	--secondary-text: #3c3c46;
+	--secondary-text-soft: #4c4c5a;
+	--dock-bg: #d1d1df;
+	--dock-hover: #b8b8d0;
 }
+
 .Light-theme {
 	color-scheme: light;

-	--primary-text: #000;
-	--primary-bg: #8e90c3;
-	--black: #fff;
-	--shadow: #000;
-	--focus: #5e50c5;
+	--primary-bg: #aaafce;
+	--primary-hover: #b1b6d4;
+	--primary-text: #060415;
+	--primary-text-soft: #424268;

-	--message-bg-hover: #5757b5;
-	--typing-bg: #d4d6e9;
-	--profile-bg: #8075bf;
-	--profile-info-bg: #8075bf;
-	--timestamp-color: #000000;
-	--code-bg: #a89adf;
-	--info-bg: #6060a3;
-	--user-info-bg: #796f9a;
-	--user-dock-bg: #83839d;
-	--channels-bg: #c2c2d1;
-	--channel-hover: #726e88;
-	--blank-bg: #5e50c5;
-	--light-border: #000000;
-	--settings-hover: #b5b1bb;
-	--quote-bg: #7a798e;
-	--button-bg: #5757b5;
-	--button-hover: #8e90c3;
-	--textarea-bg: #abb1cd;
-	--filename: #47bbff;
-	--mention-bg: #F00;
-	--mention-md-bg: #3b588b;
-	--pronouns: #202020;
-	--channel-name-bg: #c0c0d4;
-	--server-name-bg: #a3a3b5;
+	--secondary-bg: #9397bd;
+	--secondary-hover: #9ea5cc;
 	
-	--server-border: #aaaac4;
-	--server-hover: #7f7fa8;
+	--servers-bg: #7a7aaa;
+	--channels-bg: #babdd2;
+	--channel-selected: #9c9fbf;
+	--typebox-bg: #bac0df;

-	--reply-border: #474b76;
-	--reply-bg: #d4d6e9;
-	--reply-text: #38383d;
+	--button-bg: #babdd2;
+	--button-hover: #9c9fbf;
+	--spoiler-bg: #34333a;
+	--link: #283c8b;

-	--spoiler-hover: #34333a;
-	--spoiler-open-bg: #767587;
-
-	--unknown-file-bg: #bdbdbd;
-	--unknown-file-border: #adadad;
-
-	--login-border: #c3c0e0;
-	--loading-bg: #b5b7cc;
-
-	--dialog-bg: #c1c8d6;
-	--dialog-border: #b9b7db;
-
-	--scrollbar-track: #d2cedf;
-	--scrollbar-thumb: #bdbcca;
-	--scrollbar-thumb-hover: #a7a7be;
-	--markdown-timestamp: #c8c8da;
-	--embed: #cdccd1;
-	--link: #5566cc;
-	--discovery-bg: #c6c6d8;
-	--message-jump:#ccceff;
-	--icon-color:black;
+	--black: #434392;
+	--red: #ca304d;
+	--secondary-text-soft: #211f2e;
+	--blank-bg: #494985;
+	--spoiler-text: #e4e6ed;
+}
+
+.Dark-Accent-theme {
+	color-scheme: dark;
+	
+	--primary-bg: color-mix(in srgb, #3f3f3f 65%, var(--accent-color));
+	--primary-hover: color-mix(in srgb, #373737 68%, var(--accent-color));
+	--primary-text: #ebebeb;
+	--primary-text-soft: #ebebebb8;
+
+	--secondary-bg: color-mix(in srgb, #222222 72%, var(--accent-color));
+	--secondary-hover: color-mix(in srgb, #222222 65%, var(--accent-color));
+
+	--servers-bg: color-mix(in srgb, #0b0b0b 70%, var(--accent-color));
+	--channels-bg: color-mix(in srgb, #292929 68%, var(--accent-color));
+	--channel-selected: color-mix(in srgb, #555555 65%, var(--accent-color));
+	--typebox-bg: color-mix(in srgb, #666666 60%, var(--accent-color));
+
+	--button-bg: color-mix(in srgb, #777777 56%, var(--accent-color));
+	--button-hover: color-mix(in srgb, #585858 58%, var(--accent-color));
+
+	--spoiler: color-mix(in srgb, #101010 72%, var(--accent-color));
+	--link: color-mix(in srgb, #99ccff 75%, var(--accent-color));
+	
+	--black: color-mix(in srgb, #000000 90%, var(--accent-color));
+	--icon: color-mix(in srgb, #ffffff, var(--accent-color));
+	--dock-bg: color-mix(in srgb, #171717 68%, var(--accent-color));
+	--spoiler-hover: color-mix(in srgb, #111111 80%, var(--accent-color));
+	--card-bg: color-mix(in srgb, #0b0b0b 70%, var(--accent-color));
+}
+
+/* Optional Variables */
+body {
+	--primary-text-prominent: var(--primary-text);
+	--secondary-text: var(--primary-text);
+	--secondary-text-soft: var(--primary-text-soft);
+	--text-input-bg: var(--secondary-bg);
+	--button-text: var(--primary-text);
+	--button-disabled-text: color-mix(in srgb, var(--button-text), transparent);
+
+	--icon: var(--accent-color);
+	--focus: var(--accent-color);
+	--shadow: color-mix(in srgb, var(--black) 30%, transparent);
+	--scrollbar: var(--primary-text-soft);
+	--scrollbar-track: var(--primary-hover);
+
+	--blank-bg: var(--channels-bg);
+	--divider: color-mix(in srgb, var(--primary-text), transparent);
+	--channels-header-bg: var(--channels-bg);
+	--channel-hover: color-mix(in srgb, var(--channel-selected) 60%, transparent);
+	--dock-bg: var(--secondary-bg);
+	--dock-hover: var(--secondary-hover);
+	--user-info-bg: var(--dock-bg);
+	--user-info-text: var(--secondary-text);
+
+	--main-header-bg: transparent;
+	--message-jump-bg: color-mix(in srgb, var(--accent-color) 20%, transparent);
+	--code-bg: var(--secondary-bg);
+	--code-text: var(--secondary-text);
+	--spoiler-text: var(--primary-text);
+	--spoiler-hover: color-mix(in srgb, var(--spoiler-bg), var(--primary-text-soft) 10%);
+	--quote-line: color-mix(in srgb, var(--primary-text-soft), transparent);
+	--reply-line: color-mix(in srgb, var(--primary-text-soft) 20%, transparent);
+	--reply-text: var(--primary-text-soft);
+	--reply-highlight: var(--accent-color);
+	--mention: color-mix(in srgb, var(--accent-color) 80%, transparent);
+	--mention-highlight: var(--yellow);
+	--reaction-bg: var(--secondary-bg);
+	--reaction-reacted-bg: var(--secondary-hover);
+	--filename: var(--link);
+	--embed-bg: var(--secondary-bg);
+
+	--sidebar-bg: var(--channels-bg);
+	--sidebar-hover: var(--channel-hover);
+	--card-bg: var(--primary-bg);
+	--role-bg: var(--primary-bg);
+	--role-text: var(--primary-text);
+	--settings-bg: var(--primary-bg);
+	--settings-header-bg: var(--main-header-bg);
+	--settings-panel-bg: var(--channels-bg);
+	--settings-panel-selected: var(--channel-selected);
+	--settings-panel-hover: color-mix(in srgb, var(--settings-panel-selected), transparent);
+	--loading-bg: var(--secondary-bg);
+	--loading-text: var(--secondary-text);
 }
--- a/src/webpage/user.ts
+++ b/src/webpage/user.ts
@ -245,7 +245,7 @@ class User extends SnowFlake{

 	async buildstatuspfp(): Promise<HTMLDivElement>{
 		const div = document.createElement("div");
-		div.style.position = "relative";
+		div.classList.add("pfpDiv")
 		const pfp = this.buildpfp();
 		div.append(pfp);
 		const status = document.createElement("div");
@ -399,7 +399,7 @@ class User extends SnowFlake{
 			div.classList.add("profile", "flexttb");
 		}else{
 			this.setstatus("online");
-			div.classList.add("hypoprofile", "flexttb");
+			div.classList.add("hypoprofile", "profile", "flexttb");
 		}
 		const badgediv = document.createElement("div");
 		badgediv.classList.add("badges");
@ -426,7 +426,7 @@ class User extends SnowFlake{
 		const pfp = await this.buildstatuspfp();
 		div.appendChild(pfp);
 		const userbody = document.createElement("div");
-		userbody.classList.add("infosection");
+		userbody.classList.add("flexttb","infosection");
 		div.appendChild(userbody);
 		const usernamehtml = document.createElement("h2");
 		usernamehtml.textContent = this.username;
@ -450,7 +450,7 @@ class User extends SnowFlake{
 			Member.resolveMember(this, guild).then(member=>{
 				if(!member)return;
 				const roles = document.createElement("div");
-				roles.classList.add("rolesbox");
+				roles.classList.add("flexltr","rolesbox");
 				for(const role of member.roles){
 					const roleDiv = document.createElement("div");
 					roleDiv.classList.add("rolediv");
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180"><path fill="#c9c9c9" stroke="red" stroke-linecap="round" stroke-width="24" d="M90 168V12M12 90h156"/></svg>`