Theming

Overview

Votonic offers multiple ways to customize your community's appearance, from simple theme selection to advanced CSS customization. Choose the method that best suits your needs and technical expertise. These settings can be found at the General settings -> Community Theme section of your community's settings.

Theme Selection

The easiest way to customize your community's appearance is by selecting from our curated collection of preset themes. Each theme is carefully designed to provide a cohesive and professional look.

Brand Color

Make your community uniquely yours by setting a custom brand color. This color will be used as the primary accent throughout your community's interface.

Advanced Theme Customization

For more granular control over your community's appearance, you can customize individual color elements:

• Background: Main background color
• Foreground: Primary text color
• Muted: Subtle background color
• Muted Foreground: Secondary text color
• Card: Card background color
• Card Foreground: Text color within cards
• Popover: Popover/dropdown background color
• Popover Foreground: Text color within popovers
• Border: Border and divider color
• Input: Form input background color
• Primary: Main brand color
• Primary Foreground: Text color on primary elements
• Secondary: Secondary accent color
• Secondary Foreground: Text color on secondary elements
• Accent: Additional accent color
• Accent Foreground: Text color on accent elements
• Destructive: Color for destructive actions
• Destructive Foreground: Text color on destructive elements
• Ring: Focus ring color

Custom CSS

For complete control over your community's appearance, you can add custom CSS. This allows you to:

• Override default styles
• Add custom animations
• Modify layout and spacing
• Create unique visual effects
• Implement custom components

CSS Examples

Here are some common CSS customization examples:

/* Style cards with a custom shadow and hover effect */
.votonic-card {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
 
.votonic-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
 
/* Customize settings items with a subtle background */
.settings-item {
  padding: 12px 16px;
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.03);
  transition: background-color 0.2s ease;
}
 
.settings-item:hover {
  background-color: rgba(0, 0, 0, 0.06);
}
 
/* Style buttons with a custom gradient */
button {
  background: linear-gradient(45deg, #4a90e2, #357abd);
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  color: white;
  font-weight: 500;
  transition: opacity 0.2s ease;
}
 
button:hover {
  opacity: 0.9;
}