Theme Configuration
Customize how the SimpleCommenter widget looks on your website. Match your brand colors and choose the layout that works best for your users.
Where to Configure Theme
Theme settings are available in two locations:
Default Theme (Account-wide)
Set default theme settings that apply to all new projects:
- Go to Settings in the sidebar
- Click Default Settings
- Select the Theme tab
All new projects will inherit these defaults. Existing projects are not affected.
Project-Specific Theme
Override the default theme for individual projects:
- Go to Projects in the sidebar
- Select your project
- Click Theme in the project menu
Project-level settings take priority over account defaults.
If a project has no custom theme configured, it automatically uses your default theme settings.
Color Settings
Active Color (Primary)
The primary accent color used throughout the widget:
- Feedback button background
- Active state indicators
- Submit buttons and CTAs
- Comment markers on the page
Click the Active color swatch to open the color picker. Choose any color that matches your brand.
| Default | Hex Code |
|---|---|
| Yellow | #F7D070 |
Overlay Color
The highlight color used for page overlays when users are selecting elements to comment on:
- Selection overlay background
- Element highlight indicators
Click the Overlay color swatch to customize this color.
| Default | Hex Code |
|---|---|
| Blue | #4098D7 |
Choose an overlay color that contrasts well with your website's content. Semi-transparent overlays work best.
Modal Alignment
Control where the feedback modal appears on the page:
| Alignment | Description |
|---|---|
| Left | Modal appears on the left side |
| Center | Modal appears in the center |
| Right | Modal appears on the right side |
Select your preferred alignment using the toggle buttons in the theme settings.
Compact Modal
Enable a smaller, less intrusive feedback widget:
| Mode | Description |
|---|---|
| Standard | Full-size modal with three-button interface (disable, view, comment) |
| Compact | Minimized single-button design for a cleaner look |
Toggle Compact Modal on or off based on your preference:
- Standard mode — Shows a three-button interface letting users toggle between disabled, view-only, and comment modes
- Compact mode — Shows a single floating button that's less visually intrusive
Compact mode works well for websites where you want feedback collection without distracting from the main content.
Live Preview
As you adjust theme settings, the Modal Preview section shows a real-time preview of how your widget will appear:
- See your color choices applied instantly
- Preview the alignment positioning
- Toggle between standard and compact modes to compare
Saving Changes
After making changes:
- The Save All Settings button appears when you have unsaved changes
- Click to save your theme configuration
- Changes apply to the widget immediately
Restore Defaults
Click Restore Default to reset all theme settings to the original values:
- Active color:
#F7D070(yellow) - Overlay color:
#4098D7(blue) - Alignment: Right
- Compact mode: Off
Theme Properties Reference
- Name
primary- Type
- string
- Description
Hex color code for the primary/active color. Default:
#F7D070
- Name
overlay- Type
- string
- Description
Hex color code for the selection overlay. Default:
#4098D7
- Name
text- Type
- string
- Description
Hex color code for text. Default:
#000000
- Name
border- Type
- string
- Description
Hex color code for borders. Default:
#000000
- Name
background- Type
- string
- Description
Hex color code for backgrounds. Default:
#FFFFFF
- Name
modalAlign- Type
- number
- Description
Modal alignment:
0(right),1(center),2(left). Default:0
- Name
minimized- Type
- boolean
- Description
Enable compact modal mode. Default:
false
Theme Inheritance
SimpleCommenter uses a cascade system for themes:
Project Theme → Default Theme → System Defaults
- Project Theme — If set, this is used
- Default Theme — Falls back to your account defaults
- System Defaults — Uses SimpleCommenter's built-in theme
This allows you to set once and apply everywhere, while still customizing individual projects when needed.
Next Steps
- Widget Customization — Additional widget styling via data attributes
- Project Settings — Other project configuration options
- Installation Guide — Add the widget to your website