Setting template color scheme

Question

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

Answer 1

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:

<field
    name="colorName"
    type="filelist"
    label="TPL_CASSIOPEIA_COLOR_NAME_LABEL"
    default="colors_standard"
    fileFilter="^custom.+[^min]\.css$"
    exclude="^colors.+"
    stripext="true"
    hide_none="true"
    hide_default="true"
    directory="media/templates/site/cassiopiea/css/global/"
    validate="options"
    >
    <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>
</field>

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.

Answer 2

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.