Global colors

Hi! Are there any plans for global colors? E.g. CSS vars?

Comments

  • Hi,

    Can you explain it in more detail, please?

    I do not want to misunderstand you.


    Best regards

  • Sure. Say I create a pallet of colors and apply them to every aspect of my site. If I later want to adjust one of those colors, I can simply edit that one color and all my templates, pages and posts will display that new color where it has been used.

  • That is how the colors from the Theme options work.

    For example, if you change the Counter Icon color, then all Counter Icons you used on your website will change their color. There is an expectation if you overwrite this color in the element option, then it will not change after modification in the Theme options because its styles are more important than the global ones.


    Best regards

  • edited August 2022

    Hi!

    This is not exactly what I mean. If there had been under general, say 6-8 colors that on could define, these could be used one the elements, action bar, header and so on. So if I have Color #1 set to blue and this is the theme's main color, I could change it to e.g. indigo and all elements and other places would become indigo in a second, in stead of having to locate each place in the theme options, templates, pages and posts where the color has been set.

    Just my opinion. It would have made a huge difference :)

  • Now I get it.

    It could be interesting. Please, share your idea on the following topic:

    Thanks to that we will not miss your opinion among other forum discussions.


    Best regards

  • Thanks! Will do 👍🏻

  • edited August 2022

    For any one interested, it is already possible through CSS variables:

    Create custom CSS:

    :root {

    --primary: #2b2b2b;

    --secondary: #ffc857;

    --third: #adf1d2;

    --black: #000;

    --white: #fff;

    /* ZINK */

    --zink100: var(#fafafa);

    --zink200: var(#f4f4f5);

    --zink300: var(#e4e4e7);

    --zink400: var(#d4d4d8);

    --zink500: var(#a1a1aa);

    --zink600: var(#71717a);

    --zink700: var(#52525b);

    --zink800: var(#3f3f46);

    --zink900: var(#27272a);

    }


    Use the variables wherever you like, theme options, templates, pages and where ever:

    Such as var(--primary) and so on.


    More info: https://www.w3schools.com/css/css3_variables.asp

Sign In or Register to comment.