Theme colour
1. What This Page Is For
The Theme colour page is used to pick the primary colour scheme for the entire website. This setting governs the appearance of action buttons, game category tabs, the hot games header banner, highlight borders, and fallback backgrounds for games without artwork. The player lobby operates in dark mode at all times.
The system provides 19 professionally calibrated gradient colorways. Selecting any colour applies it across the entire player-facing lobby immediately upon saving.
2. Before You Begin
- Permission Requirements: You must have the 'Theme colour' permission in your staff role to view and modify colours on this page. (Users without update permission see the page in read-only mode).
- Things to Prepare:
- Agreement within your team on brand identity and seasonal palette choices.
- Verification that your current brand logo contrasts well against the chosen colour palette.
3. Page Layout and Components
From top to bottom, this page consists of the following sections:
- Page Header: Displays the title Theme Color, subtitle, and breadcrumb path (Settings / Theme / Theme Color).
- Page Audit Bar: Displays the current configuration version, last updater name, updater type, and last update timestamp.
- Preview Card (On the site): A live simulation of the dark lobby in your chosen colour:
- Top Bar: Displays the site logo alongside the Promotions, Sign in, and Sign up buttons.
- Game Tabs: Displays sample tabs (Home, Slots, Casino, Fishing, Sports) where the active tab wears your chosen gradient.
- Hot Games Strip: Displays the "Hot games" header bar with flame icon and an 8-card game grid with a play button.
- Color Selection Grid (Pick a colour): Displays 19 colour swatch tiles with gradient previews, colour names, and an In use badge on the active colour.
- Form Action Bar: Floating bottom bar with Cancel and Save buttons, enabled when a new colour is selected.
4. Search and Filters
Because this page is a visual palette selector, there is no search bar or filter dropdown. Instead, you can immediately preview colour changes in the top On the site preview card:
| Preview Component | Visual Change When Swapping Colours | Details to Note |
|---|---|---|
| Sign up button | Adopts the primary gradient background | Crisp white text against vibrant gradient. |
| Sign in button | Border and text tint match the primary tone | Transparent outline button style. |
| Promotions button | Border and subtle glow reflect the primary hue | Accent highlight button. |
| Active tab (Home) | Receives the full primary gradient fill | Inactive tabs remain muted dark gray. |
| Hot games banner | Gradient banner stretches across the category header | Flame icon and bold white title stand out. |
| Play button overlay | Round circular action button wears the gradient | Displays triangle play icon on the first game card. |
5. Data Table and Layout Cards
19 Available Theme Colorways
| Number | Swatch Name | Gradient Hue & Characteristics | Best Suited For |
|---|---|---|---|
| 0 | Dark Orange | Vivid bright orange to deep orange | High-energy, dynamic, active platforms |
| 1 | Scarlet | Crisp scarlet red to rich crimson | Classic high-converting casino aesthetic |
| 2 | Amber Glow | Warm gold-orange to radiant orange | Warm, premium, welcoming ambiance |
| 3 | Pineapple Pop | Cheerful sunny yellow to golden yellow | Friendly, vibrant, approachable look |
| 4 | Lime Fresh | Electric lime to fresh apple green | Modern, sporty, energetic aesthetic |
| 5 | Emerald | Rich green to deep teal | Wealth, fortune, luck, classic gaming |
| 6 | Sky Blue | Crisp light blue to rich royal blue | Clean, transparent, tech-forward, trusted |
| 7 | Indigo | Balanced purple-blue to royal blue | Professional, trustworthy, balanced |
| 8 | Royal Purple | Vivid violet to royal purple | Luxurious, exclusive, VIP prestige |
| 9 | Pink Blush | Bright pop pink to rose blossom | Eye-catching, playful, modern pop style |
| 10 | Rose | Deep magenta rose to vibrant pink | Chic, fashionable, high-contrast premium |
| 11 | Sunset Glow | Warm horizon sunset orange | Relaxing yet energetic warmth |
| 12 | Ocean Blue | Deep ocean aqua-teal to marine blue | Refreshing, cool, comfortable on eyes |
| 13 | Aurora | Luminous northern-lights blue-green | Futuristic, digital, neon-glow aesthetic |
| 14 | Royal Gold | Rich classic shimmering gold | High-roller, opulent, casino prestige |
| 15 | Midnight Violet | Deep night-sky purple | Mystical, sophisticated, sleek dark tone |
| 16 | Crimson Wine | Deep bordeaux crimson wine | Bold, grounded, mature premium gaming |
| 17 | Jade | Classic imperial jade green | Prosperity, serenity, traditional luck |
| 18 | Sakura | Gentle blossom pink | Soft, elegant, contemporary styling |
6. Step-by-Step Guide
1. Changing the Site Theme Colour
- Navigate to Site look > Theme colour from the left navigation menu.
- In the Pick a colour grid, click your desired colour tile.
- Observe the immediate changes:
- The selected tile receives a blue highlight border and a white checkmark icon.
- The On the site preview card at the top re-renders in the newly chosen palette.
- Verify overall contrast, readability of button labels, and harmony with your logo.
- Click Save in the bottom action bar.
- A green confirmation alert will notify you: "Theme colour saved".
2. Discarding Colour Changes Before Saving
- If you experimented with different colours and wish to revert to the active colour, click Cancel in the bottom action bar.
- The selection immediately resets to the swatch marked In use.
7. Form Fields and Settings
| Field / Selection | Required? | Description | Example | Constraints |
|---|---|---|---|---|
| Pick a colour | Required | Select one of the 19 pre-calibrated theme swatches. | Royal Gold (14) | Only 1 colour can be selected at a time; applies system-wide. |
8. Popups and Confirmation Modals
1. Version Conflict Alert
- Triggered When: Another administrator saved a colour change before your save request was submitted.
- What You See: A red error snackbar: "Another admin changed the colour first. Their colour is shown; pick again".
- Action Required: The system automatically loads the newest active colour. Select your preferred palette again and click Save.
- Result: Prevents concurrent administrators from overwriting each other's configurations unknowingly.
2. Unsaved Changes Guard (Dirty Form Guard)
- Triggered When: You have clicked a new colour swatch and attempt to navigate to another page or close the tab without clicking Save.
- What You See: A browser modal warning of unsaved changes.
- Action Required: Click Cancel to remain on the page and save, or confirm to discard your draft selection.
9. Status Badges and Colors
| Badge / Symbol | Color | Meaning | Required Action |
|---|---|---|---|
| In use | Green | The currently published and active colour across the live website. | No action required if you wish to keep this colour. |
| White Checkmark | White on gradient | The colour currently selected in your draft preview. | Click Save to publish, or click another swatch to explore. |
| Focus Ring | Blue | Active selection outline surrounding the swatch. | Indicates which tile currently holds user focus. |
10. Frequently Asked Questions and Troubleshooting
- Why do players still see the previous colour after I saved a new one?
- Theme colors take effect instantly in the system, but client browsers may cache stylesheet variables. Ask players or staff to perform a hard refresh (Ctrl + F5 or Cmd + Shift + R) or clear their browser cache.
- Why is the Save button greyed out and unclickable?
- The Save button is only enabled when you select a colour that is different from the one currently marked In use.
- Can I input a custom Hex colour code outside the 19 swatches?
- The B2C CMS platform intentionally uses 19 curated, high-contrast swatches calibrated specifically for accessibility and dark mode stability. Arbitrary hex codes are not supported.
- What should I do if the chosen theme colour clashes with our logo?
- Navigate to Site look > Logo to upload a transparent or neutral-toned logo, or revert to a theme colour that harmonizes with your branding.