Themes
The configuration file can define themes:
class-ui.config.js
module.exports = {
themes: {
dark: {
colors: {
GRAY_80: 'green'
}
}
}
}
With this configuration in place you are now able to use a dark theme. Here is an example of how that could work with React:
import React from 'react';
import { compose, tokens, themes } from 'classy-ui';
export const App = () => {
const [currentTheme, setTheme] = React.useState(null);
return (
<div className={compose(currentTheme === 'dark' && themes.dark)}>
<h1 className={compose(tokens.color.GRAY_80)}>Hello world</h1>
<button onClick={() => setTheme('dark')}>Set dark theme</button>
</div>
);
};
It would change any use of the color.GRAY_80 to green when the theme is active. Also any other CSS property combined with this token would also become green, for example backgroundColor.GRAY_80. The token has now become a CSS variable as well.
Last modified 3yr ago