Black theme

src/app/globals.css

@@ -102,7 +102,7 @@
   --chart-3: oklch(0.769 0.188 70.08);
   --chart-4: oklch(0.627 0.265 303.9);
   --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
+  --sidebar: oklch(0.145 0 0);
   --sidebar-foreground: oklch(0.985 0 0);
   --sidebar-primary: oklch(0.488 0.243 264.376);
   --sidebar-primary-foreground: oklch(0.985 0 0);
@@ -112,6 +112,40 @@
   --sidebar-ring: oklch(0.556 0 0);
 }
 
+.black {
+  --background: oklch(0.050 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.150 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.150 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.150 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.215 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.200 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(0.3 0 0 / 70%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.150 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.150 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
 @layer base {
   * {
     @apply border-border outline-ring/50;

src/components/app/SidebarChannels.tsx

@@ -26,7 +26,7 @@ export function ChannelItem({ channel }: { channel: Channel }) {
 
 export default function SidebarChannels({ server }: { server: Server }) {
   return (
-    <div className="w-full flex flex-col bg-card/50">
+    <div className="w-full flex flex-col bg-sidebar">
       <div className="p-3 border-b flex items-center gap-2">
         <h2>{server.name}</h2>
       </div>

src/components/app/SidebarDMs.tsx

@@ -46,7 +46,7 @@ export default function SidebarDMs({ app }: { app: App }) {
   }, [query, app.messages, app.profile]);
 
   return (
-    <div className="w-full flex flex-col bg-card/50">
+    <div className="w-full flex flex-col bg-sidebar">
       <div className="p-3 border-b flex items-center">
         <div className="relative w-full">
           <Input

src/lib/clientSettings.ts

@@ -2,7 +2,7 @@ import { ClientSettings } from "@/types/settings";
 import Cookies from "js-cookie";
 
 export const defaultSettings: ClientSettings = {
-  theme: "dark",
+  theme: "black",
 };
 
 export function parseClientSettings(s?: string): ClientSettings {

src/types/settings.ts

@@ -4,7 +4,7 @@ import {
 } from "@/components/settings/SettingSchema";
 
 export interface ClientSettings {
-  theme: "light" | "dark";
+  theme: "light" | "dark" | "black";
 }
 
 export interface ProfileSettings {
@@ -15,7 +15,7 @@ export interface ProfileSettings {
 }
 
 export const CLIENT_SCHEMA: SettingsSchema = {
-  theme: ["light", "dark"],
+  theme: ["light", "dark", "black"],
 };
 
 export const PROFILE_SCHEMA: SettingsSchema = {