Using colours and gradients in YOOtheme Pro

How to map a generated palette onto YOOtheme Pro's global Less variables, handle dark sections with Inverse colours, and paste gradient CSS into an element without it leaking across the site.

Where colour lives in YOOtheme Pro

YOOtheme Pro is a UIkit theme with a Less-based style editor on top. That architecture gives you three distinct places to put a colour, and picking the right one is the difference between a five-minute job and a stylesheet full of overrides.

The mistake most people make is doing everything in the third layer. If you find yourself pasting the same hex code into a fourth element's CSS field, stop — it belongs in the first.

Opening the customizer

• WordPress: click the YOOtheme item in the WordPress admin menu.
• Joomla: open the YOOtheme Pro template and use its customize option.

Either way you land in the same interface, with a sidebar of panels: Layout, Style, Pages, Templates, Menu, Modules (Joomla) or Widgets (WordPress), and Settings. Everything in this guide happens in Style and Settings, or in an element's own options.

Step 1: generate and check the palette

Build your palette in the generator. For a website you generally want five colours doing these jobs: a page background, a secondary surface for alternating sections, a strong text colour, a primary action colour and one accent. Lock whichever colour you already have — usually the brand colour — and generate around it.

Before you touch the theme, check two pairs in the contrast checker: body text on the page background, and a white button label on the primary colour. Both should clear 4.5:1. Fixing this now costs a minute; fixing it after the site is built means revisiting every button. If your brand colour cannot hold white text, read what to do when a brand colour fails contrast before continuing — the usual answer is a slightly darker sibling used only for UI.

Step 2: map the palette onto the global variables

Open Style. Settings are grouped into General — which holds the Global variables used across every UI component — and Components, which holds per-component overrides. You want General → Global.

These pickers write UIkit's global Less variables. Because almost every component derives its colours from them (the primary button's background is literally mapped to @global-primary-background), setting eight values here re-skins the entire site, including elements you add months later.

Paste hex values straight from the generator: click any swatch to copy it, or use Copy HEX to take the whole palette at once.

Save the style when you are done. If you run more than one site on the same brand, export the style rather than re-entering the palette by hand; there is also a Download Less option if you want the customisations as a file for a child theme.

Step 3: dark sections and Inverse colours

This is the step that catches people out, and it is where a palette either holds together or falls apart.

Every YOOtheme Pro style has either a light or a dark background by default, and all its text and component colours are tuned for that. Put a light-styled component onto a dark section and it becomes unreadable. Rather than making you override each one, the theme keeps a parallel Inverse set of colour variables — Style → Inverse — which components switch to automatically when they sit on an inversed background.

Inverse kicks in two ways:

• Color Mode. Containers — sections, cards, tiles, overlays, off-canvas — expose a Color Mode option on their Primary and Secondary modifiers. Set it to the inverse colour and everything inside is styled for a dark ground.
• Text Color. When you put a background image on a section or a row column, a Text Color option appears with Default, Light and Dark. Use it when the image is too varied for the automatic choice to be right.

There is also a Preserve color setting, which stops a section recolouring its contents automatically — useful when you have deliberately styled something inside it and do not want the section overriding you.

Practically: give the Inverse panel the same attention as the main one. Its text colours need checking against your dark section colours in the contrast checker, exactly as the light ones do — a pair that passes on white tells you nothing about the same pair on your secondary background. The reasoning is the same as for a dark theme generally, which we cover in designing a dark mode palette: raise the lightness of your brand colour and pull its saturation back, or it will vibrate against near-black.

Step 4: gradients on a single element

The element settings cover solid backgrounds well, but gradients generally need CSS. Every element has an Advanced tab with a CSS field, and inside it the element itself is addressed as .el-element. That scoping is the whole point: the rule stays attached to this one element instead of applying site-wide.

Build the gradient in the gradient generator, then use the YOOtheme copy button, which returns the CSS already wrapped for that field:

.el-element {
  background-image: linear-gradient(135deg, #3DB3CB 0%, #0F2228 100%);
}

Paste, save, and check the front end. A few notes:

• Use background-image rather than background, so you do not wipe out other background properties the element already has.
• .el-element is not the only selector. Elements also expose parts such as .el-title, .el-meta, .el-content, .el-image and .el-link — handy when you want the gradient on the element but a specific colour on its heading.
• You do not have to memorise them. Start typing .el- and the field auto-completes; the full list of selectors available for that particular element is printed underneath the CSS field.
• Sections have the same field, and the selector is still .el-element.

Step 5: animated gradients, carefully

The generator can produce an animated gradient, which comes with a @keyframes block. Keyframes are a top-level at-rule: they must sit outside the .el-element selector, never nested inside it, or the animation silently does nothing.

.el-element {
  background-image: linear-gradient(135deg, #3DB3CB, #7C5CFF, #3DB3CB);
  background-size: 300% 300%;
  animation: jumiGradient 9s ease infinite;
}

@keyframes jumiGradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Two cautions. Preview on the front end rather than trusting the builder canvas. And respect motion preferences — continuous background movement is a genuine accessibility problem, not a stylistic quibble:

@media (prefers-reduced-motion: reduce) {
  .el-element { animation: none; }
}

Step 6: reusable gradients in the global CSS

If the same gradient appears on several elements, stop repeating it. Go to Settings → CSS, which takes custom CSS or Less — and importantly, all the theme's Less variables and mixins are available there. No <style> tag is needed.

That gives you two ways to do it. The Less route ties the gradient to your palette, so changing the brand colour in the Style panel changes the gradient too:

.brand-gradient {
  background-image: linear-gradient(135deg, @global-primary-background 0%, @global-secondary-background 100%);
}

The CSS custom property route is more portable and survives being copied to a non-YOOtheme project. Export CSS variables from the generator and you have the first block already written:

:root {
  --brand:      #3DB3CB;
  --brand-deep: #0F2228;
  --brand-grad: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
}

Either way, each element's CSS field then shrinks to one line:

.el-element { background-image: var(--brand-grad); }

This is the same idea as a token layer in a design system — one source of truth, referenced everywhere — and it means a brand refresh is a single edit rather than a hunt through every element on every page.

Responsive tweaks

If a gradient needs to behave differently on phones — a steeper angle, fewer stops, no animation — you can use the theme's Less breakpoint variables in the Settings → CSS field rather than hard-coding pixel values:

Worth knowing that a wide, gentle gradient shows banding far more readily on a large desktop display than on a phone. If you see stepping, move the stops closer together, add an intermediate stop, or apply the generator's noise overlay — the reasoning is in CSS gradients explained.

Troubleshooting

Quick reference

• Brand palette → Style → General → Global
• Dark section colours → Style → Inverse, plus Color Mode on the container
• One-off gradient → the element's Advanced → CSS field, scoped to .el-element
• Reusable gradient or tokens → Settings → CSS (accepts Less, with theme variables available)
• Which variable is this control? → hover it in the Style Customizer

Open the gradient generator →

Related guides: CSS gradients explained · Colour in a design system · Dark mode palettes · Gradient examples