DEV Community

Cover image for Theming With CSS Variables

Theming With CSS Variables

Ido Shamun on March 19, 2019

Theming your web application used to be very nasty, you had to use javascript to do the heavy lifting of changing the visuals of the elements or to...
Collapse
 
link2twenty profile image
Andrew Bone

This website now uses CSS Variables for theming, it's still in beta but feel free to have a look and contribute if you like 😀

[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.

Collapse
 
idoshamun profile image
Ido Shamun

Thanks for sharing, I will take a look :)

Collapse
 
nuxodin profile image
Tobias Buschor