Jump to content

RefractTrack Themes and Branding

From Pixel Refraction Studio
Revision as of 23:29, 27 August 2026 by Nerdofepic (talk | contribs) (Created page with "== Themes and Branding == The application's name and color theme are configurable from Manage → Application Config (<code><nowiki>app_settings.php</nowiki></code>), without touching any file on the server — both live in the single-row <code><nowiki>app_settings</nowiki></code> database table, not in <code><nowiki>config/config.php</nowiki></code>. * <code><nowiki>themes:change</nowiki></code> — permission to change the color theme * <code><nowiki>themes:brand</no...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Themes and Branding

The application's name and color theme are configurable from Manage → Application Config (app_settings.php), without touching any file on the server — both live in the single-row app_settings database table, not in config/config.php.

  • themes:change — permission to change the color theme
  • themes:brand — permission to change the application's display name

Color themes

RefractTrack ships 15 selectable accent-color theme variants:

Theme Description
Blueprint Cool blue accent (default)
Slate Steel-cyan accent
Ember Warm amber accent
Violet Blue-violet accent
Rose Pink-magenta accent
Moss Forest green accent
Indigo Deep indigo accent
Plum Magenta-purple accent
Sky Bright cyan-blue accent
Lime Yellow-green accent
Frost Pale icy blue accent
Monochrome No color — white accent
Crimson Bold red accent
Sun Bright yellow accent
Rainbow Cycling animated color accent

The interface is dark-themed overall; these accent themes change the highlight color used throughout, not the underlying dark/light mode.

Accent-color CSS convention

Any hover/focus state that should reflect the active accent theme must use the var(--accent-hover) CSS custom property rather than a hardcoded hex value — otherwise it will always show Blueprint's blue regardless of which theme is actually selected.

Install-time theme picker

install.php's app-config step offers a deliberately short 4-theme subset — Blueprint, Slate, Ember, Frost — for a simpler first impression during setup. This isn't a limitation of the app; it's a smaller starting menu, and all 15 themes become available afterward from Manage → Application Config. The subset is kept at a multiple of the theme picker's grid column count (2, at the install card's 600px width) so the grid fills evenly rather than leaving a lone item dangling on its own row.