Title: CSS variables child theme css output
Last modified: July 5, 2021

---

# CSS variables child theme css output

 *  Resolved [danielwadman](https://wordpress.org/support/users/danielwadman/)
 * (@danielwadman)
 * [4 years, 11 months ago](https://wordpress.org/support/topic/css-variables-child-theme-css-output/)
 * Hi there,
 * I have created a child theme and need to output the css variables to the child
   themes css file. Is this possible? I read the release notes and came across this.
   Version 2.5.9 (2020-06-06) – Added output of CSS variables for the Customizer
   settings, to make it easier for child themes and custom CSS to make use of them
   without resorting to hard coded values. Can be disabled with the `chaplin_custom_css_output_variables`
   filter. Any help appreciated.
 * Kind regards,
    Daniel

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

 *  Theme Author [Anders Norén](https://wordpress.org/support/users/anlino/)
 * (@anlino)
 * [4 years, 11 months ago](https://wordpress.org/support/topic/css-variables-child-theme-css-output/#post-14626893)
 * Hi [@danielwadman](https://wordpress.org/support/users/danielwadman/),
 * The CSS variables are output on the :root element in the Chaplin style.css file(
   and overwritten by inline CSS in the head if custom colors are set in the Customizer),
   so you should be able to use them in your child theme stylesheet. You can see
   the list of available CSS variables in the code inspector in your browser.
 * (The stylesheet in Chaplin doesn’t use those variables though, so you won’t be
   able to modify the theme colors by changing the variables.)
 * — Anders
 *  Thread Starter [danielwadman](https://wordpress.org/support/users/danielwadman/)
 * (@danielwadman)
 * [4 years, 11 months ago](https://wordpress.org/support/topic/css-variables-child-theme-css-output/#post-14627388)
 * Hi Anders,
 * Thankyou for the speedy reply. Ok I see whats happening now. I thought the colors
   set in the customizer where being saved to the style sheet but like you say they
   are outputted as an inline style in the head not in a css file. I’m trying make
   those colors which are set in the customizer available for use in another app
   but that looks like it could be tricky. What are the variables in the css file
   used for? is it just default values for initial site set up?
 * Many thanks,
    Daniel
 *  Theme Author [Anders Norén](https://wordpress.org/support/users/anlino/)
 * (@anlino)
 * [4 years, 11 months ago](https://wordpress.org/support/topic/css-variables-child-theme-css-output/#post-14630231)
 * Hi [@danielwadman](https://wordpress.org/support/users/danielwadman/),
 * The colors set in the Customizer are also set as CSS variables, so you can use
   them by using the CSS variables in your child theme stylesheet.
 * The CSS variables are mostly there to make it easier for child themes to use 
   the colors set in the Customizer in child theme stylesheets. Chaplin itself supports
   Internet Explorer 11, so its stylesheet doesn’t use the CSS variables.
 * — Anders
 *  Thread Starter [danielwadman](https://wordpress.org/support/users/danielwadman/)
 * (@danielwadman)
 * [4 years, 11 months ago](https://wordpress.org/support/topic/css-variables-child-theme-css-output/#post-14643746)
 * Ok that makes sense, is there anyway that your aware of to be able to get the
   variables to actually be set in the child theme stylesheet? Going forward I’d
   like to have multiple sites and as the colours aren’t databased having a child
   theme for each site could work but would rely on having the variables set in 
   each child stylesheet. Thanks for the help so far.
 *  Theme Author [Anders Norén](https://wordpress.org/support/users/anlino/)
 * (@anlino)
 * [4 years, 11 months ago](https://wordpress.org/support/topic/css-variables-child-theme-css-output/#post-14645826)
 * The colors in the parent theme stylesheet are hard coded, so you can’t change
   those by setting CSS variables in the child theme. You can filter the values 
   of the `get_theme_mod()` settings to specify the colors in the functions.php 
   file in your child theme, though – that will change the colors in the parent 
   theme as well.
 * For example, by adding this code to the functions.php file in the child theme:
 *     ```
       add_filter( 'theme_mod_chaplin_accent_color', function() {
       	return '#FF0000';
       } );
       ```
   
 * …you’ll filter the accent color to be #FF0000 instead of the default accent color
   in Chaplin (or whatever value it’s set to in the Customizer). Repeat for each
   Customizer setting for the colors in Chaplin, listed below:
 *     ```
       background_color
       chaplin_accent_color
       chaplin_primary_text_color
       chaplin_headings_text_color
       chaplin_buttons_background_color
       chaplin_buttons_text_color
       chaplin_secondary_text_color
       chaplin_border_color
       chaplin_light_background_color
       ```
   
 * — Anders
    -  This reply was modified 4 years, 11 months ago by [Anders Norén](https://wordpress.org/support/users/anlino/).
 *  Thread Starter [danielwadman](https://wordpress.org/support/users/danielwadman/)
 * (@danielwadman)
 * [4 years, 10 months ago](https://wordpress.org/support/topic/css-variables-child-theme-css-output/#post-14689534)
 * Many thanks it’s really helpful, one last question.
 * So if a custom colour is set in the customizer it prints it out in the head area
   as an inline style (over writing the css variables), so if a custom colour is
   set, then it won’t be saved in the css anywhere and be available to use elsewhere?
 *  Theme Author [Anders Norén](https://wordpress.org/support/users/anlino/)
 * (@anlino)
 * [4 years, 10 months ago](https://wordpress.org/support/topic/css-variables-child-theme-css-output/#post-14689615)
 * [@danielwadman](https://wordpress.org/support/users/danielwadman/) No problem!
   The variables I listed in the previous post are updated with the values set in
   the Customizer (or filtered into use with a PHP function), so those can be used
   in the CSS.
 *  Thread Starter [danielwadman](https://wordpress.org/support/users/danielwadman/)
 * (@danielwadman)
 * [4 years, 10 months ago](https://wordpress.org/support/topic/css-variables-child-theme-css-output/#post-14689627)
 * Ahh awesome, ok thanks for your help

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

The topic ‘CSS variables child theme css output’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/chaplin/2.6.8/screenshot.png)
 * Chaplin
 * [Support Threads](https://wordpress.org/support/theme/chaplin/)
 * [Active Topics](https://wordpress.org/support/theme/chaplin/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/chaplin/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/chaplin/reviews/)

 * 8 replies
 * 2 participants
 * Last reply from: [danielwadman](https://wordpress.org/support/users/danielwadman/)
 * Last activity: [4 years, 10 months ago](https://wordpress.org/support/topic/css-variables-child-theme-css-output/#post-14689627)
 * Status: resolved