RefractTrack Themes and Branding - Revision history

Nerdofepic at 23:01, 11 September 2026

2026-09-11T23:01:04Z

← Older revision		Revision as of 23:01, 11 September 2026
Line 2:		Line 2:

	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.		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.

			[[File:RefractTrack_Themes.png\|border\|center\|700px\|The Application Config screen, with the full set of color themes to choose from.]]

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

Nerdofepic at 03:36, 3 September 2026

2026-09-03T03:36:23Z

← Older revision		Revision as of 03:36, 3 September 2026
Line 49:		Line 49:
	* [[RefractTrack_Getting_Started\|Getting Started]]		* [[RefractTrack_Getting_Started\|Getting Started]]
	* [[RefractTrack_Permissions_and_Roles\|Permissions and Roles]]		* [[RefractTrack_Permissions_and_Roles\|Permissions and Roles]]

			[[Category:RefractTrack]]

Nerdofepic at 00:17, 29 August 2026

2026-08-29T00:17:26Z

← Older revision		Revision as of 00:17, 29 August 2026
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]]

Nerdofepic: Created page with "== 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 2026-08-27T23:29:46Z 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..." New page == 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</nowiki></code> — permission to change the application's display name === Color themes === RefractTrack ships 15 selectable accent-color theme variants: {| class="wikitable" ! 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 <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 === * [[RefractTrack_Installation|Installation]] * [[RefractTrack_Permissions_and_Roles|Permissions and Roles]]