Community forum for knowledge and support

Updated 12 months ago

Adjusting Text Color Based on Background Brightness

At a glance

Hey guys, what is the easiest way to use different typography color on a project, depending on wether the background is light or dark? Do I need to create a diffrent class (ex:title_is-dark) or a combo class on every text element? Or is there a way to apply the text color class to the section so the text inside is either black of white?

M
U
2 comments

yeah so the best practice for this is to try not to define any color on text except in a cascading way.

So body tag - text is black.
section - if it has a class of background-black, within that background-black class you'd set the text color to white. So you would define those things at the section level.

Avoid if possible, adding color styles to text elements within a section to avoid having to go into each individual text element and changing text colors.

body - color: #000;
section_hero - background: #000; color: #FFF;
h1 - inherited from parent
text block - inherited from parent

Hopefully this makes sense!

Super clear! Thanks πŸš€

Add a reply
Sign up and join the conversation on Slack