How to change Accent colors ?

aktineo

I would like to change accent colors, how can I do this ? Can I add new variables ?

// Accent colors
$blue: #004494;
$indigo: #3F51B5;
$purple: #9C27B0;
$pink: #FF7CBC;
$red: #DB3334;
$orange: #FFC107;
$yellow: #C1AB7C;
$green: #1BCBAB;
$teal: #009688;
$cyan: #17A2B8;

saguaros

Hi aktineo

You can create your new theme and define colors for these variables in 'variables.less' file in theme folder:

https://www.t3-framework.org/documentation/bs3-customization#theme-customization

aktineo

saguaros thx, but what about T4 and JA- blockk theme?

saguaros

aktineo With templates built with T4, T4 provides visual theme color dashboard so you can easily customize:

aktineo

Theme color is not the issue. It works. Accent colors can't be customize by this way. I try through Tools "Edit custom SCSS" https://www.joomlart.com/documentation/t4-framework/css-scss-customization without success, I still have the same colors for my categories in blockk. My wish and for instance is to change/customize the red color that highlight category in the snapshot below. Further more can I had a new color (variable)? Any idea to help ?

// Accent colors
$blue: #004494;
$indigo: #3F51B5;
$purple: #9C27B0;
$pink: #FF7CBC;
$red: #DB3334;
$orange: #FFC107;
$yellow: #C1AB7C;
$green: #1BCBAB;
$teal: #009688;
$cyan: #17A2B8;

saguaros

aktineo With SCSS, you will have to compile to see the changes.

With Bootstrap, you can override the CSS variables, it will be easier.

Go to template >> Tools >> edit Custom CSS and add override for color as you wish:

:root {
 --color-red: #069;
}

aktineo

saguaros Thx, it works 🙂 any way to add a new color ?

saguaros

aktineo

Yes, you can. Under the root as above, you can define a new color and declare it for the element as you wish, something like this:

:root {
 --color-red: #069;
  
 --color-new: #096;
}

.jacl-item .style-outline.color-red a {
  color: var(--color-new);
}

aktineo

It replaces color red ? Do I'm right ?

saguaros

aktineo Yes, it will override the default 'red' declared in template.

aktineo

I would like to have more than ten colors and choose one for one category like for the default ten colors anyway to add a color with the scss tools in T4?

saguaros

aktineo Could you share a sample color and category that you want?

aktineo

saguaros I'm using custom Accent colors with the trick you provide. But I would like to add three more variables //accent colors for instance --color-passion: #004494 --color-decouverte --color-famille that I can choose for each of these categories in back end category. From what I understand, to do so, I need to go through scss. I tried with T4 tools : Edit Custom SCSS -Inbuilt tool to customize SCSS - Without sucess.

saguaros

aktineo Could you share the URL + super admin account so I can check?