Eventonomy

How to Match Eventonomy to Your Brand Colors

By default, Eventonomy paints its buttons, links, and active states in its own accent color - an accessible grass green - so every install has the same clean identity regardless of the theme it runs on. That is a deliberate floor: the plugin owns its accent, so a registration button is never left an unreadable color by a theme it happened to inherit from.

If you would rather Eventonomy wear your brand color, that is an explicit opt-in. You set four CSS variables, and Eventonomy uses them everywhere its accent appears. Nothing else changes.

What you need

Somewhere to add a few lines of CSS to your site - Appearance → Customize → Additional CSS works, or your theme's own custom-CSS box, or a child theme stylesheet. No code beyond CSS is required.

The four variables

Add this block and change the colors to yours. Every value is optional: set only the ones you want to change, and Eventonomy keeps its default for the rest.

:root {
	/* The main accent: buttons, primary calls to action, links, focus rings. */
	--evnm-accent-override: #0055aa;

	/* The darker shade used when hovering or pressing an accent button. */
	--evnm-accent-hover-override: #004488;

	/* The text/icon color that sits ON the accent (a button's own label).
	   Keep this readable against your accent - usually white or near-black. */
	--evnm-accent-contrast-override: #ffffff;

	/* The tinted ACTIVE-state background: the current dashboard nav item, the
	   selected settings tab, and the chosen RSVP option (Going / Maybe / No).
	   This is a soft, low-saturation tint of your brand, not the full accent. */
	--evnm-accent-soft-override: #e6f0fa;
}

What each one drives

Variable Where it shows
--evnm-accent-override Primary buttons (RSVP, Register, Save), links, focus outlines - the main brand color.
--evnm-accent-hover-override The hover/pressed shade of those accent buttons. If you skip it, Eventonomy darkens your accent's default.
--evnm-accent-contrast-override The label/icon color printed on an accent button. Set this so the text stays readable on your accent (white on a dark accent, a dark ink on a light one).
--evnm-accent-soft-override The active-state background - the highlighted current nav item, the selected tab, the chosen RSVP choice. This is the one most people miss, because it was the last value to become overridable; without it, active surfaces stay Eventonomy green even after you have changed the other three.

Dark mode

Eventonomy ships light and dark defaults for the soft active-state tint (a pale tint on light backgrounds, a deep tint in dark mode) so active items stay legible either way. A single --evnm-accent-soft-override value replaces both, so if your site supports a dark color scheme, pick a soft tint that reads well on both light and dark surfaces - or scope two values:

:root { --evnm-accent-soft-override: #e6f0fa; }              /* light */
:root[data-theme="dark"] { --evnm-accent-soft-override: #10243a; } /* dark */

The three accent colors (accent, accent-hover, accent-contrast) do not need a separate dark value - Eventonomy keeps them consistent across modes.

Tips

  • Reuse your theme's own variable instead of hardcoding a hex, so a future theme re-brand carries through automatically. For example, on a BuddyX site: --evnm-accent-override: var( --bx-color-accent );.
  • Keep contrast accessible. Whatever accent you choose, make sure --evnm-accent-contrast-override gives readable text on it (aim for WCAG AA, a contrast ratio of at least 4.5:1 for the button label).
  • These variables only affect Eventonomy's own surfaces. Reading them never changes your theme's styles.

Verify it worked

After saving your CSS, open an event page and the member dashboard. The RSVP/Register button, a selected RSVP choice, and the current dashboard nav item should all reflect your brand color. If the active states are still green, you set the first three variables but not --evnm-accent-soft-override - add it.