From the first day on, Leptonic was built with theming in mind.
Styles are not attached to components directly, are not injected in any way upon rendering, which means that all components could be describes as "headless" in that regard.
All styling is provided through the leptonic-theme crate. When used as a build.rs dependency, this crate can write out SCSS code, styling the Leptonic components in two themes: light and dark.
The <Root> component already discussed in the Installation section provides everything required (namely rendering the <ThemeProvider> component) to active a theme.
A simple ThemeToggle component is provided, which you can embed like this:
We are using the <LeptonicTheme> enum here, which describes the two out-of-the-box themes (light and dark). This is not mandatory though as you could create your own theme-defining type and your own theme toggle components.
Having a theme, even better a theme provided by default is, is great, but only if that them can be customized in a meaningful way.
All components styles therefore make broad use of CSS variables, with which many aspects of the two default themes can be changed. In every page of this book explaining a component, we hint you to the styles you might want to override. A theme generator may come in the future...
Have a look at this excerpt from this book's main style.scss file, showing you how we include the leptonic standard themes previously written by our build script and overwrite a few variables to meet our design needs.
