Jump to content

RefractTrack Themes and Branding: Difference between revisions

From Pixel Refraction Studio

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
 
(2 intermediate revisions by the same user not shown)
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
[[File:RefractTrack_Themes.png|border|center|700px|The Application Config screen, with the full set of color themes to choose from.]]
* <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 ===
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.
 
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.


=== 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]]
[[Category:RefractTrack]]

Latest revision as of 23:01, 11 September 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.

The Application Config screen, with the full set of color themes to choose from.
The Application Config screen, with the full set of color themes to choose from.

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=156"