Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/johnwatkins0/postcss-custom-props-themes
A PostCSS plugin for generating theming classes based on CSS custom properties.
https://github.com/johnwatkins0/postcss-custom-props-themes
css custom-properties nodejs postcss postcss-plugin
Last synced: about 1 month ago
JSON representation
A PostCSS plugin for generating theming classes based on CSS custom properties.
- Host: GitHub
- URL: https://github.com/johnwatkins0/postcss-custom-props-themes
- Owner: johnwatkins0
- License: mit
- Created: 2017-12-26T23:05:06.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2021-08-22T21:04:14.000Z (about 3 years ago)
- Last Synced: 2024-09-18T11:51:55.298Z (about 2 months ago)
- Topics: css, custom-properties, nodejs, postcss, postcss-plugin
- Language: JavaScript
- Size: 141 KB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# postcss-custom-props-themes [](https://travis-ci.org/johnwatkins0/postcss-custom-props-themes)
A [PostCSS](https://github.com/postcss/postcss) plugin for generating theming classes based on CSS custom properties.
## About
This plugin generates user-defined CSS classes to set an element's background color and the colors of enclosed elements, including text, links, and headings.
This plugin uses CSS custom properties. While this approach saves many lines of CSS, it is not recommended for any project needing to support older browsers.
## Install
```
yarn add --dev postcss-custom-props-themes
```
OR
```
npm install --save-dev postcss-custom-props-themes
```
## Usage
Place the required @-rule in your CSS where you want the theming code to appear.
```CSS
@custom-props-themes;
```
Pass configuration options to the plugin via your postcss.config.js file:
```Javascript
module.exports = {
plugins: {
'postcss-custom-props-themes': {
// Your settings.
},
},
};
```
### The settings schema
The main settings object has two fields:
```Javascript
{
defaultTheme: 'string' // Required. The name of the theme to use for fallbacks.
themes: [ // Required. An array of theme objects.
{
// See below.
}
]
}
```
Each object in the themes array can take several settings:
```Javascript
{
name: 'string', // Required. The name of the theme -- e.g., 'light', 'dark', 'primary'.
inherits: 'string', // Another theme in this array to inherit from. Unset values in this theme object will be drawn from the theme it inherits from. By default, themes inherit from the default theme.
color: 'string' // The rest of the settings are CSS colors.
'background-color': 'string',
'background-hover-color': 'string',
'link-color': 'string',
'link-hover-color': 'string',
'heading-color': 'string',
'heading-link-color': 'string',
'heading-link-hover-color': 'string',
'border-color': 'string'
}
```
#### Defaults
If an empty object is passed to the plugin, the following rudimentary defaults are used. If any settings are passed, the defaults are ignored completely.
```Javascript
{
defaultTheme: 'light',
themes: [
{
name: 'light',
'background-color': 'white',
'background-hover-color': 'white',
color: 'black',
'link-color': 'blue',
'link-hover-color': 'purple',
'heading-color': 'black',
'heading-link-color': 'blue',
'heading-link-hover-color': 'purple',
'border-color': 'transparent'
},
{
name: 'dark',
inherits: 'light',
'background-color': 'black',
color: 'white',
'heading-color': 'white',
},
{
name: 'gray',
inherits: 'light',
'background-color': 'gray',
},
],
}
```
## Applying theme styles
Say you set the following theme:
```Javascript
{
name: 'example-theme',
'background-color': 'white',
'background-hover-color': 'white',
color: 'black',
'link-color': 'blue',
'link-hover-color': 'purple',
'heading-color': 'red',
'heading-link-color': 'orange',
'heading-link-hover-color': 'yellow',
'border-color': 'blue'
}
```
The theme can be used in your markup like so:
```HTML
A Heading
Some text
Another heading
A link
```