Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/coffee-cup/theme-custom-properties
Convert theme to CSS custom properties and CSS
https://github.com/coffee-cup/theme-custom-properties
css css-custom-properties css-variables dark-mode themes
Last synced: 18 days ago
JSON representation
Convert theme to CSS custom properties and CSS
- Host: GitHub
- URL: https://github.com/coffee-cup/theme-custom-properties
- Owner: coffee-cup
- License: mit
- Created: 2021-01-07T21:01:26.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2021-01-08T04:45:19.000Z (about 4 years ago)
- Last Synced: 2024-11-16T19:17:11.333Z (3 months ago)
- Topics: css, css-custom-properties, css-variables, dark-mode, themes
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/theme-custom-properties
- Size: 161 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# theme-custom-properties
[](https://www.npmjs.com/package/theme-custom-properties)
[](https://github.com/coffee-cup/theme-custom-properties/blob/main/LICENSE)
Convert a theme object to CSS custom properties (variables) and CSS that you can add to your website.
```ts
import { transformThemeToCustomProperties } from "theme-custom-properties";
const { bodyCSS, transformedTheme } = transformThemeToCustomProperties({
light: {
colors: {
foreground: "black",
background: "white"
}
},
dark: {
colors: {
foreground: "white",
background: "black"
}
}
});
console.log(bodyCSS);
/*
:root {
--colors-foreground: "black";
--colors-background: "white";
}
[data-theme="light"] {
--colors-foreground: "black";
--colors-background: "white";
}
[data-theme="dark"] {
--colors-foreground: "black";
--colors-background: "white";
}
*/
console.log(transformedTheme)
/*
{
light: {
colors: {
foreground: "var(--colors-foreground)",
background: "var(--colors-background)"
}
},
dark: {
colors: {
foreground: "var(--colors-foreground)",
background: "var(--colors-background)"
}
}
}
*/
```
## Install
```
yarn add theme-custom-properties
# or
npm i --save theme-custom-properties
```
## Usage
Convert your themes
```ts
import { transformThemeToCustomProperties } from "theme-custom-properties";
const { bodyCSS, transformedThemes } = transformThemeToCustomProperties({
light: { /* ... */ },
dark: { /* ... */ }
});
```
Add the `bodyCSS` to the document and pass the transformed theme to your `ThemeProvider` (e.g. [styled-components](https://styled-components.com/docs/advanced#the-theme-prop). Get the currently selected theme from something like [next-themes](https://github.com/pacocoursey/next-themes).
For example, with [NextJS](https://nextjs.org/).
```tsx
const MyApp = ({ Component, pageProps }: AppProps) => {
const currentTheme = "dark"
return (
{bodyCSS}
)
```
Now you can use your theme and it will use CSS variables instead.
## API
### transformThemeToCustomProperties(themes, options?) => { bodyCSS, transformedThemes }
- `themes`: Themes for all colors modes.
e.g.
```ts
const themes = {
light: { /* ... */ },
dark: { /* ... */ },
}
```
- `options`
* `defaultTheme = "light"`: The default color mode. `themes[defaultTheme]` will be added to `:root` in `bodyCSS`
* `attribute = "data-theme"`: HTML attribute modified based on the active theme. Accepts class and data-*
Returns
- `bodyCSS`: string containing CSS custom properties that you can add to the HTML document
- `transformedThemes`: object in same shape as `themes`. Values are replaced with CSS variable string
## Development
This library was bootstrapped with [tsdx](https://github.com/formium/tsdx).
Build
```
yarn build
```
Test
```
yarn test
```