theme
This commit is contained in:
+54
-54
@@ -14,10 +14,10 @@
|
||||
|
||||
/* Premium Midnight Purple (Amethyst) */
|
||||
.theme-amethyst, :root {
|
||||
--background-primary: #161126;
|
||||
--background-secondary: #0f0a1a;
|
||||
--background-tertiary: #0a0714;
|
||||
--background-accent: #241b3d;
|
||||
--background-primary: #1f1e22;
|
||||
--background-secondary: #19181c;
|
||||
--background-tertiary: #121114;
|
||||
--background-accent: #2b2a30;
|
||||
--header-primary: #f3eeff;
|
||||
--text-normal: #e0d1f0;
|
||||
--text-muted: #9a8cbb;
|
||||
@@ -25,18 +25,18 @@
|
||||
--interactive-hover: #ffffff;
|
||||
--brand: #9d4edd;
|
||||
--brand-hover: #7b2cbf;
|
||||
--background-modifier-hover: rgba(157, 78, 221, 0.15);
|
||||
--background-modifier-active: rgba(157, 78, 221, 0.3);
|
||||
--background-modifier-selected: rgba(157, 78, 221, 0.3);
|
||||
--background-floating: #0a0714;
|
||||
--background-modifier-hover: rgba(157, 78, 221, 0.08);
|
||||
--background-modifier-active: rgba(157, 78, 221, 0.15);
|
||||
--background-modifier-selected: rgba(157, 78, 221, 0.15);
|
||||
--background-floating: #121114;
|
||||
}
|
||||
|
||||
/* Slate Cyan (Cyber) */
|
||||
.theme-cyan {
|
||||
--background-primary: #121826;
|
||||
--background-secondary: #0c111a;
|
||||
--background-tertiary: #080c13;
|
||||
--background-accent: #1f2937;
|
||||
--background-primary: #1e2022;
|
||||
--background-secondary: #181a1c;
|
||||
--background-tertiary: #111314;
|
||||
--background-accent: #2a2c30;
|
||||
--header-primary: #f8fafc;
|
||||
--text-normal: #cbd5e1;
|
||||
--text-muted: #64748b;
|
||||
@@ -44,18 +44,18 @@
|
||||
--interactive-hover: #f1f5f9;
|
||||
--brand: #00d2ff;
|
||||
--brand-hover: #00a8cc;
|
||||
--background-modifier-hover: rgba(0, 210, 255, 0.15);
|
||||
--background-modifier-active: rgba(0, 210, 255, 0.3);
|
||||
--background-modifier-selected: rgba(0, 210, 255, 0.3);
|
||||
--background-floating: #080c13;
|
||||
--background-modifier-hover: rgba(0, 210, 255, 0.08);
|
||||
--background-modifier-active: rgba(0, 210, 255, 0.15);
|
||||
--background-modifier-selected: rgba(0, 210, 255, 0.15);
|
||||
--background-floating: #111314;
|
||||
}
|
||||
|
||||
/* Deep Sea Green (Emerald) */
|
||||
.theme-emerald {
|
||||
--background-primary: #061a14;
|
||||
--background-secondary: #04120e;
|
||||
--background-tertiary: #020a08;
|
||||
--background-accent: #0d2e24;
|
||||
--background-primary: #1e2220;
|
||||
--background-secondary: #181c1a;
|
||||
--background-tertiary: #111413;
|
||||
--background-accent: #2a302c;
|
||||
--header-primary: #e6fffa;
|
||||
--text-normal: #b2f5ea;
|
||||
--text-muted: #4e9a84;
|
||||
@@ -63,18 +63,18 @@
|
||||
--interactive-hover: #ffffff;
|
||||
--brand: #10b981;
|
||||
--brand-hover: #059669;
|
||||
--background-modifier-hover: rgba(16, 185, 129, 0.15);
|
||||
--background-modifier-active: rgba(16, 185, 129, 0.3);
|
||||
--background-modifier-selected: rgba(16, 185, 129, 0.3);
|
||||
--background-floating: #020a08;
|
||||
--background-modifier-hover: rgba(16, 185, 129, 0.08);
|
||||
--background-modifier-active: rgba(16, 185, 129, 0.15);
|
||||
--background-modifier-selected: rgba(16, 185, 129, 0.15);
|
||||
--background-floating: #111413;
|
||||
}
|
||||
|
||||
/* Crimson Rose (Rose) */
|
||||
.theme-rose {
|
||||
--background-primary: #1a0a0f;
|
||||
--background-secondary: #12060a;
|
||||
--background-tertiary: #0a0305;
|
||||
--background-accent: #2e0d16;
|
||||
--background-primary: #221e1f;
|
||||
--background-secondary: #1c1819;
|
||||
--background-tertiary: #141112;
|
||||
--background-accent: #302a2b;
|
||||
--header-primary: #fff5f7;
|
||||
--text-normal: #fed7e2;
|
||||
--text-muted: #9b4e64;
|
||||
@@ -82,18 +82,18 @@
|
||||
--interactive-hover: #ffffff;
|
||||
--brand: #f43f5e;
|
||||
--brand-hover: #e11d48;
|
||||
--background-modifier-hover: rgba(244, 63, 94, 0.15);
|
||||
--background-modifier-active: rgba(244, 63, 94, 0.3);
|
||||
--background-modifier-selected: rgba(244, 63, 94, 0.3);
|
||||
--background-floating: #0a0305;
|
||||
--background-modifier-hover: rgba(244, 63, 94, 0.08);
|
||||
--background-modifier-active: rgba(244, 63, 94, 0.15);
|
||||
--background-modifier-selected: rgba(244, 63, 94, 0.15);
|
||||
--background-floating: #141112;
|
||||
}
|
||||
|
||||
/* Amber Gold (Amber) */
|
||||
.theme-amber {
|
||||
--background-primary: #1a1405;
|
||||
--background-secondary: #120e03;
|
||||
--background-tertiary: #0a0802;
|
||||
--background-accent: #2e240d;
|
||||
--background-primary: #22201e;
|
||||
--background-secondary: #1c1a18;
|
||||
--background-tertiary: #141311;
|
||||
--background-accent: #302c2a;
|
||||
--header-primary: #fffaf0;
|
||||
--text-normal: #fef3c7;
|
||||
--text-muted: #9a7b4e;
|
||||
@@ -101,28 +101,28 @@
|
||||
--interactive-hover: #ffffff;
|
||||
--brand: #f59e0b;
|
||||
--brand-hover: #d97706;
|
||||
--background-modifier-hover: rgba(245, 158, 11, 0.15);
|
||||
--background-modifier-active: rgba(245, 158, 11, 0.3);
|
||||
--background-modifier-selected: rgba(245, 158, 11, 0.3);
|
||||
--background-floating: #0a0802;
|
||||
--background-modifier-hover: rgba(245, 158, 11, 0.08);
|
||||
--background-modifier-active: rgba(245, 158, 11, 0.15);
|
||||
--background-modifier-selected: rgba(245, 158, 11, 0.15);
|
||||
--background-floating: #141311;
|
||||
}
|
||||
|
||||
/* Generic Dark (Standard) */
|
||||
.theme-dark {
|
||||
--background-primary: #313338;
|
||||
--background-secondary: #2b2d31;
|
||||
--background-primary: #2b2d31;
|
||||
--background-secondary: #232428;
|
||||
--background-tertiary: #1e1f22;
|
||||
--background-accent: #35373c;
|
||||
--background-accent: #313338;
|
||||
--header-primary: #f2f3f5;
|
||||
--text-normal: #dbdee1;
|
||||
--text-muted: #949ba4;
|
||||
--interactive-normal: #b5bac1;
|
||||
--interactive-hover: #dbdee1;
|
||||
--brand: #5865f2;
|
||||
--brand-hover: #4752c4;
|
||||
--background-modifier-hover: rgba(78, 80, 88, 0.3);
|
||||
--background-modifier-active: rgba(78, 80, 88, 0.6);
|
||||
--background-modifier-selected: rgba(78, 80, 88, 0.6);
|
||||
--brand: #3b82f6;
|
||||
--brand-hover: #2563eb;
|
||||
--background-modifier-hover: rgba(59, 130, 246, 0.08);
|
||||
--background-modifier-active: rgba(59, 130, 246, 0.15);
|
||||
--background-modifier-selected: rgba(59, 130, 246, 0.15);
|
||||
--background-floating: #1e1f22;
|
||||
}
|
||||
|
||||
@@ -131,17 +131,17 @@
|
||||
--background-primary: #ffffff;
|
||||
--background-secondary: #f2f3f5;
|
||||
--background-tertiary: #e3e5e8;
|
||||
--background-accent: #ebedef;
|
||||
--background-accent: #f8fafc;
|
||||
--header-primary: #060607;
|
||||
--text-normal: #313338;
|
||||
--text-muted: #5c6067;
|
||||
--interactive-normal: #4e5058;
|
||||
--interactive-hover: #060607;
|
||||
--brand: #5865f2;
|
||||
--brand-hover: #4752c4;
|
||||
--background-modifier-hover: rgba(78, 80, 88, 0.1);
|
||||
--background-modifier-active: rgba(78, 80, 88, 0.2);
|
||||
--background-modifier-selected: rgba(78, 80, 88, 0.2);
|
||||
--brand: #3b82f6;
|
||||
--brand-hover: #2563eb;
|
||||
--background-modifier-hover: rgba(59, 130, 246, 0.06);
|
||||
--background-modifier-active: rgba(59, 130, 246, 0.1);
|
||||
--background-modifier-selected: rgba(59, 130, 246, 0.1);
|
||||
--background-floating: #ffffff;
|
||||
}
|
||||
|
||||
|
||||
@@ -6,13 +6,13 @@
|
||||
const chat = getContext<ChatService>("chat");
|
||||
|
||||
const themes = [
|
||||
{ id: "dark", name: "Dark", color: "#5865f2", bg: "#313338" },
|
||||
{ id: "light", name: "Light", color: "#5865f2", bg: "#ffffff" },
|
||||
{ id: "amethyst", name: "Amethyst", color: "#9d4edd", bg: "#0f0a1a" },
|
||||
{ id: "cyan", name: "Cyber Cyan", color: "#00d2ff", bg: "#0c111a" },
|
||||
{ id: "emerald", name: "Emerald Sea", color: "#10b981", bg: "#04120e" },
|
||||
{ id: "rose", name: "Crimson Rose", color: "#f43f5e", bg: "#12060a" },
|
||||
{ id: "amber", name: "Amber Gold", color: "#f59e0b", bg: "#120e03" },
|
||||
{ id: "dark", name: "Dark", color: "#3b82f6", bg: "#2b2d31" },
|
||||
{ id: "light", name: "Light", color: "#3b82f6", bg: "#ffffff" },
|
||||
{ id: "amethyst", name: "Amethyst", color: "#9d4edd", bg: "#1f1e22" },
|
||||
{ id: "cyan", name: "Cyber Cyan", color: "#00d2ff", bg: "#1e2022" },
|
||||
{ id: "emerald", name: "Emerald Sea", color: "#10b981", bg: "#1e2220" },
|
||||
{ id: "rose", name: "Crimson Rose", color: "#f43f5e", bg: "#221e1f" },
|
||||
{ id: "amber", name: "Amber Gold", color: "#f59e0b", bg: "#22201e" },
|
||||
];
|
||||
|
||||
let newEmojiName = $state("");
|
||||
|
||||
Reference in New Issue
Block a user