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. Mar 15 at 22:12

2 Answers 2


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. Mar 16 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). Mar 16 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
    Mar 16 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.

Your Answer

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

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