Supporting Dark Themes

• Working title: Supporting dark mode in Tightknit

• Category: Product

• Slug: dark-mode

• One‑liner: We introduced dark‑mode‑aware branding sets, moved branding to root‑level CSS variables, and enabled Tailwind’s dark styles—delivering a 90% complete dark experience with minimal risk to existing sites.

Dark mode has gone from “nice to have” to a baseline expectation. For communities that live in Tightknit all day, the ability to reduce glare at night, improve focus, and keep brand identity intact matters.

Over the past week, we shipped the first phase of dark mode across the web app and companion sites. This post breaks down what changed, why we changed it, how Orchid Security’s Dark Matter theme shaped the work, and what’s next.

The Orchid Security story: Dark Matter, real constraints

Orchid Security wanted a truly dark brand aesthetic—“Dark Matter”—for their companion site. Early tests surfaced real problems: harsh white outlines, unreadable button text in menus, and components that ignored branding because they rendered outside the app tree.

We turned that feedback into a focused implementation plan:

• Introduce a theme_mode on branding sets (light or dark) so dark themes don’t fight light‑biased defaults.

• Move branding from scattered styles to root‑level CSS variables so Radix portals and overlays inherit the correct colors.

• Activate shadcn/Tailwind dark styles via a .dark class on the branding root, then derive tokens for borders, surfaces, and text to eliminate “white halo” artifacts.

After an overnight push to wire these pieces together, we got to a “90% there” dark experience for Orchid—good enough to unblock their launch—while tracking the last 10% of visual nits for cleanup.

What changed (for everyone)

• Per‑brand theme mode in branding sets

• Root‑level CSS variables instead of inline overrides

• Tailwind + shadcn dark support, activated the right way

• Safer defaults for existing customers

Why this approach

• Portals and overlays must inherit branding

• Accessibility by design

• Predictable theming model

What’s improved already

• Real usage, real feedback

• 90% coverage today

What’s next

• Finish the last 10%

• Better logo and media handling

• Broader automated checks

For developers: the gist

• Mode detection

• Activation

• Why variables

Rollout status

• Enabled and merged; light‑mode customers should see negligible visual changes. Dark‑mode branding sets look great overall; we’re closing remaining visual gaps before calling it “done.”

Thank you

Huge thanks to Stephen and Danny for the late‑night push and reviews. Customer feedback from Orchid’s team was essential in shaping this rollout.