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. There are two ways: a setting (no code), or four CSS variables when you need finer control. Nothing else changes.

The Quick Way: the Brand Colour Setting

Go to Eventonomy → Settings → Appearance, in the Single event & cards card, and find Brand colour. It has two choices:

Choice What it does
Custom colour Pick your colour. Buttons, links and emails use it. Button text is chosen automatically as white or near-black, whichever reads better on your colour. The screen shows the contrast ratio and warns "This colour is too pale for readable button text" when it fails.
Match my theme The buttons and links on your site follow your theme's own accent colour, and move with it if you change the theme's colours. Emails and the mobile app keep the Eventonomy green.

Match my theme looks for your theme's accent in this order: BuddyX (--bx-color-accent), Reign (--reign-colors-theme), then the WordPress primary color preset. If your theme supplies none of these, Eventonomy keeps its own green.

Note: Your theme's colour cannot be contrast-checked by the plugin, because it only resolves in the visitor's browser. After choosing Match my theme, open an event and check that the Register button and its label are readable. If they are not, choose Custom colour instead.

Sites that used the older "adopt the theme's accent" option were moved to Match my theme on update.

The CSS Way: Four Variables

Use this when you want to set the hover shade, the label colour or the active-state tint yourself.

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.