DEV Community

Learn About CSS Custom Properties Through Clever Uses of Them

Chris Coyier on January 30, 2019

One of the biggest use-cases for CSS custom properties is theming. Let's consider that for a second. Perhaps you'd set some variables at the highes...
Collapse
 
link2twenty profile image
Andrew Bone

We're actually in the process of rolling out CSS variables on this site for the purpose of theming

[WIP] Theme-able CSS Variables #1377

I thought we ought to have a place where we keep a note of the current CSS Variables and also propose different variables that should be included.

Currently included:

Variable Description Default
--theme-background Background color of the main body #f9f9fa
--theme-top-bar-background Background color of the top bar #fdf9f3

Pull request pending:

Variable Description Default
--theme-top-bar-color Text and icon color for the top bar #0a0a0a
--theme-top-bar-search-background Background color of the search box in the top bar #e8e7e7
--theme-top-bar-search-color Text color for the search box, and its placeholder, in the top bar #0a0a0a

Proposed:

Variable Description Default
--theme-color Text color for the main body #0a0a0a
--theme-container-background Background color of the articles and nav-elements #ffffff
--theme-container-color Text color for the articles and nav-elements #0a0a0a

I think the best thing to do is leave a comment below of further proposals and I will update the main post.

Also feel free to do pull requests to help roll these out.

If you'd like to contribute that would be greatly appreciated 🙂

Collapse
 
ryansmith profile image
Ryan Smith

Nice, I'm sure a lot of us would love a dark theme. I've been using the extension DarkReader at night, but it does not play nicely with dev.to so I've been waiting for a built-in option.

Collapse
 
ryansmith profile image
Ryan Smith

Custom properties look fairly straightforward to get started with. Your first example looks easy to implement for anyone familiar with CSS.

I'm glad to see that CSS is closing the gap with CSS preprocessors a little bit. Learning and configuring tools to transpile code can get a bit overwhelming at times.

Collapse
 
cirogolden profile image
Ciro Golden

very cool!

Collapse
 
mikehu profile image
MikeHu

Good things and useful to know.....