Title: Support for custom CSS variables
Last modified: June 30, 2022

---

# Support for custom CSS variables

 *  Resolved Anonymous User 20238576
 * (@anonymized-20238576)
 * [3 years, 11 months ago](https://wordpress.org/support/topic/support-for-custom-css-variables/)
 * Hello,
 * I create my own CSS variables for colors, fluid typography and fluid spacing.
 * Is there a chance that you guys could provide a support to enter css variables
   right into theme customizer options?
 * So for example, if I would like to change the body text color throughout the 
   whole website, I can choose body text color and type var(–color-p-500) which 
   would mean that the body text color would be a shade 500 of primary color set
   in my own custom css.
 * The same goes for CSS variables inside spacing and typography options.
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fsupport-for-custom-css-variables%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 6 replies - 1 through 6 (of 6 total)

 *  [Eduard](https://wordpress.org/support/users/cteduard/)
 * (@cteduard)
 * [3 years, 11 months ago](https://wordpress.org/support/topic/support-for-custom-css-variables/#post-15784550)
 * Hello @tomanuel
 * Sure, I’ll try to note this down in our feature requests list, but I’m not entirely
   sure how much this will benefit users.
 * In the end, we do have global controls for pretty much everything, accessible
   via the customiser and outputted via variables on the front end. If you’d take
   a few minutes to analyse the DOM, you’ll see that everything is pretty ok structured
   and you can replace the variables very easily using just a little bit of CSS.
   🙂
 * Thanks again for the suggestion!
 *  Thread Starter Anonymous User 20238576
 * (@anonymized-20238576)
 * [3 years, 11 months ago](https://wordpress.org/support/topic/support-for-custom-css-variables/#post-15785072)
 * > but I’m not entirely sure how much this will benefit users.
 * As a web designer, I often find that I need more than 10 color shades for a given
   color. The naming convention is easy to understand and looks as follows:
    - Color shades
    -  Primary color: `var(--p)`
    -  `var(--p-50)`
    -  `var(--p-75)`
    -  `var(--p-100)`
    -  etc..
 * So, I give various elements various color shades. Every color shade (for example`
   var(--p-75)` is a variant from primary color. If I change primary color, the 
   color shades are adjusted automatically.
 * Therefore, I only need to change the color in one place and all the other color
   shades are adjusted automatically, if that makes sense.
 * This is the reason I would like to have ability to input my own CSS variables
   inside theme customizer.
    -  This reply was modified 3 years, 11 months ago by Anonymous User 20238576.
    -  This reply was modified 3 years, 11 months ago by Anonymous User 20238576.
 *  [Eduard](https://wordpress.org/support/users/cteduard/)
 * (@cteduard)
 * [3 years, 11 months ago](https://wordpress.org/support/topic/support-for-custom-css-variables/#post-15785113)
 * Oh, thank you very much for the explanation. I have passed it along to our development
   team.
 * Thanks again!
 *  Thread Starter Anonymous User 20238576
 * (@anonymized-20238576)
 * [3 years, 11 months ago](https://wordpress.org/support/topic/support-for-custom-css-variables/#post-15785139)
 * Thank you too!
 *  [Eduard](https://wordpress.org/support/users/cteduard/)
 * (@cteduard)
 * [3 years, 11 months ago](https://wordpress.org/support/topic/support-for-custom-css-variables/#post-15785158)
 * By the way, @tomanuel
 * I don’t know if you’ve seen this, but for adding additional colours we do have
   a filter implemented — [https://creativethemes.com/blocksy/docs/code-snippets/add-custom-colours-to-the-gutenberg-editor/](https://creativethemes.com/blocksy/docs/code-snippets/add-custom-colours-to-the-gutenberg-editor/)
 * Have you given this a try? I hope it will be able to help you out.
 * Thanks!
 *  Thread Starter Anonymous User 20238576
 * (@anonymized-20238576)
 * [3 years, 11 months ago](https://wordpress.org/support/topic/support-for-custom-css-variables/#post-15785313)
 * Yes I have seen this, but this would still mean that I have to change color for
   every color shade manually. The way I set my CSS variable for color shades is
   as follows:
 *     ```
       :root {
   
            /* Defining a primary shade */
            --p-h: 345;
            --p-s: 73%;
            --p-l: 50%;
   
           /* Defining a primary shade shades */
           --p: hsl(var(--p-h), var(--p-s), var(--p-l));
           --p-25: hsl(var(--p-h), var(--p-s), 98%);
           --p-50: hsl(var(--p-h), var(--p-s), 95%);
   
       }
       ```
   
 * So as you can see, the colors shades are generated automatically by adjusting
   the lightness (from HSL).
    -  This reply was modified 3 years, 11 months ago by Anonymous User 20238576.
    -  This reply was modified 3 years, 11 months ago by Anonymous User 20238576.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Support for custom CSS variables’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/blocksy/2.1.45/screenshot.jpg)
 * Blocksy
 * [Support Threads](https://wordpress.org/support/theme/blocksy/)
 * [Active Topics](https://wordpress.org/support/theme/blocksy/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/blocksy/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/blocksy/reviews/)

 * 6 replies
 * 2 participants
 * Last reply from: Anonymous User 20238576
 * Last activity: [3 years, 11 months ago](https://wordpress.org/support/topic/support-for-custom-css-variables/#post-15785313)
 * Status: resolved