Channel Theming

FanFest provides a comprehensive theming system that lets you customize your channel's visual identity. You can configure colors for every visual element -- from backgrounds and surfaces to text, borders, and icons -- so your channel matches your brand.

Accessing the Theme Editor

Navigate to your channel page, open the admin Settings menu (gear icon), and select Customize Channel. The customization panel has two tabs:

• Colors -- Configure your channel's color scheme using design tokens
• Sections -- Toggle which content sections appear on your channel page

Color Configuration

The Colors tab displays all configurable design tokens organized into six categories. Each token has a hex color input and a color picker.

Token Categories

Background

Controls the main page and secondary background colors.

Token	Purpose	Default
--bg	Primary page background	#0C1217
--bg-secondary	Secondary/alternate background	#1A1A1A

Surface

Controls card, panel, and overlay surfaces.

Token	Purpose	Default
--surface	Primary card/panel background	#1A1A1A
--surface-hover	Surface hover state	#2A2A2A
--surface-secondary	Secondary surface	#2A2A2A
--surface-secondary-hover	Secondary surface hover state	#3A3A3A
--surface-accent	Accent surface for highlighted elements	#875AF9

Fill

Controls button, badge, and interactive element fills. This is the largest category with brand, state, and medal color tokens.

Token	Purpose	Default
--fill-brand	Primary brand fill (buttons, badges)	#875AF9
--fill-brand-hover	Brand fill hover state	#9B6FFA
--fill-brand-pressed	Brand fill pressed state	#7B4AF8
--fill-brand-secondary	Secondary brand fill	#875AF9
--fill-dark	Dark fill variant	#0C1217
--fill-disabled	Disabled state fill	#3A3A3A
--fill-success	Success state (green)	#00C853
--fill-critical	Error/critical state (red)	#FF3D00
--fill-warning	Warning state (yellow)	#FFD600
--fill-gold	Gold medal/rank	#FFD700
--fill-silver	Silver medal/rank	#C0C0C0
--fill-bronze	Bronze medal/rank	#CD7F32

Text

Controls text colors across all UI elements.

Token	Purpose	Default
--text	Primary text	#FFFFFF
--text-on-brand	Text on branded backgrounds	#FFFFFF
--text-inverse	Inverse text (for light surfaces)	#0C1217
--text-secondary	Secondary/muted text	#CCCCCC
--text-tertiary	Tertiary text (least emphasis)	#999999
--text-disabled	Disabled state text	#666666
--text-brand	Brand-colored text	#875AF9
--text-success	Success state text	#00C853
--text-critical	Error state text	#FF3D00

Border

Controls borders on cards, buttons, inputs, and interactive elements.

Token	Purpose	Default
--border	Default border	#333333
--border-hover	Border hover state	#444444
--border-selected	Selected/active border	#875AF9
--border-brand	Brand-colored border	#875AF9
--border-critical	Error state border	#FF3D00
--border-success	Success state border	#00C853

Icon

Controls icon colors throughout the interface.

Token	Purpose	Default
--icon	Primary icon color	#FFFFFF
--icon-emphasis	Emphasized icon	#FFFFFF
--icon-on-branded-surface	Icons on brand-colored backgrounds	#FFFFFF
--icon-secondary	Secondary icon color	#CCCCCC
--icon-disabled	Disabled state icon	#666666
--icon-brand	Brand-colored icon	#875AF9

Using the Color Picker

For each token:

1. Enter a hex color value directly in the text input (e.g., #875AF9). The input supports 6-digit and 8-digit (with alpha) hex values.
2. Or select the color swatch circle to open the visual color picker with hue, saturation, and alpha controls.

Invalid hex values are highlighted with a red ring. The Save and Publish button is disabled until all color values are valid.

Saving and Publishing

After configuring your colors:

1. Review your changes in the token list
2. Select Save and Publish
3. Confirm in the confirmation dialog

Changes apply immediately across your channel. All fans visiting your channel will see the updated colors.

Community-Level Theming

In addition to channel-wide theming, each community within your channel can have its own color scheme. When a fan selects a community, the theme switches to that community's colors (if configured), providing distinct visual identities within a single channel.

Community themes use the same token system described above. The theme is loaded based on whether the fan is viewing the channel root or a specific community.

This is useful for multi-brand channels. For example, a sports league can give each team community its own color scheme, so the interface feels personalized to the selected team.

Legacy and V2 Tokens

FanFest's theming system has two layers:

• V2 tokens (current) -- The design tokens listed above (e.g., --fill-brand, --text-secondary, --surface). These are what you configure in the Customize Channel panel.
• V1 tokens (legacy) -- Older tokens like --brand-primary, --brand-bg-main. These are maintained for backward compatibility and mapped automatically from V2 values when needed.

When configuring your theme, you only need to work with V2 tokens. V1 tokens are handled internally by the platform.

For the complete list of all design tokens and their CSS custom property mappings, see the Design Tokens Reference.

Best Practices

• Start with your primary brand color -- Set --fill-brand to your primary brand color, then adjust related tokens (hover, pressed states) to be lighter/darker variants
• Maintain contrast -- Ensure text colors have sufficient contrast against their background surfaces. White text on dark backgrounds is the default pattern.
• Test with content -- After setting colors, view your channel page with actual shows, contests, and leaderboard entries to verify the theme looks correct in context
• Use consistent states -- Keep hover states slightly lighter than their base, and pressed states slightly darker, for a predictable interactive feel

Next Steps

• Brand Guidelines -- Complete brand asset specifications and design token reference
• Design Tokens Reference -- Full list of all 79+ design tokens
• Channel Setup -- Return to the channel configuration guide