Jump to content

RefractTrack Themes and Branding: Difference between revisions

From Pixel Refraction Studio
Newer edit →

Nerdofepic (talk | contribs)

3 user groups
199 edits
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..."
 
No edit summary
Line 1: Line 1:
== Themes and Branding ==
== 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>.
Make RefractTrack feel like your own tool. From Manage → Application Config, an admin can change the app's display name and pick from a set of color themes — no technical setup, no files to touch, just a menu.
 
* <code><nowiki>themes:change</nowiki></code> — permission to change the color theme
* <code><nowiki>themes:brand</nowiki></code> — permission to change the application's display name


=== Color themes ===
=== Color themes ===


RefractTrack ships 15 selectable accent-color theme variants:
RefractTrack ships with 15 accent-color themes to choose from:


{| class="wikitable"
{| class="wikitable"
! Theme !! Description
! Theme !! Feel
|-
|-
| Blueprint || Cool blue accent (default)
| Blueprint || Cool blue (the default)
|-
|-
| Slate || Steel-cyan accent
| Slate || Steel cyan
|-
|-
| Ember || Warm amber accent
| Ember || Warm amber
|-
|-
| Violet || Blue-violet accent
| Violet || Blue-violet
|-
|-
| Rose || Pink-magenta accent
| Rose || Pink-magenta
|-
|-
| Moss || Forest green accent
| Moss || Forest green
|-
|-
| Indigo || Deep indigo accent
| Indigo || Deep indigo
|-
|-
| Plum || Magenta-purple accent
| Plum || Magenta-purple
|-
|-
| Sky || Bright cyan-blue accent
| Sky || Bright cyan-blue
|-
|-
| Lime || Yellow-green accent
| Lime || Yellow-green
|-
|-
| Frost || Pale icy blue accent
| Frost || Pale icy blue
|-
|-
| Monochrome || No color — white accent
| Monochrome || No color, just white
|-
|-
| Crimson || Bold red accent
| Crimson || Bold red
|-
|-
| Sun || Bright yellow accent
| Sun || Bright yellow
|-
|-
| Rainbow || Cycling animated color accent
| Rainbow || A cycling, animated accent color
|}
|}


The interface is dark-themed overall; these accent themes change the highlight color used throughout, not the underlying dark/light mode.
The app is dark-themed throughout — these themes just change the accent color used for highlights and buttons, not the overall light or dark feel.
 
=== Accent-color CSS convention ===
 
Any hover/focus state that should reflect the active accent theme must use the <code><nowiki>var(--accent-hover)</nowiki></code> 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 ===


<code><nowiki>install.php</nowiki></code>'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.
During initial setup, you'll see a shorter list of four themes to pick from just to keep that first step simple — the full set of 15 is available afterward from Manage → Application Config any time you'd like to switch.


=== Related pages ===
=== Related pages ===


* [[RefractTrack_Installation|Installation]]
* [[RefractTrack_Getting_Started|Getting Started]]
* [[RefractTrack_Permissions_and_Roles|Permissions and Roles]]
* [[RefractTrack_Permissions_and_Roles|Permissions and Roles]]

Revision as of 00:17, 29 August 2026

Themes and Branding

Make RefractTrack feel like your own tool. From Manage → Application Config, an admin can change the app's display name and pick from a set of color themes — no technical setup, no files to touch, just a menu.

Color themes

RefractTrack ships with 15 accent-color themes to choose from:

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

The app is dark-themed throughout — these themes just change the accent color used for highlights and buttons, not the overall light or dark feel.

During initial setup, you'll see a shorter list of four themes to pick from just to keep that first step simple — the full set of 15 is available afterward from Manage → Application Config any time you'd like to switch.

Retrieved from "https://wiki.pixelrefraction.com/index.php?title=RefractTrack_Themes_and_Branding&oldid=85"