diff --git a/.env.example b/.env.example
index c366e73..0ab941c 100644
--- a/.env.example
+++ b/.env.example
@@ -5,3 +5,6 @@ PUBLIC_MODE=simple   # simple | full
 PUBLIC_JOINCODE=no   # yes | no — show invite-code field on join failure
 PUBLIC_LABELS=       # comma-separated labels (e.g., bug,feature,question)
 PUBLIC_BLOSSOM_URL=  # Blossom server URL (e.g., https://blossom.primal.net)
+# Theme color overrides — quote the value, a leading # is read as a comment otherwise
+PUBLIC_ACCENT_COLOR=     # override the accent color (default #e32a6d), e.g. "#00ff00"; hover shade derived
+PUBLIC_SECONDARY_COLOR=  # override the secondary color (default #ffaf25), e.g. "#0000ff"; hover shade derived
diff --git a/src/lib/components/ChatContent.svelte b/src/lib/components/ChatContent.svelte
index 5f7684d..ee828ad 100644
--- a/src/lib/components/ChatContent.svelte
+++ b/src/lib/components/ChatContent.svelte
@@ -42,22 +42,22 @@
         href="https://njump.me/{t.entity}"
         target="_blank"
         rel="noopener noreferrer"
-        class="text-brand hover:underline">@{u?.shortName ?? t.fallback}</a
+        class="text-accent hover:underline">@{u?.shortName ?? t.fallback}</a
       >{:else if t.type === "entity"}{@const ref = t.id
         ? resolvedThreads[t.id]
         : undefined}{#if ref}<a
           href={threadRefHref(ref)}
-          class="text-brand hover:underline">{ref.title}</a
+          class="text-accent hover:underline">{ref.title}</a
         >{:else}<a
           href={t.href}
           target="_blank"
           rel="noopener noreferrer"
-          class="text-brand hover:underline">{t.label}</a
+          class="text-accent hover:underline">{t.label}</a
         >{/if}{:else if t.type === "link"}<a
         href={t.href}
         title={t.href}
         target="_blank"
         rel="noopener noreferrer"
-        class="text-brand hover:underline">{t.label}</a
+        class="text-accent hover:underline">{t.label}</a
       >{:else}{t.value}{/if}{/each}</span
 >
diff --git a/src/lib/components/ChatSidebar.svelte b/src/lib/components/ChatSidebar.svelte
index 282aa76..698c33f 100644
--- a/src/lib/components/ChatSidebar.svelte
+++ b/src/lib/components/ChatSidebar.svelte
@@ -232,7 +232,7 @@
 		{expanded ? 'md:w-150 md:shadow-2xl' : 'md:w-80 md:shadow-lg'}"
 >
   <div class="mb-6 flex shrink-0 items-center justify-between">
-    <span class="text-brand text-[1.5rem] leading-7">Chat</span>
+    <span class="text-accent text-[1.5rem] leading-7">Chat</span>
     <button
       onclick={onToggle}
       class="hidden rounded bg-neutral-100 transition-colors hover:bg-neutral-200 md:block dark:bg-neutral-800 dark:hover:bg-neutral-700"
@@ -410,7 +410,7 @@
       disabled={sending}
       placeholder={auth.user ? "Message..." : "Login to send messages"}
       {contextPubkeys}
-      textareaClass="w-full resize-none rounded border border-neutral-200 dark:border-neutral-700 px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-brand disabled:opacity-50"
+      textareaClass="w-full resize-none rounded border border-neutral-200 dark:border-neutral-700 px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-accent disabled:opacity-50"
     />
   </div>
 </aside>
diff --git a/src/lib/components/DeleteModal.svelte b/src/lib/components/DeleteModal.svelte
index 38ca355..f7599f2 100644
--- a/src/lib/components/DeleteModal.svelte
+++ b/src/lib/components/DeleteModal.svelte
@@ -70,7 +70,7 @@
         disabled={deleteState.busy}
         rows="2"
         placeholder="Recorded with the deletion"
-        class="focus:ring-brand mb-4 w-full resize-none rounded border border-neutral-200 dark:border-neutral-700 px-3 py-2 text-sm focus:ring-1 focus:outline-none disabled:opacity-50"
+        class="focus:ring-accent mb-4 w-full resize-none rounded border border-neutral-200 dark:border-neutral-700 px-3 py-2 text-sm focus:ring-1 focus:outline-none disabled:opacity-50"
       ></textarea>
 
       <div class="flex justify-end gap-2">
diff --git a/src/lib/components/DiscussionsFeed.svelte b/src/lib/components/DiscussionsFeed.svelte
index 2ea378c..d28e8a3 100644
--- a/src/lib/components/DiscussionsFeed.svelte
+++ b/src/lib/components/DiscussionsFeed.svelte
@@ -97,11 +97,11 @@
 
 <div class="mx-auto max-w-6xl">
   <div class="flex flex-wrap items-center justify-between gap-2 py-2">
-    <h1 class="text-brand text-[1.65rem] leading-7">{title}</h1>
+    <h1 class="text-accent text-[1.65rem] leading-7">{title}</h1>
     <div class="flex items-center gap-2">
       <button
         onclick={onNewTopic}
-        class="bg-brand hover:bg-brand-hover rounded px-4 py-1.5 font-medium text-white md:px-6 md:text-sm"
+        class="bg-accent hover:bg-accent-hover rounded px-4 py-1.5 font-medium text-white md:px-6 md:text-sm"
       >
         New discussion
       </button>
diff --git a/src/lib/components/JoinModal.svelte b/src/lib/components/JoinModal.svelte
index 37296a7..c427bc3 100644
--- a/src/lib/components/JoinModal.svelte
+++ b/src/lib/components/JoinModal.svelte
@@ -87,7 +87,7 @@
           autocapitalize="off"
           spellcheck="false"
           onkeydown={(e) => e.key === "Enter" && onRetry()}
-          class="focus:ring-brand mb-3 w-full rounded border border-neutral-200 dark:border-neutral-700 px-3 py-2 text-sm focus:ring-1 focus:outline-none disabled:opacity-50"
+          class="focus:ring-accent mb-3 w-full rounded border border-neutral-200 dark:border-neutral-700 px-3 py-2 text-sm focus:ring-1 focus:outline-none disabled:opacity-50"
         />
       {/if}
 
@@ -104,7 +104,7 @@
           type="button"
           onclick={onRetry}
           disabled={joinState.busy || (joinState.codeRequired && !code.trim())}
-          class="bg-brand hover:bg-brand-hover rounded px-3 py-2 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-50"
+          class="bg-accent hover:bg-accent-hover rounded px-3 py-2 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-50"
         >
           {joinState.busy ? "Trying…" : "Retry"}
         </button>
diff --git a/src/lib/components/LatestDiscussions.svelte b/src/lib/components/LatestDiscussions.svelte
index eacea58..3d40648 100644
--- a/src/lib/components/LatestDiscussions.svelte
+++ b/src/lib/components/LatestDiscussions.svelte
@@ -28,7 +28,7 @@
 </script>
 
 <aside aria-label="Latest discussions">
-  <h2 class="text-brand pb-2 text-[1.5rem] leading-7">Latest discussions</h2>
+  <h2 class="text-accent pb-2 text-[1.5rem] leading-7">Latest discussions</h2>
   {#if overviewStore.recent.length === 0}
     <p class="text-sm text-neutral-400 dark:text-neutral-500">
       {overviewStore.loading ? "Loading…" : "Nothing yet."}
@@ -40,7 +40,7 @@
         <li>
           <a href="/thread/{t.id}" class="group block py-3">
             <p
-              class="group-hover:text-brand line-clamp-2 text-lg leading-5 text-neutral-700 dark:text-neutral-300"
+              class="group-hover:text-accent line-clamp-2 text-lg leading-5 text-neutral-700 dark:text-neutral-300"
             >
               {t.title}
             </p>
diff --git a/src/lib/components/LeftSidebar.svelte b/src/lib/components/LeftSidebar.svelte
index 206adcf..acf5d21 100644
--- a/src/lib/components/LeftSidebar.svelte
+++ b/src/lib/components/LeftSidebar.svelte
@@ -76,7 +76,7 @@
           <a
             href="/room/{room.id}"
             class="flex items-center gap-2 py-1 hover:bg-neutral-100 dark:hover:bg-neutral-800
-							{activeRoom === room.id ? ' text-brand' : 'text-neutral-700 dark:text-neutral-300'}"
+							{activeRoom === room.id ? ' text-accent' : 'text-neutral-700 dark:text-neutral-300'}"
           >
             {room.name}
           </a>
@@ -105,7 +105,7 @@
           href="/resource/{r.slug}"
           aria-current={activeResource === r.slug ? "page" : undefined}
           class="block py-1 hover:text-neutral-900 dark:hover:text-neutral-100
-            {activeResource === r.slug ? 'text-brand' : 'text-neutral-500 dark:text-neutral-400'}"
+            {activeResource === r.slug ? 'text-accent' : 'text-neutral-500 dark:text-neutral-400'}"
           >{r.title}</a
         >
       {/each}
@@ -113,7 +113,7 @@
         href="/contacts"
         aria-current={contactsActive ? "page" : undefined}
         class="block py-1 hover:text-neutral-900 dark:hover:text-neutral-100
-          {contactsActive ? 'text-brand' : 'text-neutral-500 dark:text-neutral-400'}">Contacts</a
+          {contactsActive ? 'text-accent' : 'text-neutral-500 dark:text-neutral-400'}">Contacts</a
       >
     </nav>
   </div>
@@ -123,7 +123,7 @@
       <button
         type="button"
         onclick={resumeDraft}
-        class="bg-brand hover:bg-brand-hover w-full rounded px-3 py-1.5 text-sm font-medium text-white"
+        class="bg-accent hover:bg-accent-hover w-full rounded px-3 py-1.5 text-sm font-medium text-white"
       >
         Resume draft
       </button>
@@ -159,7 +159,7 @@
       <div class="mt-3 flex items-center gap-1">
         <button
           onclick={openLogin}
-          class="bg-brand hover:bg-brand-hover min-w-0 flex-1 rounded px-3 py-1.5 text-sm font-medium text-white"
+          class="bg-accent hover:bg-accent-hover min-w-0 flex-1 rounded px-3 py-1.5 text-sm font-medium text-white"
         >
           Login
         </button>
diff --git a/src/lib/components/LoginModal.svelte b/src/lib/components/LoginModal.svelte
index 98166a6..01941a4 100644
--- a/src/lib/components/LoginModal.svelte
+++ b/src/lib/components/LoginModal.svelte
@@ -119,7 +119,7 @@
         <button
           onclick={handleExtension}
           disabled={busy || !hasExtension}
-          class="bg-brand hover:bg-brand-hover w-full rounded px-3 py-2 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-50"
+          class="bg-accent hover:bg-accent-hover w-full rounded px-3 py-2 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-50"
         >
           {busy ? "Connecting…" : "Log in with extension"}
         </button>
@@ -131,7 +131,7 @@
         <button
           type="button"
           onclick={showNsecView}
-          class="text-brand mt-4 block w-full text-center text-sm hover:underline"
+          class="text-accent mt-4 block w-full text-center text-sm hover:underline"
         >
           Or log in using your nsec
         </button>
@@ -149,12 +149,12 @@
           autocorrect="off"
           spellcheck="false"
           onkeydown={(e) => e.key === "Enter" && handleNsec()}
-          class="focus:ring-brand w-full rounded border border-neutral-200 dark:border-neutral-700 px-3 py-2 font-mono text-sm focus:ring-1 focus:outline-none disabled:opacity-50"
+          class="focus:ring-accent w-full rounded border border-neutral-200 dark:border-neutral-700 px-3 py-2 font-mono text-sm focus:ring-1 focus:outline-none disabled:opacity-50"
         />
         <button
           onclick={handleNsec}
           disabled={busy || !nsec.trim()}
-          class="bg-brand hover:bg-brand-hover mt-3 w-full rounded px-3 py-2 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-50"
+          class="bg-accent hover:bg-accent-hover mt-3 w-full rounded px-3 py-2 text-sm font-medium text-white disabled:cursor-not-allowed disabled:opacity-50"
         >
           {busy ? "Logging in…" : "Log in"}
         </button>
@@ -164,7 +164,7 @@
         <button
           type="button"
           onclick={showExtensionView}
-          class="text-brand mt-4 block w-full text-center text-sm hover:underline"
+          class="text-accent mt-4 block w-full text-center text-sm hover:underline"
         >
           Log in with extension
         </button>
diff --git a/src/lib/components/MessageEditor.svelte b/src/lib/components/MessageEditor.svelte
index 6880b49..2e0ee42 100644
--- a/src/lib/components/MessageEditor.svelte
+++ b/src/lib/components/MessageEditor.svelte
@@ -103,7 +103,7 @@
       {rows}
       {placeholder}
       {contextPubkeys}
-      textareaClass="block w-full rounded-t border border-neutral-200 dark:border-neutral-700 px-3 py-2 focus:outline-none focus:ring-1 focus:ring-brand disabled:opacity-50 resize-y {minHeightClass}"
+      textareaClass="block w-full rounded-t border border-neutral-200 dark:border-neutral-700 px-3 py-2 focus:outline-none focus:ring-1 focus:ring-accent disabled:opacity-50 resize-y {minHeightClass}"
     />
   {/if}
   <div
diff --git a/src/lib/components/MobileMenu.svelte b/src/lib/components/MobileMenu.svelte
index 9e752cf..9c42318 100644
--- a/src/lib/components/MobileMenu.svelte
+++ b/src/lib/components/MobileMenu.svelte
@@ -120,7 +120,7 @@
         <a
           href="/"
           onclick={onClose}
-          class="hover:text-brand py-2 text-xl text-neutral-700 dark:text-neutral-300"
+          class="hover:text-accent py-2 text-xl text-neutral-700 dark:text-neutral-300"
           >{mode === "simple" ? "Discussions" : "Home"}</a
         >
 
@@ -139,7 +139,7 @@
                 href="/room/{room.id}"
                 onclick={onClose}
                 class="block py-1.5 text-xl
-									{activeRoom === room.id ? 'text-brand' : 'hover:text-brand text-neutral-700 dark:text-neutral-300'}"
+									{activeRoom === room.id ? 'text-accent' : 'hover:text-accent text-neutral-700 dark:text-neutral-300'}"
               >
                 {room.name}
               </a>
@@ -158,8 +158,8 @@
               href="/resource/{r.slug}"
               onclick={onClose}
               aria-current={activeResource === r.slug ? "page" : undefined}
-              class="hover:text-brand block py-1.5 text-xl
-                {activeResource === r.slug ? 'text-brand' : 'text-neutral-700 dark:text-neutral-300'}"
+              class="hover:text-accent block py-1.5 text-xl
+                {activeResource === r.slug ? 'text-accent' : 'text-neutral-700 dark:text-neutral-300'}"
               >{r.title}</a
             >
           {/each}
@@ -167,8 +167,8 @@
             href="/contacts"
             onclick={onClose}
             aria-current={contactsActive ? "page" : undefined}
-            class="hover:text-brand block py-1.5 text-lg
-              {contactsActive ? 'text-brand' : 'text-neutral-700 dark:text-neutral-300'}">Contacts</a
+            class="hover:text-accent block py-1.5 text-lg
+              {contactsActive ? 'text-accent' : 'text-neutral-700 dark:text-neutral-300'}">Contacts</a
           >
         </nav>
 
@@ -177,7 +177,7 @@
             <button
               type="button"
               onclick={onResume}
-              class="bg-brand hover:bg-brand-hover w-full rounded px-3 py-2 font-medium text-white"
+              class="bg-accent hover:bg-accent-hover w-full rounded px-3 py-2 font-medium text-white"
             >
               Resume draft
             </button>
@@ -219,7 +219,7 @@
               <button
                 type="button"
                 onclick={onLogin}
-                class="bg-brand hover:bg-brand-hover min-w-0 flex-1 rounded px-3 py-2 text-lg font-medium text-white"
+                class="bg-accent hover:bg-accent-hover min-w-0 flex-1 rounded px-3 py-2 text-lg font-medium text-white"
               >
                 Login
               </button>
diff --git a/src/lib/components/NewDiscussionModal.svelte b/src/lib/components/NewDiscussionModal.svelte
index 5cba7e8..76e3355 100644
--- a/src/lib/components/NewDiscussionModal.svelte
+++ b/src/lib/components/NewDiscussionModal.svelte
@@ -151,7 +151,7 @@
           {#if targetName}
             <p class="text-sm text-neutral-700 dark:text-neutral-300">{targetName}</p>
           {/if}
-          <h2 id="newdisc-title" class="text-brand text-2xl">New discussion</h2>
+          <h2 id="newdisc-title" class="text-accent text-2xl">New discussion</h2>
         </div>
         <button
           type="button"
@@ -190,7 +190,7 @@
           bind:value={draftState.title}
           disabled={draftState.publishing}
           maxlength="72"
-          class="focus:ring-brand w-full rounded border border-neutral-200 dark:border-neutral-700 px-3 py-2 focus:ring-1 focus:outline-none disabled:opacity-50"
+          class="focus:ring-accent w-full rounded border border-neutral-200 dark:border-neutral-700 px-3 py-2 focus:ring-1 focus:outline-none disabled:opacity-50"
         />
       </div>
 
@@ -204,11 +204,11 @@
             Labels
           </label>
           <div
-            class="focus-within:ring-brand flex min-h-[2.5rem] flex-wrap items-center gap-1.5 rounded border border-neutral-200 dark:border-neutral-700 px-3 py-1.5 focus-within:ring-1"
+            class="focus-within:ring-accent flex min-h-[2.5rem] flex-wrap items-center gap-1.5 rounded border border-neutral-200 dark:border-neutral-700 px-3 py-1.5 focus-within:ring-1"
           >
             {#each draftState.labels as l}
               <span
-                class="bg-accent inline-flex items-center gap-1 rounded-lg px-2 py-0.5 text-sm text-white"
+                class="bg-secondary inline-flex items-center gap-1 rounded-lg px-2 py-0.5 text-sm text-white"
               >
                 {l}
                 <button
@@ -257,7 +257,7 @@
                   type="button"
                   onmousedown={(e) => e.preventDefault()}
                   onclick={() => onSuggestionClick(l)}
-                  class="bg-accent hover:bg-accent-hover rounded-lg px-2.5 py-0.5 text-sm text-white"
+                  class="bg-secondary hover:bg-secondary-hover rounded-lg px-2.5 py-0.5 text-sm text-white"
                 >
                   {l}
                 </button>
@@ -304,7 +304,7 @@
           disabled={draftState.publishing ||
             !draftState.title.trim() ||
             !draftState.content.trim()}
-          class="bg-brand hover:bg-brand-hover rounded px-5 py-1.5 font-medium text-white disabled:cursor-not-allowed disabled:opacity-50"
+          class="bg-accent hover:bg-accent-hover rounded px-5 py-1.5 font-medium text-white disabled:cursor-not-allowed disabled:opacity-50"
         >
           {draftState.publishing ? "Publishing…" : "Publish discussion"}
         </button>
diff --git a/src/lib/components/PostContent.svelte b/src/lib/components/PostContent.svelte
index 9ea3221..7918f13 100644
--- a/src/lib/components/PostContent.svelte
+++ b/src/lib/components/PostContent.svelte
@@ -607,7 +607,7 @@
         href={inline.href}
         target={internal ? undefined : "_blank"}
         rel={internal ? undefined : "noopener noreferrer"}
-        class="text-brand break-all hover:underline">{inline.label}</a
+        class="text-accent break-all hover:underline">{inline.label}</a
       >
     {:else if inline.type === "mention"}
       {@const u = profiles[inline.pubkey] ?? resolvedUsers[inline.pubkey]}
@@ -615,7 +615,7 @@
         href="https://njump.me/{inline.entity}"
         target="_blank"
         rel="noopener noreferrer"
-        class="text-brand hover:underline">@{u?.shortName ?? inline.fallback}</a
+        class="text-accent hover:underline">@{u?.shortName ?? inline.fallback}</a
       >
     {:else if inline.type === "thread-quote"}
       {@const u = profiles[inline.pubkey] ?? resolvedUsers[inline.pubkey]}
@@ -640,7 +640,7 @@
     {:else if inline.type === "entity"}
       {@const ref = inline.id ? resolvedThreads[inline.id] : undefined}
       {#if ref}
-        <a href={threadRefHref(ref)} class="text-brand hover:underline"
+        <a href={threadRefHref(ref)} class="text-accent hover:underline"
           >{ref.title}</a
         >
       {:else}
@@ -648,7 +648,7 @@
           href="https://njump.me/{inline.entity}"
           target="_blank"
           rel="noopener noreferrer"
-          class="text-brand break-all hover:underline">{inline.label}</a
+          class="text-accent break-all hover:underline">{inline.label}</a
         >
       {/if}
     {:else if inline.type === "strong"}
diff --git a/src/lib/components/Tag.svelte b/src/lib/components/Tag.svelte
index e8be2de..be25f02 100644
--- a/src/lib/components/Tag.svelte
+++ b/src/lib/components/Tag.svelte
@@ -3,6 +3,6 @@
   let { label }: Props = $props();
 </script>
 
-<span class="bg-accent rounded-lg px-2.5 py-0 text-sm text-white">
+<span class="bg-secondary rounded-lg px-2.5 py-0 text-sm text-white">
   {label}
 </span>
diff --git a/src/lib/components/ThreadItem.svelte b/src/lib/components/ThreadItem.svelte
index e1e99af..7a9dfa7 100644
--- a/src/lib/components/ThreadItem.svelte
+++ b/src/lib/components/ThreadItem.svelte
@@ -41,7 +41,7 @@
   <!-- Col 1: title + byline -->
   <div class="min-w-0 flex-1">
     <div
-      class="group-hover:text-brand mb-1.5 text-lg leading-5 text-neutral-900 dark:text-neutral-100"
+      class="group-hover:text-accent mb-1.5 text-lg leading-5 text-neutral-900 dark:text-neutral-100"
     >
       {thread.title}
     </div>
diff --git a/src/lib/components/ThreadScrubber.svelte b/src/lib/components/ThreadScrubber.svelte
index 666cd90..c9505d5 100644
--- a/src/lib/components/ThreadScrubber.svelte
+++ b/src/lib/components/ThreadScrubber.svelte
@@ -169,7 +169,7 @@
 
     <!-- Thumb -->
     <div
-      class="bg-brand absolute cursor-grab touch-none rounded-full transition-colors hover:bg-neutral-600 active:cursor-grabbing"
+      class="bg-accent absolute cursor-grab touch-none rounded-full transition-colors hover:bg-neutral-600 active:cursor-grabbing"
       style="width: 4px; right: 3px; top: {thumbTop}px; height: {thumbHeight}px;"
       onpointerdown={onThumbPointerDown}
       onpointermove={onThumbPointerMove}
diff --git a/src/lib/config.ts b/src/lib/config.ts
index fd21ac0..e7c6615 100644
--- a/src/lib/config.ts
+++ b/src/lib/config.ts
@@ -17,3 +17,8 @@ export const LABELS = (env.PUBLIC_LABELS ?? "")
   .map((l) => l.trim())
   .filter(Boolean);
 export const BLOSSOM_URL = (env.PUBLIC_BLOSSOM_URL ?? "").replace(/\/$/, "");
+
+// Theme color overrides: when set, replace the accent (primary) and secondary
+// CSS variables defined in layout.css. Hover shades are derived in the layout.
+export const ACCENT_COLOR = env.PUBLIC_ACCENT_COLOR ?? "";
+export const SECONDARY_COLOR = env.PUBLIC_SECONDARY_COLOR ?? "";
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 20c4821..d5b75ee 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -23,10 +23,31 @@
   import { seedProfiles } from "$lib/profiles.svelte";
   import { startChat } from "$lib/chat.svelte";
   import { activeGroup, setActiveGroup } from "$lib/active.svelte";
-  import { MODE } from "$lib/config";
+  import { MODE, ACCENT_COLOR, SECONDARY_COLOR } from "$lib/config";
 
   let { children } = $props();
 
+  // Optional env overrides for the theme colors. Set as inline custom props on
+  // <html> so they outrank the @theme `:root` defaults; hover shades are derived
+  // by darkening the base 15% so admins only set one value per color.
+  $effect(() => {
+    const root = document.documentElement;
+    if (ACCENT_COLOR) {
+      root.style.setProperty("--color-accent", ACCENT_COLOR);
+      root.style.setProperty(
+        "--color-accent-hover",
+        `color-mix(in srgb, ${ACCENT_COLOR} 85%, #000)`,
+      );
+    }
+    if (SECONDARY_COLOR) {
+      root.style.setProperty("--color-secondary", SECONDARY_COLOR);
+      root.style.setProperty(
+        "--color-secondary-hover",
+        `color-mix(in srgb, ${SECONDARY_COLOR} 85%, #000)`,
+      );
+    }
+  });
+
   const mode = MODE;
   const chatEnabled = true;
 
@@ -168,7 +189,7 @@
         onclick={() => (mobileView = "forum")}
         aria-pressed={mobileView === "forum"}
         class="flex flex-1 flex-col items-center gap-0.5 py-2 text-xs font-medium
-				{mobileView === 'forum' ? 'text-brand' : 'text-neutral-500 dark:text-neutral-400'}"
+				{mobileView === 'forum' ? 'text-accent' : 'text-neutral-500 dark:text-neutral-400'}"
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -192,7 +213,7 @@
         onclick={() => (mobileView = "chat")}
         aria-pressed={mobileView === "chat"}
         class="flex flex-1 flex-col items-center gap-0.5 py-2 text-xs font-medium
-				{mobileView === 'chat' ? 'text-brand' : 'text-neutral-500 dark:text-neutral-400'}"
+				{mobileView === 'chat' ? 'text-accent' : 'text-neutral-500 dark:text-neutral-400'}"
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 9584521..5210d7b 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -62,7 +62,7 @@
   {#if partial}
     <hr class="text-neutral-300 dark:text-neutral-600" />
   {:else}
-    <h1 class="text-brand py-2 text-[1.65rem]">Forum rooms</h1>
+    <h1 class="text-accent py-2 text-[1.65rem]">Forum rooms</h1>
   {/if}
 
   {#if groupsStore.list.length === 0}
@@ -83,7 +83,7 @@
       >
         <div class="min-w-0">
           <h2
-            class="group-hover:text-brand text-2xl text-neutral-800 dark:text-neutral-200"
+            class="group-hover:text-accent text-2xl text-neutral-800 dark:text-neutral-200"
           >
             {room.name}
           </h2>
diff --git a/src/routes/contacts/+page.svelte b/src/routes/contacts/+page.svelte
index b13a2df..0fe768a 100644
--- a/src/routes/contacts/+page.svelte
+++ b/src/routes/contacts/+page.svelte
@@ -72,7 +72,7 @@
 </svelte:head>
 
 <div class="mx-auto max-w-6xl">
-  <h1 class="text-brand py-2 text-[1.65rem]">Contacts</h1>
+  <h1 class="text-accent py-2 text-[1.65rem]">Contacts</h1>
 
   {#if partial}
     <div class="mb-8">
@@ -120,7 +120,7 @@
                 href="https://njump.me/{c.npub}"
                 target="_blank"
                 rel="noopener noreferrer"
-                class="text-brand shrink-0 text-sm hover:underline"
+                class="text-accent shrink-0 text-sm hover:underline"
               >
                 View profile ↗
               </a>
@@ -141,7 +141,7 @@
                     href={websiteHref(c.entry.website)}
                     target="_blank"
                     rel="noopener noreferrer"
-                    class="text-brand truncate hover:underline"
+                    class="text-accent truncate hover:underline"
                   >
                     {websiteLabel(c.entry.website)}
                   </a>
@@ -161,7 +161,7 @@
                   <span class="text-neutral-400 dark:text-neutral-500">Manages:</span>
                   {#each rooms as r, i}<a
                       href="/room/{r.id}"
-                      class="text-brand hover:underline">{r.name}</a
+                      class="text-accent hover:underline">{r.name}</a
                     >{i < rooms.length - 1 ? ", " : ""}{/each}
                 </p>
               {/if}
diff --git a/src/routes/layout.css b/src/routes/layout.css
index 29c6902..464dae2 100644
--- a/src/routes/layout.css
+++ b/src/routes/layout.css
@@ -47,7 +47,7 @@ body {
 }
 .prose :is(h1) {
   font-size: 1.65rem;
-  color: var(--color-brand);
+  color: var(--color-accent);
 }
 .prose :is(p) {
   margin-top: 0;
@@ -61,7 +61,7 @@ body {
   color: var(--color-neutral-100);
 }
 :where(.dark) .prose :is(h1) {
-  color: var(--color-brand);
+  color: var(--color-accent);
 }
 :where(.dark) .prose :is(blockquote) {
   color: var(--color-neutral-400);
@@ -72,8 +72,8 @@ body {
 }
 
 @theme {
-  --color-brand: #e32a6d;
-  --color-brand-hover: #c4205a;
-  --color-accent: #ffaf25;
-  --color-accent-hover: #e69e1a;
+  --color-accent: #e32a6d;
+  --color-accent-hover: #c4205a;
+  --color-secondary: #ffaf25;
+  --color-secondary-hover: #e69e1a;
 }
diff --git a/src/routes/resource/[slug]/+page.svelte b/src/routes/resource/[slug]/+page.svelte
index 7f7961f..310d833 100644
--- a/src/routes/resource/[slug]/+page.svelte
+++ b/src/routes/resource/[slug]/+page.svelte
@@ -31,7 +31,7 @@
 <div class="mx-auto max-w-6xl">
   <a
     href="/"
-    class="hover:text-brand mb-1 inline-flex items-center gap-1 text-sm text-neutral-400 dark:text-neutral-500"
+    class="hover:text-accent mb-1 inline-flex items-center gap-1 text-sm text-neutral-400 dark:text-neutral-500"
   >
     <svg
       xmlns="http://www.w3.org/2000/svg"
diff --git a/src/routes/thread/[id]/+page.svelte b/src/routes/thread/[id]/+page.svelte
index b4654b2..bac2d50 100644
--- a/src/routes/thread/[id]/+page.svelte
+++ b/src/routes/thread/[id]/+page.svelte
@@ -350,7 +350,7 @@
           <button
             onclick={() => quotePost(p)}
             disabled={!auth.user}
-            class="hover:text-brand flex cursor-pointer items-center gap-1.5 text-neutral-300 transition-colors disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-600"
+            class="hover:text-accent flex cursor-pointer items-center gap-1.5 text-neutral-300 transition-colors disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-600"
           >
             <span>Quote post</span>
             <svg
@@ -381,7 +381,7 @@
       >
         <a
           href={MODE === "full" ? `/room/${detail.groupId}` : "/"}
-          class="hover:text-brand mb-1 inline-flex items-center gap-1 text-sm text-neutral-400 dark:text-neutral-500"
+          class="hover:text-accent mb-1 inline-flex items-center gap-1 text-sm text-neutral-400 dark:text-neutral-500"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -400,7 +400,7 @@
           </svg>
           Discussions
         </a>
-        <h1 class="text-brand text-[1.65rem] leading-7">{detail.title}</h1>
+        <h1 class="text-accent text-[1.65rem] leading-7">{detail.title}</h1>
         {#if isScrolled}
           <div
             class="pointer-events-none absolute right-0 left-0 h-8 bg-gradient-to-b from-white to-transparent transition-opacity duration-200 dark:from-neutral-900"
@@ -458,7 +458,7 @@
             <button
               onclick={submitReply}
               disabled={replying || !replyContent.trim()}
-              class="bg-brand hover:bg-brand-hover rounded px-6 py-1.5 font-medium text-white disabled:cursor-not-allowed disabled:opacity-50"
+              class="bg-accent hover:bg-accent-hover rounded px-6 py-1.5 font-medium text-white disabled:cursor-not-allowed disabled:opacity-50"
             >
               {replying ? "Posting…" : "post reply"}
             </button>
@@ -466,7 +466,7 @@
         {:else}
           <p class=" text-center text-neutral-500 dark:text-neutral-400">
             To participate and reply, please
-            <button onclick={openLogin} class="text-brand hover:underline"
+            <button onclick={openLogin} class="text-accent hover:underline"
               >login now</button
             >
           </p>
@@ -493,7 +493,7 @@
     onmousedown={(e) => e.preventDefault()}
     onclick={quoteFromSelection}
     style="top: {selectionTarget.top}px; left: {selectionTarget.left}px;"
-    class="bg-brand hover:bg-brand-hover fixed z-50 -translate-x-1/2 -translate-y-full rounded px-3 py-1 text-xs font-medium text-white shadow-md"
+    class="bg-accent hover:bg-accent-hover fixed z-50 -translate-x-1/2 -translate-y-full rounded px-3 py-1 text-xs font-medium text-white shadow-md"
   >
     Quote
   </button>