Theme Customization

Override the default fellos theme to match your organization's brand colors and visual style.

The Theme page is found under APPEARANCE → Theme in the admin sidebar. fellos uses CSS custom properties (variables) for its visual styling, and this page lets you override the defaults to match your organization's branding. Changes appear immediately in the preview area, so you can experiment before saving.

The Theme page — edit CSS variables on the left, see a live preview of your changes on the right.

How Theme Customization Works

fellos uses CSS custom properties (also called CSS variables) to control the visual appearance of the entire site. When you change a theme variable, every element that references that variable updates automatically. This means you can change the primary color once and see it applied to buttons, links, active sidebar items, badges, and more — all at once.

The Theme page provides a form-based interface for editing these variables. You don't need to write CSS — just pick colors using the color picker or enter hex values directly.

Commonly Customized Variables

Here are the most important theme variables and what they control:

--primary-color

The main accent color used throughout the site. It affects active sidebar items, links, member type badges, notification dots, and interactive elements. This is typically your organization's primary brand color.

--nav-background

The background color of the top navigation bar. The default is a deep brown (#4a3f35). If your organization uses a dark blue, black, or other dark color for its branding, this is where you'd change it. Keep it dark enough that white text remains readable.

--sidebar-background

The background color of the sidebar navigation. The default is a warm white (#fffcf8). Most organizations leave this as-is, but you can adjust it if needed.

--page-background

The main content area background color. The default is a light cream (#f5f0e8). This provides the subtle warm tone that characterizes the fellos interface.

--button-color

The background color for primary action buttons (Save, Submit, Create, etc.). By default, this matches the primary color, but you can set it independently if you want buttons to stand out differently.

Tip

Start with just the primary color. Change --primary-color to match your organization's brand, and leave the rest at their defaults. You can always fine-tune other variables later, but the primary color alone makes a big difference.

Using the Color Picker

Each color variable has two input methods:

Color swatch — click the colored square to open a visual color picker. Select your color and it's applied immediately in the preview.
Hex input — type a hex color code directly (e.g., #1a5276). This is useful when you have exact brand colors from a style guide.

Both methods update the preview in real time. Changes are not saved until you click Save Changes.

Preview Area

The preview area on the right side of the Theme page shows a miniature version of the member-facing site with your current theme applied. It includes:

The navigation bar with your nav background color
The sidebar with the active item using your primary color
Feed cards in the content area
A sample button with your button color

As you change any variable, the preview updates instantly. This lets you experiment with different color combinations before committing.

Resetting the Theme

If you want to revert to the default fellos theme, click the Reset button. This clears all your custom overrides and restores the original color scheme. You'll see the preview update to show the defaults — click Save Changes to apply the reset.

Important

Resetting the theme removes all customizations — there's no "undo." If you've spent time customizing your theme, consider noting your hex values before resetting. Theme changes are recorded in the audit log, so you can reference previous values there if needed.

Advanced Customization

Beyond the variables available in the Theme interface, fellos supports additional CSS custom properties for more granular control. Common advanced customizations include:

--card-background — the background of feed cards, profile cards, and other content panels
--card-border — the border color for cards and panels
--text-primary — the main text color
--text-secondary — the color for secondary/muted text
--accent-success — the color for success states (approvals, confirmations)
--accent-warning — the color for warning states
--accent-danger — the color for error/danger states (deletions, rejections)

Good to know

When choosing colors, ensure sufficient contrast for accessibility. Text should be readable against its background — dark text on light backgrounds, or light text on dark backgrounds. The default fellos theme has been designed with accessibility in mind.