Theme customization #62
Labels
database
Database schema related issues
priority: high
size: xl
trpc
tRPC related issues
ui
UI & design (frontend) related issues
Why?
The respective staff members should be able to customize the theme of public-facing tournament pages (management pages still under consideration).
How?
Database
Create a nullable
theme
field on theTournament
table of type jsonb. The jsonb's type will be an object containing:useTheme: boolean
maybe).tRPC
Update the
updateTournament
procedure to include thetheme
field mentioned above with the following as input (theme is an object): The base primary color (primary-500), the base surface color (surface-500), base font family, base font color, headings font family, headings font color.To avoid the possibility of unmatching colors being passed as values, the 500 shade of primary and surface are passed and from there, 50, 100, 200, 300, 400, 600, 700, 800 and 900 are generated. For a possible reference on how to do this see
generatePalette
function in Skeleton's repo: https://github.com/skeletonlabs/skeleton/blob/dev/sites/skeleton.dev/src/lib/layouts/DocsThemer/colors.ts.The font families (for both base and headings) can simply be a union of string literals containing the name of the font families.
The font colors for base must be a number between 1 and 3 (1 = white, 2 = surface-100, 3 = primary-100) and the font colors for headings must be a number between 1 and 6 (1 = white, 2 = primary-100, 3 = primary-200, 4 = primary-300, 5 = primary-400, 6 = primary-500).
UI
The theme customization UI will be in the Assets page, page which will be renamed to Design (
/design
). The design would be roughly like the image below.Mock-up of the design, not the final one
Provide some way of previewing the theme.
The text was updated successfully, but these errors were encountered: