Linking “Custom CSS” with theme colors

Resolved pjetton
(@pjetton)

5 years, 10 months ago
Hello,

I am wondering if it is possible to write css in the “Custom CSS” area that will update automatically to match the theme colors.

For example, would it be possible for me to create a custom CSS class of .heading-secondary-color for all headings that I want to match Chaplin’s “secondary text color” (instead of the “headings text color”)? If so, how would I write it so that it linked to a pre-defined theme color? I assume it would look something like what I’ve written below:

.heading-secondary-color {
color: ***value-that-refers-to-theme-secondary-text-color***
}

Ideally, I’d like not to have to update my custom css every time I change the theme’s colors and I am looking for a way to do that, if possible.

Thanks,
Paul
- This topic was modified 5 years, 10 months ago by pjetton.
- This topic was modified 5 years, 10 months ago by pjetton.
- This topic was modified 5 years, 10 months ago by pjetton.

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

Thread Starter pjetton
(@pjetton)

5 years, 10 months ago

Hi Anders,

I might have answered my own question. I read through some of the previous forum questions and found one about using customized colors in a child theme.

In your answer you wrote “I might take a look at adding the colors chosen as CSS variables as well, so child themes can make use of them that way.”

I assume that adding the colors chosen as css variables would be necessary in order for someone to reference them in the custom css as well – but please let me know if there is another way to do so.

Thanks for your work. It’s an awesome theme!

Paul

Theme Author Anders Norén
(@anlino)

5 years, 10 months ago

Hi @pjetton,

Glad you like it! Yes, the colors would need to exist as CSS variables for you to be able to use them in Custom CSS. If you’re adding custom markup as well, you can use the helper classes used in Chaplin itself (.color-accent, .bg-primary, and so on), but if you’re only adding CSS, you’ll need to update the values manually for now.

— Anders
Theme Author Anders Norén
(@anlino)

5 years, 10 months ago
Hi again @pjetton,

I went ahead and added the CSS variables in version 2.5.9 of Chaplin, which should be live within the hour. Once installed, you’ll be able to use the following CSS variables in your child theme (or the Additional CSS field in the Customizer):
```
/* Typography */
--body-font: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
--headings-font: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
--headings-weight: 700;
--headings-case: normal;
--headings-spacing: normal;
/* Colors */
--accent-color: #007c89;
--primary-color: #1a1b1f;
--secondary-color: #747579;
--border-color: #e1e1e3;
--light-background-color: #f1f1f3;
--background-color: #fff;
--headings-color: #1a1b1f;
--buttons-background-color: #007c89;
--buttons-text-color: #fff;
--overlay-text-color: #fff;
```
These variables will be updated when you change the corresponding setting in the Customizer. Give it a try and let me know if it works as expected.
Thread Starter pjetton
(@pjetton)

5 years, 10 months ago

Hi Anders,

Thanks for the update! I have tested a few of the variables in the customizer so far and everything seems to be working.

I really appreciate your help. Thank you for putting in the extra work!

Cheers,
Paul

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

The topic ‘Linking “Custom CSS” with theme colors’ is closed to new replies.

Tags