change css color variable with constant editor TYPO3

Question

I currently have multisites on typo3 and I want to set up a system to change the color of each site via constant editor.

For this I created color variables on my CSS file for example:

root {
  --first: # 007bff;
  --second: # 6610f2;
}

here is how I set it all up:

my constants file:

skin {

    # customsubcategory = site = Param Site
    site {
        # cat = skin / site / 1; type = string; label = title detail news
        newsSuffixHeadTitle = Poppy

        # cat = skin / site / 2 type = color; label = first color
        firstcolor = var (--first)

         # cat = skin / site / 3 type = color; label = second color
         secondcolor = var (--second)
    }

my setup file:

page.cssInline.10 = TEXT
page.cssInline.10.value (
.theme1 .container-nav .content-nav .theme1 .container-nav .menu-responsive {background: {$ skin.site.firstcolor}}

.theme1 .container-carousel-communes .b-title-item h3 {color: $ skin.site.secondcolor})

and on constant editor, I use var (--first) and var (--second) to apply my colors on the css, however it is not a good method in my opinion

I wish I could choose the colors directly via constant editor, but I don't know enough about it to do this, do you have any ideas please?

Thank you

Answer 1

You can't access CSS constants from TYPO3 constants. CSS constants actually only work with extensions like SCSS or SASS, and are only used when compiling extended CSS to CSS.

Assign your values to the TYPO3 constants directly, like this:

skin {

    # customsubcategory = site = Param Site
    site {
        # cat = skin / site / 2 type = color; label = first color
        firstcolor =  #007bff;

         # cat = skin / site / 3 type = color; label = second color
         secondcolor = #6610f2;
    }

I guess there should be no space after the #.