Theme & Branding

Customize your portal's appearance with complete control over colors and branding.

Theme Customization

Customize over 50 different colors to match your brand perfectly. All colors use hex codes (e.g., #3b82f6).

Base Colors

Background Base - Main background color for your entire portal. Example: #FFFFFF (light) or #1F2937 (dark)

Primary Color - Your brand's main color used throughout the portal. Example: #3B82F6 (blue), #EF4444 (red)

Accent Color - Secondary color for highlights and emphasis. Example: #8B5CF6 (purple), #10B981 (green)

Accent Hover - Accent color on hover, usually a darker/lighter shade. Example: #7C3AED

Header Colors

Header Background - Background color of the header/navigation bar. Example: #FFFFFF (light) or #111827 (dark)

Header Border - Border color at bottom of header. Example: #E5E7EB or transparent

Navigation Link - Color of navigation menu text. Example: #6B7280 (gray) or #FFFFFF (white)

Navigation Link Hover - Navigation text color on hover. Example: #3B82F6 (brand color)

Button Colors - Primary

Primary Button Background - Background of primary call-to-action buttons. Example: #3B82F6

Primary Button Background Hover - Background on hover, usually darker shade. Example: #2563EB

Primary Button Border - Border color for primary buttons. Example: #3B82F6 or transparent

Primary Button Border Hover - Border color on hover. Example: #2563EB

Primary Button Text - Text color inside primary buttons. Example: #FFFFFF

Primary Button Text Hover - Text color on hover. Example: #FFFFFF

Button Colors - Secondary

Secondary Button Background - Background of secondary/outline buttons. Example: transparent or #F3F4F6

Secondary Button Background Hover - Background on hover. Example: #F9FAFB

Secondary Button Border - Border color for secondary buttons. Example: #D1D5DB

Secondary Button Border Hover - Border color on hover. Example: #9CA3AF

Secondary Button Text - Text color inside secondary buttons. Example: #374151

Secondary Button Text Hover - Text color on hover. Example: #1F2937

Search Box Colors

Search Background - Background of search input. Example: #F9FAFB or #FFFFFF

Search Background Hover/Focus - Background when active. Example: #FFFFFF

Search Border - Border color of search box. Example: #D1D5DB

Search Border Hover/Focus - Border when active. Example: #3B82F6

Search Text - Color of typed text. Example: #111827

Search Placeholder - Color of placeholder text. Example: #9CA3AF

Container & Card Colors

Container Background - Background for main content containers. Example: #FFFFFF or #F9FAFB

Card Background - Background for article cards and content boxes. Example: #FFFFFF

Card Border - Border around cards. Example: #E5E7EB or transparent

Text Colors

Text Heading - Color for headings (H1, H2, H3, etc.). Example: #111827 (light theme) or #FFFFFF (dark theme)

Text Body - Color for paragraph text. Example: #374151 (light theme) or #D1D5DB (dark theme)

Label Colors

Primary Label - Text color in primary labels/tags. Example: #FFFFFF text on #3B82F6 background

Primary Label Hover - Hover colors for interactive primary labels, usually darker/lighter shades

Secondary Label - Text in secondary labels/tags. Example: #6B7280 text on #F3F4F6 background

Secondary Label Hover - Hover colors for secondary labels

Pagination Colors

Pagination Background - Background of pagination buttons. Example: #FFFFFF

Pagination Active - Active page background and text. Example: #3B82F6 background with #FFFFFF text

Pagination Text - Text color for page numbers. Example: #6B7280

Pagination Hover - Background and text on hover. Example: #F3F4F6 background with #111827 text

CTA (Call-to-Action) Button

CTA Button - Special prominent button for important actions. Example: #FFFFFF text on #EF4444 (red) or #10B981 (green) background

CTA Button Hover - Hover state colors, usually darker shades. Example: #DC2626

Other Colors

Border Color - Generic border color used throughout for dividers and separators. Example: #E5E7EB

Social Media Icons - Color of social media icons. Example: #6B7280 default, #3B82F6 on hover

Theme Configuration Example

Light Theme:

theme: {
  bgBase: "#FFFFFF",
  primary: "#3B82F6",
  accent: "#8B5CF6",
  accentHover: "#7C3AED",
  headerBg: "#FFFFFF",
  headerBorder: "#E5E7EB",
  textHeading: "#111827",
  textBody: "#374151",
  cardBg: "#FFFFFF",
  cardBorder: "#E5E7EB",
  btnPrimaryBg: "#3B82F6",
  btnPrimaryText: "#FFFFFF"
  // ... more properties
}

Dark Theme:

theme: {
  bgBase: "#111827",
  primary: "#3B82F6",
  accent: "#8B5CF6",
  headerBg: "#1F2937",
  headerBorder: "#374151",
  textHeading: "#F9FAFB",
  textBody: "#D1D5DB",
  cardBg: "#1F2937",
  cardBorder: "#374151"
  // ... more properties
}

Best Practices

Accessibility - Ensure sufficient color contrast (WCAG 2.1 AA minimum: 4.5:1 for body text, 3:1 for large text)

Consistency - Use brand colors for primary elements, keep hover states consistent (10-20% darker/lighter), limit to 6-8 main colors

Testing - Preview on different devices, test with contrast checkers and colorblind simulators

Color Tools - Coolors.co (opens in a new tab), Color Hunt (opens in a new tab), WebAIM Contrast Checker (opens in a new tab), Adobe Color (opens in a new tab)