Theming

Pollen

Github Tweet it 💙Star it 🖤

Search…

Introducing Pollen

Modules

Theming

You can easily extend or overwrite any part of Pollen by defining your own CSS variables in a :root pseudo-element. Pollen is designed to be a foundation for your own design system.
variables.css
1
:root {
2
  --font-sans: 'Inter', sans-serif;
3
  --color-primary: var(--color-blue);
4
}
Copied!
app.js
1
import 'pollen-css';
2
import './variables.css';
Copied!
Globally Responsive
CSS variables can be changed inside media queries. And by redefining a variable on :root in a media query, that variable will be globally responsive.
1
@media (max-width: 45em) {
2
  :root {
3
    --size-5: var(--size-4);
4
  }
5
}
Copied!
Javascript Interactivity
CSS variables are also accessed and updated in JavaScript, which allows you to accomplish things that were previously very complicated, like dynamically applying style themes. By updating a few key variables based on user input, you can reskin an entire interface.
Update CSS variables in JS by using the setProperty method on the document root’s style property.
1
document.documentElement.style.setProperty(`--color-primary`, `#4299e1`);
Copied!
You can also alias variables to other variables, this is useful for using a consistent property throughout your codebase that can be dynamically updated without losing meaning
1
// Update the page background for dark mode
2
document.documentElement.style.setProperty(`--color-background`, `var(--color-black)`);
3
document.documentElement.style.setProperty(`--color-text`, `var(--color-grey-100)`);
Copied!

Motivations

Contributing

Last modified 4d ago

Copy link

Contents

Globally Responsive

Javascript Interactivity