I just want to create a new color scheme and replace the root primary colors with it, how do I proceed?

  • Can you please edit your question body and title to give more context/clarity to the task? This will help future readers/researchers to find and understand this page. Commented Mar 15, 2023 at 22:12

3 Answers 3


I tend to use the default Joomla! template for all my sites (admittedly not commercial sites but NFPs/charities) and I enhance the basic Cassiopeia with a variety of extra colours.

In the templateDetails.xml file:

    <option value="colors_alternative">TPL_CASSIOPEIA_COLOR_NAME_ALTERNATIVE</option>
    <option value="colors_standard">TPL_CASSIOPEIA_COLOR_NAME_STANDARD</option>
    <option value="colors_burned">TPL_CASSIOPEIA_COLOR_NAME_BURNED</option>

In the media folder is where all the action is. So in media/templates/site/cassiopeia/css/global copy the file colors_standard.css and rename to colors_burned.css and edit the colours in this file to be that of what you want and then create the min and .gz versions of this ie colors_burned.min.css & colors_burned.min.css.gz.

:root {
      --cassiopeia-color-primary: #912b3b;
      --cassiopeia-color-link: #ff7530;
      --cassiopeia-color-hover: #ff7430;
      --cassiopeia-color-primary-border: #ee6c39;

Then in media/templates/site/cassiopeia/scss/global make a copy of colors_standard.scss and rename to colors_burned.scss and edit this to change "standard" to "burned" such as:

// Variables, Functions and Mixins
@import "../tools/tools";

:root {
  --cassiopeia-color-primary: #{$burned-color-primary};
  --cassiopeia-color-link: #{$burned-color-link};
  --cassiopeia-color-hover: #{$burned-color-hover};

I think that's all there is to it from memory.

  • Sorry just realised you answered your own question. Commented Mar 16, 2023 at 5:49
  • It is always helpful for members to offer varied solutions/advice. The goal is to help future researchers (as long as the asked question is addressed). Commented Mar 16, 2023 at 7:10
  • 1
    Thank you. @GlennArkell! I may have answered my own answer question, but your answer was a lot more insightful and I learnt some interesting Templating info just now ^^
    – DeesreX
    Commented Mar 16, 2023 at 7:23

So the solution was to go to the original cassiopiea's files and copy the css/global over to your own template. This will contain all the primary, secondary and alternative colors.


Since I want to do specific pages to have unique template color and feel, I just copied the default template, renamed it, then edit the css files as required. Then I specify all pages I want it to show on, but not the rest.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.