feat: start implementing styles and layouts

public/themes/style/ash.css

@@ -0,0 +1,28 @@
+/*
+displayName = Ash
+previewGradient = 45deg, #2f2e2d, #46423b
+complementaryColor = white
+*/
+
+:root {
+	--text-color: #f0e5e0;
+	--secondary-text-color: #e8e0db;
+	--reply-text-color: #969696;
+	--danger-text-color: #ff0000;
+
+	--chat-background-color: #2f2e2d;
+    --chat-highlighted-background-color: #3f3b38;
+	--sidebar-background-color: #3e3a37;
+	--sidebar-highlighted-background-color: #46423b;
+	--topbar-background-color: #3a3733;
+	--chatbox-background-color: #3a3733;
+
+    --padding-color: #e0e0e0;
+
+	--primary-color: #f07028;
+	--primary-highlighted-color: #f28f4b;
+	--secondary-color: #683820;
+	--secondary-highlighted-color: #885830;
+	--accent-color: #a04b24;
+	--accent-highlighted-color: #b86038;
+}

public/themes/style/dark.css

@@ -0,0 +1,28 @@
+/*
+displayName = Dark
+previewGradient = 45deg, #1f1e1d, #36322b
+complementaryColor = white
+*/
+
+:root {
+	--text-color: #f7eee8;
+	--secondary-text-color: #f0e8e4;
+	--reply-text-color: #969696;
+	--danger-text-color: #ff0000;
+
+	--chat-background-color: #1f1e1d;
+    --chat-highlighted-background-color: #2f2b28;
+	--sidebar-background-color: #2e2a27;
+	--sidebar-highlighted-background-color: #36322b;
+	--topbar-background-color: #2a2723;
+	--chatbox-background-color: #1a1713;
+
+    --padding-color: #484848;
+    
+	--primary-color: #f4741f;
+	--primary-highlighted-color: #f68a3f;
+	--secondary-color: #7c4018;
+	--secondary-highlighted-color: #8f5b2c;
+	--accent-color: #b35719;
+	--accent-highlighted-color: #c76a2e;
+}

public/themes/style/description.css

@@ -0,0 +1,37 @@
+/*
+displayName = Description
+previewGradient = 45deg, #ff8f8f, #8f8fff
+complementaryColor = black
+*/
+
+/* this is not a real theme, but rather a template for themes */
+
+:root {
+	--text-color: #161518;
+	--secondary-text-color: #2b2930;
+	--reply-text-color: #969696;
+
+    --chat-background-color: #80808000;
+    --chat-highlighted-background-color: #ffffff20;
+	--sidebar-background-color: #80808000;
+	--sidebar-highlighted-background-color: #ffffff20;
+	--topbar-background-color: #80808000;
+	--chatbox-background-color: #80808000;
+
+    --padding-color: #80808000;
+    
+    --primary-color: #21b1ff80;
+    --primary-highlighted-color: #18a0df80;
+    --secondary-color: #ffd80080;
+    --secondary-highlighted-color: #dfb80080;
+    --accent-color: #ff218c80;
+    --accent-highlighted-color: #df1b6f80;
+
+    --optional-body-background: ; /* background element for the body */
+    --optional-chat-background: ; /* background element for the chat box */
+	--optional-topbar-background: ; /* background element for the topbar */
+	--optional-sidebar-background: ; /* background element for left server sidebar */
+	--optional-channel-list-background: ; /* background element for channel list and settings list */
+	--optional-member-list-background: ; /* background element for member list */
+	--optional-message-box-background: ; /* background element for message box */
+}

public/themes/style/light.css

@@ -0,0 +1,28 @@
+/*
+displayName = Light
+previewGradient = 45deg, #f0ebe8, #d4d0ca
+complementaryColor = black
+*/
+
+:root {
+	--text-color: #170f08;
+	--secondary-text-color: #2f2b28;
+	--reply-text-color: #969696;
+	--danger-text-color: #ff0000;
+
+    --chat-background-color: #f0ebe8;
+    --chat-highlighted-background-color: #e8e4e0;
+	--sidebar-background-color: #dbd8d4;
+	--sidebar-highlighted-background-color: #d4d0ca;
+	--topbar-background-color: #dfdbd6;
+	--chatbox-background-color: #dfdbd6;
+
+    --padding-color: #484848;
+    
+    --primary-color: #df5f0b;
+    --primary-highlighted-color: #ef6812;
+    --secondary-color: #e8ac84;
+    --secondary-highlighted-color: #f8b68a;
+    --accent-color: #e68b4e;
+    --accent-highlighted-color: #f69254;
+}

public/themes/style/rainbow-capitalism.css

@@ -0,0 +1,36 @@
+/*
+displayName = Woke
+previewGradient = 45deg, #ed2224, #ed2224, #f35b22, #f99621, #f5c11e, #f1eb1b 27%, #f1eb1b, #f1eb1b 33%, #63c720, #0c9b49, #21878d, #3954a5, #61379b, #93288e, #93288e
+complementaryColor = white
+*/
+
+:root {
+	--text-color: #161518;
+	--secondary-text-color: #2b2930;
+	--reply-text-color: #969696;
+	--danger-text-color: #ff0000;
+
+    --chat-background-color: #80808000;
+    --chat-highlighted-background-color: #ffffff20;
+	--sidebar-background-color: #80808000;
+	--sidebar-highlighted-background-color: #ffffff20;
+	--topbar-background-color: #80808000;
+	--chatbox-background-color: #80808040;
+
+    --padding-color: #80808000;
+    
+    --primary-color: #21b1ff80;
+    --primary-highlighted-color: #18a0df80;
+    --secondary-color: #ffd80080;
+    --secondary-highlighted-color: #dfb80080;
+    --accent-color: #ff218c80;
+    --accent-highlighted-color: #df1b6f80;
+
+    /* --optional-body-background: background */
+    --optional-body-background: linear-gradient(45deg, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #f35b2280, #f9962180, #f5c11e80, #f1eb1b80, #f1eb1b80, #f1eb1b80, #63c72080, #0c9b4980, #21878d80, #3954a580, #61379b80, #93288e80);
+	--optional-topbar-background: linear-gradient(-12.5deg, cyan, pink, white, pink, cyan);
+	--optional-sidebar-background: linear-gradient(90deg, #55cdfcd0, #f7a8b8d0, #ffffffd0, #f7a8b8d0, #55cdfcd0);
+	--optional-channel-list-background: linear-gradient(82deg, #d52c00b0, #e29688b0, #ffffffb0, #d27fa4b0, #a20062b0);
+	--optional-member-list-background: linear-gradient(3deg, #ff0080, #c8259d, #8c4799, #442e9f, #0032a0);
+    --optional-message-box-background: linear-gradient(3deg, #ff0080, #c8259d, #8c4799, #442e9f, #0032a0);
+}

public/themes/style/styles.json

@@ -0,0 +1,6 @@
+[
+	"ash.css",
+	"dark.css",
+	"light.css",
+	"rainbow-capitalism.css"
+]