Beacon — a Discourse theme matched to your logo

A single theme that ships two color schemes built from your brand logo:

Scheme	Background	Links / accent	Use when…
Beacon Light	White #ffffff	Royal blue #1470eb (cyan #03c8ff as the secondary pop)	You want a bright forum
Beacon Dark	Near-black #0d1017	Cyan #03c8ff (royal blue #1470eb as the secondary pop)	You want a dark forum

Why the accent colors swap between schemes: the bright logo cyan does not have enough contrast to be readable as link text on a white background, so Light leads with the royal blue and Dark leads with the cyan. Both directions pass WCAG AA for text contrast. The cyan→blue gradient line under the header is the one fixed brand element shared by both, since no text sits on top of it.

Install

1. Download / unzip this folder, then re-zip it (or upload the provided beacon-theme.zip).
2. In Discourse go to Admin → Customize → Themes.
3. Click Install → From your device and pick the zip.

Tip: you can also push this folder to a public Git repo and use Install → From a git repository instead.

Choosing light or dark

After installing, open the theme and set its color scheme:

• One fixed appearance: set the theme's Color scheme to either Beacon Light or Beacon Dark.
• Automatic light/dark (recommended): set Color scheme to Beacon Light and Dark color scheme to Beacon Dark. Discourse will then follow each visitor's operating-system light/dark preference automatically.

You can let members override this themselves by enabling Admin → Settings → interface_color_selector.

Settings

• Header accent line (on by default) — toggles the cyan→blue gradient line beneath the header.

Rebranding

• Rename the theme or the two schemes by editing about.json.
• Change the gradient colors in one place: the --beacon-cyan and --beacon-blue tokens at the top of common/common.scss.

What's included

beacon-theme/
├── about.json            # metadata + both color schemes
├── settings.yml          # header accent toggle
├── common/common.scss    # shared styles (variable-driven, adapts to scheme)
├── desktop/desktop.scss  # desktop-only tweaks
├── mobile/mobile.scss    # mobile-only tweaks
├── screenshots/          # preview images shown in the admin theme list
└── LICENSE