Themify your app with Custom Properties
source link: https://www.tuicool.com/articles/M3YrU3n
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
My current side-project is an open SaaS platform to manage call for papers called Conference Hall . When I started it, I wanted to have different themes following the user's role. A blue theme if you are a speaker, and a red one for organizers.
The application is currently built with React and there are plenty of ways to build a theming system using providers, hooks, styled components, css-in-js etc. But I wanted to keep it simple and closed to what it's supposed to be: "style". So I decided to use one of the new powers of CSS: "Custom Properties" (or CSS variables) and its inheritance system.
Here a live demo and explanations following.
Themify with custom properties
First declare a default theme with all custom properties needed for the theme.
.default-theme { --background-color: #FFF; --font-color: #000; }
Set the default theme class to the body
(or an other root element). This element and its children will have access to the variables.
<body class="default-theme"> ... </body>
These variables can be used in your CSS through the var()
function.
body { background: var(--background-color); color: var(--font-color); }
So, what should we do to change the theme of the app ?
Declare a new CSS class with the custom properties to override in the new theme, then apply it to the element. Thanks to the inheritance of custom properties you have the dark mode in your application.
.dark-theme { --background-color: #000; --font-color: #FFF; }
<body class="default-theme dark-theme"> ... </body>
Apply theme to sub-components
If you use the custom properties ( var()
) in all your sub-compoments the theme will be automatically applied.
But you may build your components independently from your application (with Storybook, DocZ, etc.) and the theming system implies that some of your components should use these custom properties. So if you want to have a component that renders correctly without declaring CSS variable, you can:
var
.my-component { background: var(--background-color, #DDD), }
Browser compatibility
Most browsers already support custom properties except Internet Explorer. But if you want to keep a fallback for IE you can add an additional property in the CSS class. Of course, theme switching will not work on IE with custom properties.
.my-component { background: #DDD, background: var(--background-color, #DDD), }
All the theming system of my application Conference Hall is entirely based on custom properties and works very well. I hope it will help you.
Recommend
-
84
关注前端技术,探寻深邃思想
-
55
I reckon that a lot of our uses of Sass maps can be replaced with CSS Custom properties – but hear me out for a sec. When designing components we often need to use the same structure of a component but change it...
-
24
CSS Custom Properties have been a hot topic for a while now, with tons of great articles about them, from great primers on how t...
-
38
UIAppearance is analogous to CSS for UIKit, while being compatible with both Interface Builder and traditional styling in code, without sacrificing performance. It’s a way of declaratively assigning UI style values to you...
-
29
Google Wants to Make The 25-Year-Old robots.txt...
-
41
I've been playing around with CSS Custom Properties to discover their power since browser support is finally at a place where we can use them in our production...
-
25
Unlike SASS variables, CSS Custom Properties can be modified in class selectors, allowing you to create abstractions and reduce the size of your CSS. Let me show you an example! In theCodyHouse Framework,...
-
1
This is a real world use case to be used only with similar restrictions. We had a lot of constraint in our development (see the requirements) but we had to implement an effettive solution to limit the user access to the REST resources on the...
-
11
Extending Custom Naming with Custom Properties in Cloud Assembly (SKKB1046) Posted on March 26, 2020April 1, 2020 It's only fair to share...
-
5
Spacings and CSS Custom properties Published on 28.06.2018, by Louis HoebregtsEarly on when working on the website for
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK