3 ms·
It's become easier to implement them. Now that many people moved their CSS into JS and that components are more standalone, you can simply flip a flag and use
by Karawebnetwork 5y ago
It's become easier to implement them.
Now that many people moved their CSS into JS and that components are more standalone, you can simply flip a flag and use another color palette.
Take this React pseudocode as an example.
Before, you would have to handle it manually. "html.dark-theme .menu .menu-item .menu-link {color: white; background: black;}" ... for every single style declaration.
Sure, preprocessors made them easier in the way that you could simply do ".dark-theme & {}" which would generate the style declarations for you. But it was still a bit of a pain and required using things like mixins that add an extra layer of complexity and support.
Now, your React component can simply be myAwesomeComponent: { titleColor: theme.text, cardBackground: theme.highlight, cssOverrides: css`border:1px solid ${theme.borderColor};` }
Then you have something somewhere that just flip the theme.
const darkTheme = {text:"#fff", highlight:"#000", borderColor: "#ccc"};
mySuperCoolApp.setCurrentTheme(darkTheme);
This makes adding a bunch of themes an afterthought. On an internal app that I worked on, I made a bunch of themes as easter eggs. All that was needed was to duplicate the theme declarations and change the colors. So some users could decide to use different colors.
Another point is that accessibility is becoming more mandatory than before. If you are required by law to support multiple font-sizes, you might as well make it so that you can support multiple colors. It allows things like high-contrast accessibility themes and you can throw in a few extra fun ones just to make your app stand out.