feat(ui): add workspace customization and simplify navigation

app/(dashboard)/analytics/analytics-client.tsx

@@ -7,7 +7,6 @@ import {
   Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis,
   PieChart, Pie, Cell, Legend
 } from "recharts";
-import { BarChart3, Filter } from "lucide-react";
 
 export type AnalyticsData = {
   metrics: {
@@ -45,11 +44,6 @@ export function AnalyticsClient({ data }: AnalyticsClientProps) {
   return (
     <div className="mx-auto flex max-w-7xl flex-col gap-6">
       <div className="flex flex-col gap-4 border-b border-border pb-5 lg:flex-row lg:items-end lg:justify-between">
-        <div className="space-y-2">
-          <div className="flex items-center gap-2 text-sm text-muted-foreground">
-            <BarChart3 className="h-4 w-4" />
-            Analizler
-          </div>
         <div>
           <h1 className="text-3xl font-semibold tracking-normal text-foreground">
             Performans ve Finans Analizi
@@ -58,7 +52,6 @@ export function AnalyticsClient({ data }: AnalyticsClientProps) {
             Müşteri bazlı gelirler, görev tamamlama oranları ve proje ilerleme grafikleri.
           </p>
         </div>
-        </div>
 
         <div className="flex items-center gap-3">
           <Select value={data.range} onValueChange={handleRangeChange}>

app/(dashboard)/calendar/calendar-client.tsx

@@ -21,7 +21,7 @@ import {
   SelectValue,
   toast,
 } from "poyraz-ui/molecules";
-import { CalendarDays, Clock, Pencil, Plus, Trash2 } from "lucide-react";
+import { Clock, Pencil, Plus, Trash2 } from "lucide-react";
 import { useMemo, useState } from "react";
 
 export type CalendarRelationOption = {
@@ -89,18 +89,12 @@ export function CalendarClient({ events, clients, projects, tasks }: CalendarCli
   return (
     <div className="mx-auto flex max-w-7xl flex-col gap-6">
       <div className="flex flex-col gap-4 border-b border-border pb-5 lg:flex-row lg:items-end lg:justify-between">
-        <div className="space-y-2">
-          <div className="flex items-center gap-2 text-sm text-muted-foreground">
-            <CalendarDays className="h-4 w-4" />
-            Planlama
-          </div>
         <div>
           <h1 className="text-3xl font-semibold tracking-normal text-foreground">Takvim</h1>
           <p className="mt-1 max-w-2xl text-sm text-muted-foreground">
             Toplantı, odak bloğu, deadline, kişisel ve finans etkinliklerini yönet.
           </p>
         </div>
-        </div>
 
         <CalendarEventDialog
           mode="create"

app/(dashboard)/clients/clients-client.tsx

@@ -163,11 +163,6 @@ export function ClientsClient({
   return (
     <div className="mx-auto flex max-w-7xl flex-col gap-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
       <div className="flex flex-col gap-4 border-b border-border pb-5 lg:flex-row lg:items-end lg:justify-between">
-        <div className="space-y-2">
-          <div className="flex items-center gap-2 text-sm text-muted-foreground">
-            <Users className="h-4 w-4" />
-            CRM & Operasyon
-          </div>
         <div>
           <h1 className="text-3xl font-semibold tracking-normal text-foreground">
             CRM & Müşteriler
@@ -176,7 +171,6 @@ export function ClientsClient({
             Potansiyel müşterilerini pipeline üzerinden takip et ve müşteri ilişkilerini yönet.
           </p>
         </div>
-        </div>
 
         <ClientDialog mode="create" />
       </div>

app/(dashboard)/dashboard-client.tsx

@@ -64,11 +64,6 @@ export function DashboardClient({ data }: DashboardClientProps) {
     <div className="mx-auto flex max-w-7xl flex-col gap-6">
       {/* Header */}
       <div className="flex flex-col gap-4 border-b border-border pb-5 lg:flex-row lg:items-end lg:justify-between">
-        <div className="space-y-2">
-          <div className="flex items-center gap-2 text-sm text-muted-foreground">
-            <Activity className="h-4 w-4" />
-            Genel Bakış
-          </div>
         <div>
           <h1 className="text-3xl font-semibold tracking-normal text-foreground">
             Dashboard
@@ -77,7 +72,6 @@ export function DashboardClient({ data }: DashboardClientProps) {
             İş performansını, gelirlerini ve günlük durumunu takip et.
           </p>
         </div>
-        </div>
 
         <div className="flex items-center gap-3">
           <Select value={data.range} onValueChange={handleRangeChange}>

app/(dashboard)/finance/finance-client.tsx

@@ -115,11 +115,6 @@ export function FinanceClient({ transactions, clients, projects }: FinanceClient
   return (
     <div className="mx-auto flex max-w-7xl flex-col gap-6">
       <div className="flex flex-col gap-4 border-b border-border pb-5 lg:flex-row lg:items-end lg:justify-between">
-        <div className="space-y-2">
-          <div className="flex items-center gap-2 text-sm text-muted-foreground">
-            <Wallet className="h-4 w-4" />
-            Finans
-          </div>
         <div>
           <h1 className="text-3xl font-semibold tracking-normal text-foreground">
             Finans işlemleri
@@ -128,7 +123,6 @@ export function FinanceClient({ transactions, clients, projects }: FinanceClient
             Gelir, gider, ödeme durumu ve proje/müşteri bağlantılarını takip et.
           </p>
         </div>
-        </div>
         <div className="flex gap-2">
           <AIFinanceDialog />
           <FinanceDialog mode="create" clients={clients} projects={projects} />

app/(dashboard)/journal/journal-client.tsx

@@ -77,11 +77,6 @@ export function JournalClient({ logs }: JournalClientProps) {
   return (
     <div className="mx-auto flex max-w-7xl flex-col gap-6">
       <div className="flex flex-col gap-4 border-b border-border pb-5 lg:flex-row lg:items-end lg:justify-between">
-        <div className="space-y-2">
-          <div className="flex items-center gap-2 text-sm text-muted-foreground">
-            <Activity className="h-4 w-4" />
-            Günlük durum
-          </div>
         <div>
           <h1 className="text-3xl font-semibold tracking-normal text-foreground">
             Mood ve enerji
@@ -90,7 +85,6 @@ export function JournalClient({ logs }: JournalClientProps) {
             Günlük ruh hali, enerji ve çalışma memnuniyetini takip ederek kişisel kapasite trendini gör.
           </p>
         </div>
-        </div>
 
         <div className="flex flex-col gap-2 sm:flex-row">
           <DailyLogDialog mode="create" />

app/(dashboard)/layout.tsx

@@ -1,14 +1,18 @@
 import { DashboardShell } from "@/components/layout/dashboard-shell";
+import { domainActorFromSession } from "@/server/auth/domain-actor";
 import { requireFreelancer } from "@/server/auth/session";
 import { getPublicBranding } from "@/server/branding/runtime";
+import { getUserPreferences } from "@/server/settings/preferences";
 
 export default async function DashboardLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const { user, profile } = await requireFreelancer();
+  const context = await requireFreelancer();
+  const { user, profile } = context;
   const branding = getPublicBranding();
+  const preferences = getUserPreferences(domainActorFromSession(context));
   const displayName = profile.displayName || user.name || user.email.split("@")[0] || "Neta Kullanıcısı";
 
   const shortName =
@@ -28,6 +32,7 @@ export default async function DashboardLayout({
         lightLogoUrl: branding.lightLogoUrl,
         darkLogoUrl: branding.darkLogoUrl,
       }}
+      colorMode={preferences.colorMode}
       user={{
         email: user.email,
         displayName,

app/(dashboard)/projects/projects-client.tsx

@@ -114,11 +114,6 @@ export function ProjectsClient({ projects, clients }: ProjectsClientProps) {
   return (
     <div className="mx-auto flex max-w-7xl flex-col gap-6">
       <div className="flex flex-col gap-4 border-b border-border pb-5 lg:flex-row lg:items-end lg:justify-between">
-        <div className="space-y-2">
-          <div className="flex items-center gap-2 text-sm text-muted-foreground">
-            <FolderKanban className="h-4 w-4" />
-            İş ve side project yönetimi
-          </div>
         <div>
           <h1 className="text-3xl font-semibold tracking-normal text-foreground">
             Projeler
@@ -127,7 +122,6 @@ export function ProjectsClient({ projects, clients }: ProjectsClientProps) {
             Müşteri işleri ve kişisel side projectleri aynı yerde takip et.
           </p>
         </div>
-        </div>
 
         <div className="flex gap-2">
           <AIProjectRiskDialog />

app/(dashboard)/settings/actions.ts

@@ -1,14 +1,24 @@
 "use server";
 
 import { eq } from "drizzle-orm";
-import { headers } from "next/headers";
+import { cookies, headers } from "next/headers";
 import { revalidatePath } from "next/cache";
 import { auth } from "@/server/auth/auth";
+import {
+  COLOR_MODE_COOKIE,
+  COLOR_MODE_COOKIE_MAX_AGE,
+} from "@/lib/color-mode";
+import { getServerConfig } from "@/server/config";
+import { getBrandingService } from "@/server/branding/runtime";
 import { getSqliteConnection } from "@/server/db/client";
 import { appProfiles } from "@/server/db/schema";
 import { domainActorFromSession } from "@/server/auth/domain-actor";
 import { getFileService } from "@/server/files/runtime";
 import { getPublicAiSettings, updateAiSettings } from "@/server/settings/ai";
+import {
+  getUserPreferences,
+  updateColorModePreference,
+} from "@/server/settings/preferences";
 import { requireFreelancerBackend } from "@/server/web/freelancer";
 import { cleanText } from "@/server/web/form-data";
 
@@ -16,6 +26,8 @@ export async function loadSettings() {
   const { context, actor } = await requireFreelancerBackend();
   const [firstName = "", ...lastNameParts] = context.profile.displayName.trim().split(/\s+/);
   const ai = getPublicAiSettings(actor);
+  const preferences = getUserPreferences(actor);
+  const branding = getBrandingService().getPublic();
 
   return {
     firstName,
@@ -23,6 +35,11 @@ export async function loadSettings() {
     avatarUrl: context.user.image ?? "",
     aiProvider: ai.provider,
     hasApiKey: ai.hasApiKey,
+    colorMode: preferences.colorMode,
+    workspaceName: branding.applicationName,
+    primaryColor: branding.primaryColor,
+    logoUrl: branding.lightLogoUrl ?? branding.darkLogoUrl ?? "",
+    hasCustomLogo: Boolean(branding.lightLogoFileId || branding.darkLogoFileId),
   };
 }
 
@@ -98,3 +115,141 @@ export async function saveAiSettings(provider: string, apiKey: string) {
     return { error: error instanceof Error ? error.message : "Ayarlar kaydedilemedi." };
   }
 }
+
+export async function saveColorMode(colorMode: string) {
+  try {
+    const { actor } = await requireFreelancerBackend();
+    const preferences = updateColorModePreference(actor, { colorMode });
+    const config = getServerConfig();
+
+    (await cookies()).set(COLOR_MODE_COOKIE, preferences.colorMode, {
+      httpOnly: false,
+      maxAge: COLOR_MODE_COOKIE_MAX_AGE,
+      path: "/",
+      sameSite: "lax",
+      secure: config.secureCookies,
+    });
+
+    revalidatePath("/", "layout");
+    return { success: true, colorMode: preferences.colorMode };
+  } catch (error) {
+    return { error: error instanceof Error ? error.message : "Tema tercihi kaydedilemedi." };
+  }
+}
+
+export async function saveWorkspaceBranding(formData: FormData) {
+  let uploadedLogoId: string | null = null;
+  let brandingCommitted = false;
+  let actorForCleanup: Awaited<ReturnType<typeof requireFreelancerBackend>>["actor"] | null = null;
+
+  try {
+    const { actor } = await requireFreelancerBackend();
+    actorForCleanup = actor;
+
+    const workspaceName = cleanText(formData.get("workspaceName"));
+    const primaryColor = cleanText(formData.get("primaryColor"))?.toUpperCase() ?? "";
+    if (!workspaceName || workspaceName.length > 80) {
+      return { error: "Workspace adı 1-80 karakter arasında olmalıdır." };
+    }
+    if (!/^#[0-9A-F]{6}$/.test(primaryColor)) {
+      return { error: "Ana renk #RRGGBB formatında olmalıdır." };
+    }
+
+    const brandingService = getBrandingService();
+    const fileService = getFileService();
+    const current = brandingService.getPublic();
+    const logo = formData.get("logo");
+
+    if (logo instanceof File && logo.size > 0) {
+      uploadedLogoId = fileService.upload(actor, {
+        kind: "branding_logo",
+        originalName: logo.name,
+        claimedMimeType: logo.type,
+        bytes: new Uint8Array(await logo.arrayBuffer()),
+      }).id;
+    }
+
+    const updated = brandingService.update(actor, {
+      applicationName: workspaceName,
+      shortName: Array.from(workspaceName).slice(0, 24).join(""),
+      organizationName: workspaceName,
+      primaryColor,
+      ...(uploadedLogoId
+        ? {
+            lightLogoFileId: uploadedLogoId,
+            darkLogoFileId: uploadedLogoId,
+          }
+        : {}),
+    });
+    brandingCommitted = true;
+
+    if (uploadedLogoId) {
+      deleteBrandingFilesBestEffort(
+        actor,
+        [current.lightLogoFileId, current.darkLogoFileId],
+        uploadedLogoId,
+      );
+    }
+
+    revalidateBrandingPaths();
+    return {
+      success: true,
+      workspaceName: updated.applicationName,
+      primaryColor: updated.primaryColor,
+      logoUrl: updated.lightLogoUrl ?? updated.darkLogoUrl ?? "",
+      hasCustomLogo: Boolean(updated.lightLogoFileId || updated.darkLogoFileId),
+    };
+  } catch (error) {
+    if (uploadedLogoId && actorForCleanup && !brandingCommitted) {
+      deleteBrandingFilesBestEffort(actorForCleanup, [uploadedLogoId]);
+    }
+    return { error: error instanceof Error ? error.message : "Workspace görünümü kaydedilemedi." };
+  }
+}
+
+export async function removeWorkspaceLogo() {
+  try {
+    const { actor } = await requireFreelancerBackend();
+    const brandingService = getBrandingService();
+    const current = brandingService.getPublic();
+    const updated = brandingService.update(actor, {
+      lightLogoFileId: null,
+      darkLogoFileId: null,
+    });
+
+    deleteBrandingFilesBestEffort(actor, [
+      current.lightLogoFileId,
+      current.darkLogoFileId,
+    ]);
+    revalidateBrandingPaths();
+    return {
+      success: true,
+      logoUrl: updated.lightLogoUrl ?? updated.darkLogoUrl ?? "",
+      hasCustomLogo: false,
+    };
+  } catch (error) {
+    return { error: error instanceof Error ? error.message : "Logo kaldırılamadı." };
+  }
+}
+
+function deleteBrandingFilesBestEffort(
+  actor: Awaited<ReturnType<typeof requireFreelancerBackend>>["actor"],
+  fileIds: Array<string | null>,
+  exceptId?: string,
+): void {
+  const uniqueFileIds = new Set(fileIds.filter((id): id is string => Boolean(id && id !== exceptId)));
+  for (const fileId of uniqueFileIds) {
+    try {
+      getFileService().delete(actor, fileId);
+    } catch {
+      // The branding update is authoritative; orphan cleanup can safely be retried later.
+    }
+  }
+}
+
+function revalidateBrandingPaths(): void {
+  revalidatePath("/", "layout");
+  revalidatePath("/settings");
+  revalidatePath("/portal", "layout");
+  revalidatePath("/manifest.webmanifest");
+}

app/(dashboard)/settings/page.tsx

@@ -2,15 +2,74 @@
 
 import { useEffect, useRef, useState } from "react";
 import Image from "next/image";
-import { Blocks, Brain, Key, Save, Shield, User } from "lucide-react";
+import {
-import { loadSettings, saveAiSettings, updatePassword, updateProfile } from "./actions";
+  Blocks,
-import { Button, Card, CardContent, Input, Label } from "poyraz-ui/atoms";
+  Brain,
+  Building2,
+  ImageIcon,
+  Key,
+  Monitor,
+  Moon,
+  Palette,
+  Save,
+  Shield,
+  Sun,
+  Trash2,
+  Upload,
+  User,
+} from "lucide-react";
+import {
+  loadSettings,
+  removeWorkspaceLogo,
+  saveAiSettings,
+  saveColorMode,
+  saveWorkspaceBranding,
+  updatePassword,
+  updateProfile,
+} from "./actions";
+import {
+  Button,
+  Card,
+  CardContent,
+  Input,
+  Label,
+  RadioGroup,
+  RadioGroupItem,
+} from "poyraz-ui/atoms";
 import { toast } from "poyraz-ui/molecules";
+import { applyColorMode } from "@/components/theme/color-mode-sync";
+import { isColorMode, type ColorMode } from "@/lib/color-mode";
 
 type AiProvider = "groq" | "ollama" | "openai" | "gemini";
 
+const colorModeOptions = [
+  {
+    value: "light",
+    label: "Açık",
+    description: "Her zaman aydınlık renk paletini kullanır.",
+    icon: Sun,
+  },
+  {
+    value: "dark",
+    label: "Koyu",
+    description: "Her zaman koyu renk paletini kullanır.",
+    icon: Moon,
+  },
+  {
+    value: "system",
+    label: "Sistem",
+    description: "Cihazınızın görünüm tercihini otomatik takip eder.",
+    icon: Monitor,
+  },
+] satisfies Array<{
+  value: ColorMode;
+  label: string;
+  description: string;
+  icon: typeof Sun;
+}>;
+
 export default function SettingsPage() {
-  const [activeTab, setActiveTab] = useState("AI Preferences");
+  const [activeTab, setActiveTab] = useState("Workspace");
 
   // Profile States
   const [firstName, setFirstName] = useState("");
@@ -24,9 +83,20 @@ export default function SettingsPage() {
   const [aiProvider, setAiProvider] = useState<AiProvider>("gemini");
   const [apiKey, setApiKey] = useState("");
   const [hasApiKey, setHasApiKey] = useState(false);
+  const [colorMode, setColorMode] = useState<ColorMode>("system");
+  const [isSavingColorMode, setIsSavingColorMode] = useState(false);
+  const [workspaceName, setWorkspaceName] = useState("Neta");
+  const [primaryColor, setPrimaryColor] = useState("#C81E1E");
+  const [logoUrl, setLogoUrl] = useState("");
+  const [pendingLogoUrl, setPendingLogoUrl] = useState("");
+  const [hasCustomLogo, setHasCustomLogo] = useState(false);
+  const [isSavingBranding, setIsSavingBranding] = useState(false);
+  const logoObjectUrlRef = useRef<string | null>(null);
 
   const tabs = [
+    { name: "Workspace", icon: Building2 },
     { name: "Profile & Account", icon: User },
+    { name: "Görünüm", icon: Palette },
     { name: "AI Preferences", icon: Brain },
     { name: "Security", icon: Shield },
   ];
@@ -42,12 +112,23 @@ export default function SettingsPage() {
       setAvatarUrl(settings.avatarUrl);
       setAiProvider(settings.aiProvider);
       setHasApiKey(settings.hasApiKey);
+      setColorMode(settings.colorMode);
+      setWorkspaceName(settings.workspaceName);
+      setPrimaryColor(settings.primaryColor);
+      setLogoUrl(settings.logoUrl);
+      setHasCustomLogo(settings.hasCustomLogo);
     };
 
     void fetchData();
     return () => { isActive = false; };
   }, []);
 
+  useEffect(() => {
+    return () => {
+      if (logoObjectUrlRef.current) URL.revokeObjectURL(logoObjectUrlRef.current);
+    };
+  }, []);
+
   const handleProfileAction = async (formData: FormData) => {
     const response = await updateProfile(formData);
     if (response?.error) {
@@ -80,23 +161,84 @@ export default function SettingsPage() {
     toast.success("Yapay Zeka ayarları kaydedildi!");
   };
 
+  const handleColorModeChange = async (value: string) => {
+    if (!isColorMode(value) || value === colorMode || isSavingColorMode) return;
+
+    const previousColorMode = colorMode;
+    setColorMode(value);
+    applyColorMode(value);
+    setIsSavingColorMode(true);
+
+    try {
+      const response = await saveColorMode(value);
+      if (response.error) {
+        setColorMode(previousColorMode);
+        applyColorMode(previousColorMode);
+        toast.error(response.error);
+        return;
+      }
+
+      toast.success("Görünüm tercihi kaydedildi.");
+    } finally {
+      setIsSavingColorMode(false);
+    }
+  };
+
+  const handleLogoChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (logoObjectUrlRef.current) URL.revokeObjectURL(logoObjectUrlRef.current);
+    const file = event.target.files?.[0];
+    const objectUrl = file ? URL.createObjectURL(file) : "";
+    logoObjectUrlRef.current = objectUrl || null;
+    setPendingLogoUrl(objectUrl);
+  };
+
+  const handleWorkspaceBrandingAction = async (formData: FormData) => {
+    setIsSavingBranding(true);
+    try {
+      const response = await saveWorkspaceBranding(formData);
+      if (response.error) {
+        toast.error(response.error);
+        return;
+      }
+
+      toast.success("Workspace görünümü güncellendi.");
+      window.location.reload();
+    } finally {
+      setIsSavingBranding(false);
+    }
+  };
+
+  const handleRemoveWorkspaceLogo = async () => {
+    setIsSavingBranding(true);
+    try {
+      const response = await removeWorkspaceLogo();
+      if (response.error) {
+        toast.error(response.error);
+        return;
+      }
+
+      setLogoUrl("");
+      setPendingLogoUrl("");
+      setHasCustomLogo(false);
+      toast.success("Workspace logosu kaldırıldı.");
+      window.location.reload();
+    } finally {
+      setIsSavingBranding(false);
+    }
+  };
+
   return (
     <div className="mx-auto flex max-w-7xl flex-col gap-6">
       <div className="flex flex-col gap-4 border-b border-border pb-5 lg:flex-row lg:items-end lg:justify-between">
-        <div className="space-y-2">
-          <div className="flex items-center gap-2 text-sm text-muted-foreground">
-            <span className="text-foreground">Settings</span> / {activeTab}
-          </div>
         <div>
           <h1 className="text-3xl font-semibold tracking-normal text-foreground">
             Ayarlar
           </h1>
           <p className="mt-1 max-w-2xl text-sm text-muted-foreground">
-              Profilinizi, güvenlik ayarlarınızı ve yapay zeka tercihlerinizi yönetin.
+            Workspace markanızı, profilinizi, görünümü ve sistem tercihlerinizi yönetin.
           </p>
         </div>
       </div>
-      </div>
 
       <div className="flex flex-col md:flex-row gap-8 flex-1 min-h-0 pb-12">
         {/* Settings Sidebar */}
@@ -122,6 +264,134 @@ export default function SettingsPage() {
 
         {/* Settings Content Area */}
         <div className="flex-1">
+          {activeTab === "Workspace" && (
+            <Card className="animate-in fade-in duration-300">
+              <CardContent className="p-6 sm:p-8">
+                <div className="mb-7 space-y-1.5">
+                  <h2 className="text-xl font-bold text-foreground">Workspace görünümü</h2>
+                  <p className="max-w-2xl text-sm text-muted-foreground">
+                    Müşterilerinizin ve sizin gördüğünüz workspace adını, logoyu ve ana rengi yönetin.
+                  </p>
+                </div>
+
+                <form action={handleWorkspaceBrandingAction} className="max-w-3xl space-y-8">
+                  <section className="space-y-3">
+                    <div className="space-y-1">
+                      <Label htmlFor="workspaceName">Workspace adı</Label>
+                      <p className="text-xs text-muted-foreground">
+                        Firma, freelance marka veya çalışma alanı adınız.
+                      </p>
+                    </div>
+                    <Input
+                      id="workspaceName"
+                      name="workspaceName"
+                      value={workspaceName}
+                      onChange={(event) => setWorkspaceName(event.target.value)}
+                      minLength={1}
+                      maxLength={80}
+                      required
+                    />
+                  </section>
+
+                  <section className="space-y-4 border-t border-border pt-7">
+                    <div className="space-y-1">
+                      <Label htmlFor="workspaceLogo">Workspace logosu</Label>
+                      <p className="text-xs text-muted-foreground">
+                        PNG, JPEG, WebP veya GIF; en fazla 5 MB. Şeffaf arka planlı yatay logo önerilir.
+                      </p>
+                    </div>
+
+                    <div className="grid gap-4 sm:grid-cols-[minmax(0,1fr)_minmax(220px,0.7fr)]">
+                      <div className="space-y-3">
+                        <Input
+                          id="workspaceLogo"
+                          name="logo"
+                          type="file"
+                          accept="image/png,image/jpeg,image/webp,image/gif"
+                          onChange={handleLogoChange}
+                          className="cursor-pointer"
+                        />
+                        {hasCustomLogo ? (
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            disabled={isSavingBranding}
+                            onClick={handleRemoveWorkspaceLogo}
+                            className="gap-2 text-destructive hover:text-destructive"
+                          >
+                            <Trash2 className="h-4 w-4" aria-hidden="true" />
+                            Logoyu kaldır
+                          </Button>
+                        ) : null}
+                      </div>
+
+                      <div className="flex min-h-28 items-center justify-center overflow-hidden rounded-md border border-border bg-muted/40 p-4">
+                        {pendingLogoUrl || logoUrl ? (
+                          <Image
+                            src={pendingLogoUrl || logoUrl}
+                            alt="Workspace logo önizlemesi"
+                            width={220}
+                            height={80}
+                            unoptimized
+                            className="max-h-20 w-auto max-w-full object-contain"
+                          />
+                        ) : (
+                          <div className="flex flex-col items-center gap-2 text-muted-foreground">
+                            <ImageIcon className="h-7 w-7" aria-hidden="true" />
+                            <span className="text-xs">Henüz özel logo yüklenmedi</span>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </section>
+
+                  <section className="space-y-4 border-t border-border pt-7">
+                    <div className="space-y-1">
+                      <Label htmlFor="primaryColor">Ana renk</Label>
+                      <p className="text-xs text-muted-foreground">
+                        Bir renk seçin; vurgu, focus ve yumuşak yüzey tonları otomatik türetilir.
+                      </p>
+                    </div>
+
+                    <div className="flex max-w-sm items-center gap-3">
+                      <Input
+                        type="color"
+                        value={primaryColor}
+                        onChange={(event) => setPrimaryColor(event.target.value.toUpperCase())}
+                        aria-label="Ana renk seçici"
+                        className="h-11 w-16 shrink-0 cursor-pointer p-1"
+                      />
+                      <Input
+                        id="primaryColor"
+                        name="primaryColor"
+                        value={primaryColor}
+                        onChange={(event) => setPrimaryColor(event.target.value.toUpperCase())}
+                        pattern="^#[0-9A-Fa-f]{6}$"
+                        maxLength={7}
+                        placeholder="#C81E1E"
+                        required
+                        className="font-mono uppercase"
+                      />
+                      <span
+                        className="h-10 w-10 shrink-0 rounded-md border border-border"
+                        style={{ backgroundColor: /^#[0-9A-Fa-f]{6}$/.test(primaryColor) ? primaryColor : "transparent" }}
+                        aria-hidden="true"
+                      />
+                    </div>
+                  </section>
+
+                  <div className="flex items-center gap-3 border-t border-border pt-6">
+                    <Button type="submit" loading={isSavingBranding} className="gap-2">
+                      <Upload className="h-4 w-4" aria-hidden="true" />
+                      Workspace görünümünü kaydet
+                    </Button>
+                  </div>
+                </form>
+              </CardContent>
+            </Card>
+          )}
+
           {activeTab === "Profile & Account" && (
             <Card className="animate-in fade-in duration-300">
               <CardContent className="p-6 sm:p-8">
@@ -192,6 +462,75 @@ export default function SettingsPage() {
             </Card>
           )}
 
+          {activeTab === "Görünüm" && (
+            <Card className="animate-in fade-in duration-300">
+              <CardContent className="p-6 sm:p-8">
+                <div className="mb-6 space-y-1.5">
+                  <h2 className="text-xl font-bold text-foreground">Tema görünümü</h2>
+                  <p className="max-w-2xl text-sm text-muted-foreground">
+                    Neta arayüzünün açık, koyu veya cihazınızla uyumlu görünmesini seçin.
+                  </p>
+                </div>
+
+                <RadioGroup
+                  value={colorMode}
+                  onValueChange={handleColorModeChange}
+                  disabled={isSavingColorMode}
+                  aria-label="Tema görünümü"
+                  className="grid max-w-3xl gap-3 sm:grid-cols-3"
+                >
+                  {colorModeOptions.map((option) => {
+                    const Icon = option.icon;
+                    const selected = colorMode === option.value;
+
+                    return (
+                      <Label
+                        key={option.value}
+                        htmlFor={`color-mode-${option.value}`}
+                        className={`relative flex min-h-40 cursor-pointer flex-col justify-between gap-5 rounded-md border p-4 transition-[color,background-color,border-color,box-shadow] ${
+                          selected
+                            ? "border-primary bg-primary/5 ring-1 ring-primary"
+                            : "border-border bg-card hover:border-primary/50 hover:bg-muted/40"
+                        } ${isSavingColorMode ? "cursor-wait opacity-70" : ""}`}
+                      >
+                        <div className="flex items-start justify-between gap-3">
+                          <span
+                            className={`flex h-10 w-10 items-center justify-center rounded-md border ${
+                              selected
+                                ? "border-primary/30 bg-primary/10 text-primary"
+                                : "border-border bg-muted text-muted-foreground"
+                            }`}
+                          >
+                            <Icon className="h-5 w-5" aria-hidden="true" />
+                          </span>
+                          <RadioGroupItem
+                            id={`color-mode-${option.value}`}
+                            value={option.value}
+                            aria-label={option.label}
+                          />
+                        </div>
+                        <span className="space-y-1">
+                          <span className="block text-sm font-semibold text-foreground">
+                            {option.label}
+                          </span>
+                          <span className="block text-xs font-normal leading-relaxed text-muted-foreground">
+                            {option.description}
+                          </span>
+                        </span>
+                      </Label>
+                    );
+                  })}
+                </RadioGroup>
+
+                <p className="mt-4 text-xs text-muted-foreground" aria-live="polite">
+                  {isSavingColorMode
+                    ? "Görünüm tercihi kaydediliyor…"
+                    : "Değişiklik tüm Neta sayfalarına anında uygulanır."}
+                </p>
+              </CardContent>
+            </Card>
+          )}
+
           {activeTab === "AI Preferences" && (
             <Card className="animate-in fade-in duration-300">
               <CardContent className="p-6 sm:p-8">

app/(dashboard)/tasks/tasks-client.tsx

@@ -180,11 +180,6 @@ export function TasksClient({ tasks, clients, projects }: TasksClientProps) {
   return (
     <div className="mx-auto flex max-w-7xl flex-col gap-6">
       <div className="flex flex-col gap-4 border-b border-border pb-5 lg:flex-row lg:items-end lg:justify-between">
-        <div className="space-y-2">
-          <div className="flex items-center gap-2 text-sm text-muted-foreground">
-            <CheckCircle2 className="h-4 w-4" />
-            Günlük operasyon
-          </div>
         <div>
           <h1 className="text-3xl font-semibold tracking-normal text-foreground">
             Görevler
@@ -193,7 +188,6 @@ export function TasksClient({ tasks, clients, projects }: TasksClientProps) {
             Proje ve müşteri bağlantılı işleri liste veya basit kanban ile takip et.
           </p>
         </div>
-        </div>
 
         <TaskDialog mode="create" clients={clients} projects={projects} />
       </div>

app/layout.tsx

@@ -1,8 +1,13 @@
 import type { Metadata, Viewport } from "next";
 import type { CSSProperties } from "react";
+import { cookies } from "next/headers";
 import "./globals.css";
 import { Geist } from "next/font/google";
 import { cn } from "@/lib/utils";
+import {
+  COLOR_MODE_COOKIE,
+  isColorMode,
+} from "@/lib/color-mode";
 import { Toaster } from "poyraz-ui/molecules";
 import { getPublicBranding } from "@/server/branding/runtime";
 
@@ -12,7 +17,7 @@ const colorModeScript = `(() => {
   const media = window.matchMedia("(prefers-color-scheme: dark)");
   const apply = () => root.classList.toggle("dark", root.dataset.colorMode === "dark" || (root.dataset.colorMode === "system" && media.matches));
   apply();
-  if (root.dataset.colorMode === "system") media.addEventListener("change", apply);
+  media.addEventListener("change", apply);
 })();`;
 
 export function generateMetadata(): Metadata {
@@ -34,17 +39,22 @@ export function generateViewport(): Viewport {
   return { themeColor: getPublicBranding().primaryColor };
 }
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   const branding = getPublicBranding();
+  const cookieColorMode = (await cookies()).get(COLOR_MODE_COOKIE)?.value;
+  const colorMode = isColorMode(cookieColorMode)
+    ? cookieColorMode
+    : branding.defaultColorMode;
+
   return (
     <html
       lang="tr"
-      className={cn("font-sans", geist.variable, branding.defaultColorMode === "dark" && "dark")}
+      className={cn("font-sans", geist.variable, colorMode === "dark" && "dark")}
-      data-color-mode={branding.defaultColorMode}
+      data-color-mode={colorMode}
       style={branding.cssVariables as CSSProperties}
       suppressHydrationWarning
     >

app/portal/layout.tsx

@@ -1,5 +1,6 @@
 import { PortalShell } from "@/components/layout/portal-shell";
 import { getPublicBranding } from "@/server/branding/runtime";
+import { getUserPreferences } from "@/server/settings/preferences";
 import { requirePortalBackend } from "@/server/web/portal";
 
 export default async function PortalLayout({
@@ -10,6 +11,7 @@ export default async function PortalLayout({
   const { context, actor, service } = await requirePortalBackend();
   const { user, profile } = context;
   const branding = getPublicBranding();
+  const preferences = getUserPreferences(actor);
   const projects = service.listProjects(actor);
   const progress = projects.length
     ? Math.round(projects.reduce((sum, project) => sum + project.progress, 0) / projects.length)
@@ -33,6 +35,7 @@ export default async function PortalLayout({
         lightLogoUrl: branding.lightLogoUrl,
         darkLogoUrl: branding.darkLogoUrl,
       }}
+      colorMode={preferences.colorMode}
       user={{
         email: user.email,
         displayName,

app/portal/page.tsx

@@ -1,5 +1,5 @@
 import { Card, CardContent, Badge } from "poyraz-ui/atoms";
-import { FolderKanban, CheckCircle2, Clock, Activity, BarChart, type LucideIcon } from "lucide-react";
+import { FolderKanban, CheckCircle2, Clock, BarChart, type LucideIcon } from "lucide-react";
 import Link from "next/link";
 import { format } from "date-fns";
 import { tr } from "date-fns/locale";
@@ -18,11 +18,6 @@ export default async function PortalDashboardPage() {
   return (
     <div className="mx-auto flex max-w-7xl flex-col gap-6">
       <div className="flex flex-col gap-4 border-b border-border pb-5 lg:flex-row lg:items-end lg:justify-between">
-        <div className="space-y-2">
-          <div className="flex items-center gap-2 text-sm text-muted-foreground">
-            <Activity className="h-4 w-4" />
-            Genel Bakış
-          </div>
         <div>
           <h1 className="text-3xl font-semibold tracking-normal text-foreground">Müşteri Paneli</h1>
           <p className="mt-1 max-w-2xl text-sm text-muted-foreground">
@@ -30,7 +25,6 @@ export default async function PortalDashboardPage() {
           </p>
         </div>
       </div>
-      </div>
 
       <div className="grid gap-4 md:grid-cols-3">
         <StatCard label="Aktif Projeler" value={String(activeProjects.length)} icon={FolderKanban} tone="blue" />

components/layout/app-shell.tsx

@@ -1,6 +1,8 @@
 "use client";
 
 import { signOut } from "@/app/login/actions";
+import { ColorModeSync } from "@/components/theme/color-mode-sync";
+import type { ColorMode } from "@/lib/color-mode";
 import {
   Card,
   CardContent,
@@ -10,6 +12,7 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
   Tooltip,
@@ -18,7 +21,6 @@ import {
   TooltipTrigger,
 } from "poyraz-ui/molecules";
 import {
-  SidebarBranding,
   SidebarContent,
   SidebarFooter,
   SidebarGroup,
@@ -28,7 +30,6 @@ import {
   SidebarMenuItem,
   SidebarPanel,
   SidebarProvider,
-  SidebarRail,
   SidebarTrigger,
   SidebarUserProfile,
   useSidebar,
@@ -72,6 +73,7 @@ type AppShellProps = {
   settingsHref: string;
   user: ShellUser;
   progress?: number;
+  colorMode?: ColorMode;
 };
 
 export function AppShell({
@@ -82,12 +84,14 @@ export function AppShell({
   settingsHref,
   user,
   progress,
+  colorMode,
 }: AppShellProps) {
   const pathname = usePathname();
   const sidebarProps = { branding, homeHref, navGroups, pathname, progress, settingsHref, user };
 
   return (
     <TooltipProvider>
+      {colorMode ? <ColorModeSync colorMode={colorMode} /> : null}
       <div className="min-h-screen bg-background text-foreground">
         <a
           href="#main-content"
@@ -123,10 +127,9 @@ type SidebarCompositionProps = {
 
 function DesktopSidebar(props: SidebarCompositionProps) {
   return (
-    <SidebarProvider variant="collapsible">
+    <SidebarProvider variant="default">
       <SidebarPanel className="sticky top-0 hidden h-screen shrink-0 self-stretch lg:flex">
         <SidebarComposition {...props} />
-        <SidebarRail aria-label="Kenar çubuğunu daralt veya genişlet" />
       </SidebarPanel>
     </SidebarProvider>
   );
@@ -136,8 +139,12 @@ function MobileSidebar(props: SidebarCompositionProps) {
   return (
     <SidebarProvider variant="floating">
       <header className="sticky top-0 z-30 flex h-14 items-center justify-between border-b border-border bg-surface/95 px-4 backdrop-blur lg:hidden">
-        <Link href={props.homeHref} className="min-w-0">
+        <Link
-          <MobileBrand branding={props.branding} />
+          href={props.homeHref}
+          className="flex min-w-0 max-w-40 items-center"
+          aria-label={`${props.branding.applicationName} ana sayfa`}
+        >
+          <WorkspaceLogo branding={props.branding} compact />
         </Link>
         <Tooltip>
           <TooltipTrigger asChild>
@@ -165,23 +172,14 @@ function SidebarComposition({
 }: SidebarCompositionProps) {
   return (
     <>
-      <SidebarHeader>
+      <SidebarHeader className="justify-center px-4 py-3">
-        <Link href={homeHref} className="min-w-0 flex-1" aria-label={`${branding.applicationName} ana sayfa`}>
+        <Link
-          <SidebarBranding
+          href={homeHref}
-            logo={<BrandMark branding={branding} />}
+          className="flex min-h-12 w-full items-center justify-center"
-            title={branding.applicationName}
+          aria-label={`${branding.applicationName} ana sayfa`}
-            subtitle={branding.organizationName ?? "Freelancer portalı"}
+        >
-          />
+          <WorkspaceLogo branding={branding} />
         </Link>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <SidebarTrigger
-              className="hidden lg:inline-flex"
-              aria-label="Kenar çubuğunu daralt veya genişlet"
-            />
-          </TooltipTrigger>
-          <TooltipContent>Kenar çubuğunu daralt</TooltipContent>
-        </Tooltip>
       </SidebarHeader>
 
       <SidebarContent scrollMode="fade">
@@ -239,54 +237,41 @@ function SidebarNavigation({
   ));
 }
 
-function BrandMark({ branding }: { branding: AppShellBranding }) {
+function WorkspaceLogo({
-  const logoUrl = branding.lightLogoUrl ?? branding.darkLogoUrl;
+  branding,
-
+  compact = false,
-  if (!logoUrl) {
+}: {
-    return (
+  branding: AppShellBranding;
-      <span className="flex h-full w-full items-center justify-center text-sm font-bold text-primary">
+  compact?: boolean;
-        {branding.applicationName.slice(0, 1).toLocaleUpperCase("tr-TR")}
+}) {
-      </span>
+  const lightLogoUrl = branding.lightLogoUrl ?? branding.darkLogoUrl ?? "/logo/blackLogoLong.png";
-    );
+  const darkLogoUrl = branding.darkLogoUrl ?? branding.lightLogoUrl ?? "/logo/lightLogoLong.png";
-  }
+  const imageClassName = compact
+    ? "max-h-8 w-auto max-w-full object-contain"
+    : "max-h-12 w-auto max-w-full object-contain";
 
   return (
-    <span className="flex h-full w-full items-center justify-center">
+    <span className="flex h-full w-full items-center justify-center overflow-hidden">
       <Image
-        src={logoUrl}
+        src={lightLogoUrl}
-        alt=""
+        alt={`${branding.applicationName} logosu`}
-        width={32}
+        width={180}
-        height={32}
+        height={56}
         unoptimized
-        className={branding.darkLogoUrl ? "h-full w-full object-contain dark:hidden" : "h-full w-full object-contain"}
+        className={`${imageClassName} dark:hidden`}
       />
-      {branding.darkLogoUrl ? (
       <Image
-          src={branding.darkLogoUrl}
+        src={darkLogoUrl}
-          alt=""
+        alt={`${branding.applicationName} logosu`}
-          width={32}
+        width={180}
-          height={32}
+        height={56}
         unoptimized
-          className="hidden h-full w-full object-contain dark:block"
+        className={`hidden ${imageClassName} dark:block`}
       />
-      ) : null}
     </span>
   );
 }
 
-function MobileBrand({ branding }: { branding: AppShellBranding }) {
-  return (
-    <div className="flex min-w-0 items-center gap-2">
-      <span className="flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-sm border border-border bg-muted">
-        <BrandMark branding={branding} />
-      </span>
-      <Typography component="span" variant="small" className="truncate font-semibold">
-        {branding.applicationName}
-      </Typography>
-    </div>
-  );
-}
-
 function ProgressSummary({ progress }: { progress: number }) {
   const normalizedProgress = Math.max(0, Math.min(100, progress));
 
@@ -325,8 +310,8 @@ function AccountMenu({ user, settingsHref }: { user: ShellUser; settingsHref: st
       <DropdownMenuTrigger asChild>
         <button
           type="button"
-          aria-label="Hesap menüsünü aç"
+          aria-label={`${user.displayName} için hesap menüsünü aç`}
-          className="flex w-full items-center gap-2 rounded-sm p-1 text-left outline-none transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-focus-ring"
+          className="group flex w-full items-center gap-2 rounded-md border border-transparent p-1.5 text-left outline-none transition-[color,background-color,border-color] hover:border-border hover:bg-accent focus-visible:ring-2 focus-visible:ring-focus-ring data-[state=open]:border-border data-[state=open]:bg-accent"
         >
           <SidebarUserProfile
             className="min-w-0 flex-1"
@@ -335,22 +320,44 @@ function AccountMenu({ user, settingsHref }: { user: ShellUser; settingsHref: st
             avatarUrl={user.avatarUrl ?? undefined}
             initials={user.shortName}
           />
-          <ChevronUp className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden="true" />
+          <ChevronUp
+            className="h-4 w-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-180"
+            aria-hidden="true"
+          />
         </button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" side="top" className="min-w-52">
+      <DropdownMenuContent
-        <DropdownMenuItem asChild media={<Settings className="h-4 w-4" aria-hidden="true" />}>
+        align="start"
-          <Link href={settingsHref}>Ayarlar</Link>
+        side="top"
+        sideOffset={8}
+        collisionPadding={12}
+        surface="solid"
+        radius="md"
+        itemRadius="sm"
+        className="w-[var(--radix-dropdown-menu-trigger-width)] min-w-56"
+      >
+        <DropdownMenuLabel className="space-y-0.5 px-2.5 py-2">
+          <span className="block truncate text-sm font-semibold text-foreground">
+            {user.displayName}
+          </span>
+          <span className="block truncate font-normal text-muted-foreground">{user.email}</span>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem asChild>
+          <Link href={settingsHref} className="gap-2">
+            <Settings className="h-4 w-4 shrink-0 text-muted-foreground" aria-hidden="true" />
+            <span>Ayarlar</span>
+          </Link>
         </DropdownMenuItem>
         <DropdownMenuSeparator />
         <form action={signOut}>
           <DropdownMenuItem
             asChild
-            media={<LogOut className="h-4 w-4" aria-hidden="true" />}
+            className="text-destructive focus:text-destructive data-[highlighted]:text-destructive"
-            className="text-destructive"
           >
-            <button type="submit" className="w-full">
+            <button type="submit" className="w-full gap-2 text-left">
-              Çıkış yap
+              <LogOut className="h-4 w-4 shrink-0" aria-hidden="true" />
+              <span>Çıkış yap</span>
             </button>
           </DropdownMenuItem>
         </form>

components/layout/dashboard-shell.tsx

@@ -2,10 +2,12 @@
 
 import { AppShell, type AppShellBranding } from "@/components/layout/app-shell";
 import { sidebarData } from "@/config/sidebar";
+import type { ColorMode } from "@/lib/color-mode";
 
 type DashboardShellProps = {
   branding: AppShellBranding;
   children: React.ReactNode;
+  colorMode: ColorMode;
   user: {
     email: string;
     displayName: string;
@@ -14,9 +16,16 @@ type DashboardShellProps = {
   };
 };
 
-export function DashboardShell({ branding, children, user }: DashboardShellProps) {
+export function DashboardShell({ branding, children, colorMode, user }: DashboardShellProps) {
   return (
-    <AppShell branding={branding} homeHref="/" navGroups={sidebarData} settingsHref="/settings" user={user}>
+    <AppShell
+      branding={branding}
+      colorMode={colorMode}
+      homeHref="/"
+      navGroups={sidebarData}
+      settingsHref="/settings"
+      user={user}
+    >
       {children}
     </AppShell>
   );

components/layout/portal-shell.tsx

@@ -2,10 +2,12 @@
 
 import { AppShell, type AppShellBranding } from "@/components/layout/app-shell";
 import { portalSidebarData } from "@/config/portal-sidebar";
+import type { ColorMode } from "@/lib/color-mode";
 
 type PortalShellProps = {
   branding: AppShellBranding;
   children: React.ReactNode;
+  colorMode: ColorMode;
   user: {
     email: string;
     displayName: string;
@@ -15,10 +17,11 @@ type PortalShellProps = {
   progress?: number;
 };
 
-export function PortalShell({ branding, children, user, progress }: PortalShellProps) {
+export function PortalShell({ branding, children, colorMode, user, progress }: PortalShellProps) {
   return (
     <AppShell
       branding={branding}
+      colorMode={colorMode}
       homeHref="/portal"
       navGroups={portalSidebarData}
       settingsHref="/portal/settings"

components/system/page-header.tsx

@@ -4,7 +4,6 @@ import type { ReactNode } from "react";
 type PageHeaderProps = {
   title: string;
   description?: string;
-  eyebrow?: string;
   primaryAction?: ReactNode;
   secondaryActions?: ReactNode;
 };
@@ -12,18 +11,12 @@ type PageHeaderProps = {
 export function PageHeader({
   title,
   description,
-  eyebrow,
   primaryAction,
   secondaryActions,
 }: PageHeaderProps) {
   return (
     <header className="flex flex-col gap-4 border-b border-border pb-5 lg:flex-row lg:items-end lg:justify-between">
       <div className="min-w-0 space-y-1.5">
-        {eyebrow ? (
-          <Typography component="p" variant="caption" className="font-semibold uppercase tracking-wider text-primary">
-            {eyebrow}
-          </Typography>
-        ) : null}
         <Typography component="h1" variant="h1" balance>
           {title}
         </Typography>

components/theme/color-mode-sync.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { useEffect } from "react";
+import {
+  COLOR_MODE_COOKIE,
+  COLOR_MODE_COOKIE_MAX_AGE,
+  type ColorMode,
+} from "@/lib/color-mode";
+
+export function ColorModeSync({ colorMode }: { colorMode: ColorMode }) {
+  useEffect(() => {
+    applyColorMode(colorMode);
+  }, [colorMode]);
+
+  return null;
+}
+
+export function applyColorMode(colorMode: ColorMode): void {
+  const root = document.documentElement;
+  const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+  root.dataset.colorMode = colorMode;
+  root.classList.toggle("dark", colorMode === "dark" || (colorMode === "system" && prefersDark));
+
+  const secure = window.location.protocol === "https:" ? "; Secure" : "";
+  document.cookie = `${COLOR_MODE_COOKIE}=${colorMode}; Path=/; Max-Age=${COLOR_MODE_COOKIE_MAX_AGE}; SameSite=Lax${secure}`;
+}

lib/color-mode.ts

@@ -0,0 +1,10 @@
+export const colorModes = ["light", "dark", "system"] as const;
+
+export type ColorMode = (typeof colorModes)[number];
+
+export const COLOR_MODE_COOKIE = "neta-color-mode";
+export const COLOR_MODE_COOKIE_MAX_AGE = 60 * 60 * 24 * 365;
+
+export function isColorMode(value: unknown): value is ColorMode {
+  return typeof value === "string" && colorModes.includes(value as ColorMode);
+}

scripts/phase3-storage-smoke.ts

@@ -5,7 +5,7 @@ import Database from "better-sqlite3";
 import { eq } from "drizzle-orm";
 import { drizzle } from "drizzle-orm/better-sqlite3";
 import * as schema from "../server/db/schema";
-import { BrandingService, contrastRatio } from "../server/branding/service";
+import { BrandingService, contrastRatio, deriveAccentColor } from "../server/branding/service";
 import type { DomainActor } from "../server/domain/actor";
 import { DomainError } from "../server/domain/errors";
 import { resolveStoragePath } from "../server/files/paths";
@@ -76,7 +76,6 @@ try {
     applicationName: "Studio Portal",
     shortName: "Studio",
     primaryColor: "#336699",
-    accentColor: "#f0cc22",
     lightLogoFileId: logo.id,
     iconFileId: icon.id,
     defaultColorMode: "dark",
@@ -84,6 +83,7 @@ try {
   });
   assert.equal(branding.applicationName, "Studio Portal");
   assert.equal(branding.primaryColor, "#336699");
+  assert.equal(branding.accentColor, deriveAccentColor("#336699"), "Accent palette must derive from the single primary color");
   assert.equal(branding.darkLogoUrl, branding.lightLogoUrl, "Missing dark logo must fall back to light logo");
   assert.equal(fileService.readPublicBranding(logo.id).metadata.id, logo.id);
   assert.ok(contrastRatio(branding.primaryColor, branding.cssVariables["--poyraz-primary-foreground"]) >= 4.5);

scripts/phase4-ui-boundary.mjs

@@ -6,6 +6,11 @@ const repoRoot = process.cwd();
 const packageJson = JSON.parse(fs.readFileSync(path.join(repoRoot, "package.json"), "utf8"));
 const globalsCss = fs.readFileSync(path.join(repoRoot, "app/globals.css"), "utf8");
 const appShell = fs.readFileSync(path.join(repoRoot, "components/layout/app-shell.tsx"), "utf8");
+const rootLayout = fs.readFileSync(path.join(repoRoot, "app/layout.tsx"), "utf8");
+const settingsPage = fs.readFileSync(
+  path.join(repoRoot, "app/(dashboard)/settings/page.tsx"),
+  "utf8",
+);
 
 assert.match(packageJson.dependencies["poyraz-ui"] ?? "", /^\^?3\./, "poyraz-ui must use major v3");
 assert.match(
@@ -22,7 +27,6 @@ for (const component of [
   "SidebarProvider",
   "SidebarPanel",
   "SidebarHeader",
-  "SidebarBranding",
   "SidebarContent",
   "SidebarMenu",
   "SidebarMenuItem",
@@ -33,6 +37,58 @@ for (const component of [
   assert.ok(appShell.includes(component), `App shell must compose the Poyraz ${component} organism`);
 }
 
+assert.ok(appShell.includes("WorkspaceLogo"), "Sidebar header must render the workspace logo");
+assert.ok(
+  appShell.includes('<SidebarProvider variant="default">'),
+  "Desktop sidebar must use the fixed-width Poyraz default variant",
+);
+assert.ok(
+  !appShell.includes('<SidebarProvider variant="collapsible">'),
+  "Desktop sidebar must not be collapsible",
+);
+assert.ok(!appShell.includes("SidebarRail"), "Desktop sidebar must not expose a collapse rail");
+
+assert.doesNotMatch(
+  appShell,
+  /<DropdownMenuItem(?=[^>]*\basChild\b)(?=[^>]*\bmedia=)[^>]*>/s,
+  "Poyraz DropdownMenuItem must not combine asChild with rich media because Radix cannot inject accessibility props into the generated Fragment",
+);
+assert.doesNotMatch(
+  appShell,
+  /<DropdownMenuItem[^>]*\binteractiveMotion=/s,
+  "Poyraz UI 3.0.2 leaks DropdownMenuItem interactiveMotion to the DOM",
+);
+
+assert.match(settingsPage, /\bRadioGroup\b/, "Settings must use the Poyraz RadioGroup for theme selection");
+for (const workspaceControl of [
+  'name="workspaceName"',
+  'name="logo"',
+  'name="primaryColor"',
+]) {
+  assert.ok(
+    settingsPage.includes(workspaceControl),
+    `Settings must expose workspace branding control ${workspaceControl}`,
+  );
+}
+for (const colorMode of ["light", "dark", "system"]) {
+  assert.ok(
+    settingsPage.includes(`value: "${colorMode}"`),
+    `Settings must expose the ${colorMode} color mode`,
+  );
+}
+assert.ok(
+  rootLayout.includes("COLOR_MODE_COOKIE"),
+  "Root layout must resolve the persisted color mode before rendering",
+);
+assert.ok(
+  appShell.includes("ColorModeSync"),
+  "Authenticated shells must synchronize the database-backed color mode",
+);
+assert.ok(
+  fs.existsSync(path.join(repoRoot, "server/settings/preferences.ts")),
+  "Missing database-backed user preferences service",
+);
+
 const requiredSystemCompositions = [
   "components/system/page-header.tsx",
   "components/system/feedback-state.tsx",

server/branding/service.ts

@@ -128,15 +128,20 @@ export class BrandingService {
       throw new DomainError("FORBIDDEN", "Instance marka ayarları başka bir owner'a ait.");
     }
 
+    const update = { ...parsed.data };
+    if (parsed.data.primaryColor && parsed.data.accentColor === undefined) {
+      update.accentColor = deriveAccentColor(parsed.data.primaryColor);
+    }
+
     if (existing) {
-      this.repository.update({ ...parsed.data, updatedByUserId: scope.ownerUserId });
+      this.repository.update({ ...update, updatedByUserId: scope.ownerUserId });
     } else {
       this.repository.create({
         id: "default",
         ownerUserId: scope.ownerUserId,
         updatedByUserId: scope.ownerUserId,
         ...DEFAULT_BRANDING,
-        ...parsed.data,
+        ...update,
       });
     }
     return this.getPublic();
@@ -202,6 +207,10 @@ export function contrastRatio(first: string, second: string): number {
   return (Math.max(firstLuminance, secondLuminance) + 0.05) / (Math.min(firstLuminance, secondLuminance) + 0.05);
 }
 
+export function deriveAccentColor(primary: string): string {
+  return mixHex(primary, "#FFFFFF", 0.88);
+}
+
 function readableForeground(background: string): "#000000" | "#FFFFFF" {
   return contrastRatio(background, "#000000") >= contrastRatio(background, "#FFFFFF")
     ? "#000000"

server/settings/preferences.ts

@@ -0,0 +1,60 @@
+import "server-only";
+
+import { eq } from "drizzle-orm";
+import { z } from "zod";
+import type { ColorMode } from "@/lib/color-mode";
+import { getSqliteConnection } from "@/server/db/client";
+import { userPreferences } from "@/server/db/schema";
+import { assertEnabledActor, type DomainActor } from "@/server/domain/actor";
+import { DomainError } from "@/server/domain/errors";
+
+const colorModeInputSchema = z.object({
+  colorMode: z.enum(["light", "dark", "system"]),
+});
+
+export type PublicUserPreferences = {
+  colorMode: ColorMode;
+};
+
+export function getUserPreferences(actor: DomainActor): PublicUserPreferences {
+  assertEnabledActor(actor);
+
+  const row = getSqliteConnection().db
+    .select({ colorMode: userPreferences.colorMode })
+    .from(userPreferences)
+    .where(eq(userPreferences.ownerUserId, actor.authUserId))
+    .get();
+
+  return {
+    colorMode: (row?.colorMode as ColorMode | undefined) ?? "system",
+  };
+}
+
+export function updateColorModePreference(
+  actor: DomainActor,
+  input: unknown,
+): PublicUserPreferences {
+  assertEnabledActor(actor);
+
+  const parsed = colorModeInputSchema.safeParse(input);
+  if (!parsed.success) {
+    throw new DomainError("VALIDATION_ERROR", "Renk modu tercihi geçersiz.");
+  }
+
+  const { db } = getSqliteConnection();
+  db.insert(userPreferences)
+    .values({
+      ownerUserId: actor.authUserId,
+      colorMode: parsed.data.colorMode,
+    })
+    .onConflictDoUpdate({
+      target: userPreferences.ownerUserId,
+      set: {
+        colorMode: parsed.data.colorMode,
+        updatedAt: new Date().toISOString(),
+      },
+    })
+    .run();
+
+  return { colorMode: parsed.data.colorMode };
+}