hq/bpist-squalk-forum
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Allow to specify accend and secondary colors

Browse source
This commit is contained in:
dtonon 2026-06-05 17:32:11 +01:00
parent 7cd9a68ae3
commit be3a4b34d3
23 changed files with 96 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/routes/+layout.svelte
View file

@ -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"

4
src/routes/+page.svelte
View file

@ -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>

8
src/routes/contacts/+page.svelte
View file

@ -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}

12
src/routes/layout.css
View file

@ -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;
}

2
src/routes/resource/[slug]/+page.svelte
View file

@ -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"

12
src/routes/thread/[id]/+page.svelte
View file

@ -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>