Custom Colors Using Variables

You need to be logged in to post in the forum - Log In

An active JCE Pro Subscription is required to post in the forum - Buy a Subscription

Support is currently Offline

Official support hours

Monday to Friday
09:00 - 17:00 Europe/London (BST)

Please create a new Ticket and we will get back to you as soon as we can.

#111740 Custom Colors Using Variables

Posted in ‘Editor’

This is a public ticket

Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.

Latest post by livebuzz on Tuesday, 23 September 2025 12:54 BST

Friday, 26 August 2022 14:03 BST

[email protected]

Hi there,
I have created a template which I use for many customers.
In this template I have four main colors. The CSS is written with variables so when you change a color in the template you can see the changes in many places.
Is there a way I could use these variables in the custom colors section of your color picker?

Friday, 26 August 2022 17:30 BST

Ryan

This is not yet supported, but it would probably be better to create a set of css rules in your template that reference those colors, that can then be selected by the user from the Styles list, eg:


.red {
    color: var(--red);
}

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Monday, 22 September 2025 12:33 BST

livebuzz

Hi,

We have a similar setup, where CSS variables are set as inline styles in the head via template config parameters. So we can't see these colours from setting the 'Editor Styles' as 'Custom CSS Files' in the 'Global Configuration'. Is there any way around this, please? e.g.

<head>
<style>
  :root {
    --primary-colour: #222222;
    --primary-colour-dark: #0e0e0e;
    --primary-colour-light: #373636;
    --primary-colour-rgb: 34, 34, 34;
    --secondary-colour: #242559;
    --secondary-colour-dark: #18193c;
    --secondary-colour-light: #372f77;
    --secondary-colour-rgb: 36, 37, 89;
    --tertiary-colour: #144380;
    --tertiary-colour-dark: #0e315d;
    --tertiary-colour-light: #1943a4;
    --tertiary-colour-rgb: 20, 67, 128;
    --quaternary-colour: #626366;
    --quaternary-colour-dark: #4e4f52;
    --quaternary-colour-light: #75767c;
    --quaternary-colour-rgb: 98, 99, 102;
      }
</style>
</head>

Thanks,

Mark

Monday, 22 September 2025 14:40 BST

Ryan

Which template are you using?

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Monday, 22 September 2025 15:27 BST

livebuzz

It's a custom built template...

Monday, 22 September 2025 15:30 BST

Ryan

In your template css folder, create a file called editor.css, and add @import rules for your template css files, followed by your css variables. The editor will automatically load and user the editor.css file if it exists, eg:

@import url('template.css);
:root {
    --primary-colour: #222222;
    --primary-colour-dark: #0e0e0e;
    --primary-colour-light: #373636;
    --primary-colour-rgb: 34, 34, 34;
    --secondary-colour: #242559;
    --secondary-colour-dark: #18193c;
    --secondary-colour-light: #372f77;
    --secondary-colour-rgb: 36, 37, 89;
    --tertiary-colour: #144380;
    --tertiary-colour-dark: #0e315d;
    --tertiary-colour-light: #1943a4;
    --tertiary-colour-rgb: 20, 67, 128;
    --quaternary-colour: #626366;
    --quaternary-colour-dark: #4e4f52;
    --quaternary-colour-light: #75767c;
    --quaternary-colour-rgb: 98, 99, 102;
}

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Monday, 22 September 2025 15:46 BST

livebuzz

The problem is that those values are set via Joomla, not the CSS file.

We have the following in the settings.scss file:

$primary-colour: unquote('var(--primary-colour)'); // (Main Colour)
$primary-colour-dark: unquote('var(--primary-colour-dark)');
$primary-colour-light: unquote('var(--primary-colour-light)');
$primary-colour-rgb: unquote('var(--primary-colour-rgb)');
$secondary-colour: unquote('var(--secondary-colour)'); // (Highlight Colour)
$secondary-colour-dark: unquote('var(--secondary-colour-dark)');
$secondary-colour-light: unquote('var(--secondary-colour-light)');
$secondary-colour-rgb: unquote('var(--secondary-colour-rgb)');
$tertiary-colour: unquote('var(--tertiary-colour)'); // (Alternative Colour 1)
$tertiary-colour-dark: unquote('var(--tertiary-colour-dark)');
$tertiary-colour-light: unquote('var(--tertiary-colour-light)');
$tertiary-colour-rgb: unquote('var(--tertiary-colour-rgb)');
$quaternary-colour: unquote(
  'var(--quaternary-colour)'
); // (Alternative Colour 2)
$quaternary-colour-dark: unquote('var(--quaternary-colour-dark)');
$quaternary-colour-light: unquote('var(--quaternary-colour-light)');
$quaternary-colour-rgb: unquote('var(--quaternary-colour-rgb)');

The variables are set via Joomla admin - see attached.

Frontend the output to the <head> as shown in the first message. So JCE will not know what those values are in the backend editor.

Attachments

Tuesday, 23 September 2025 12:54 BST

livebuzz

Hi Ryan,

We've figured out a workaround to write these values into separate compiled CSS files for each child template and assign them to new editor profiles with custom queries.

Thanks for your time.

Take care!