https://github.com/gobeli/css-var-theme

small, dependency-free utility to enable efficient theming with css variables.
https://github.com/gobeli/css-var-theme

Last synced: about 10 hours ago
JSON representation

small, dependency-free utility to enable efficient theming with css variables.

• Host: GitHub
• URL: https://github.com/gobeli/css-var-theme
• Owner: gobeli
• Created: 2020-05-02T12:17:19.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T04:48:50.000Z (over 1 year ago)
• Last Synced: 2023-03-05T22:27:54.673Z (over 1 year ago)
• Language: TypeScript
• Homepage: https://gobeli.github.io/css-var-theme/
• Size: 1.14 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 14
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# css-var-theme

![build](https://github.com/gobeli/css-var-theme/workflows/build/badge.svg)

A small, dependency-free utility to enable efficient theming with css variables.

[Repo](https://github.com/gobeli/css-var-theme) /

[Demo](https://gobeli.github.io/css-var-theme/) /

[npm](https://www.npmjs.com/package/css-var-theme)

## Installation

`npm i css-var-theme`

## Usage

A theme is basically a JS object implementing the `Theme` interface:

```ts

export interface Theme {

  meta?: object

  theme: object

}

```

It contains optional `meta` information (like a name) and the actual `theme` which can be any JS object.

Once a theme is defined the `css-var-theme` utility can be initialized with it:

```ts

import { useTheme } from 'css-var-theme'

const my_theme = {

  meta: {

    name: 'my theme',

  },

  theme: {

    color: {

      background: '#eee',

      text: '#333',

    },

  },

}

const theme_store = useTheme({ initial: my_theme })

```

During initialization a ``-Tag is added to the head which will map this theme to the following css-variables:

```css

:root {

  --color-background: #eee;

  --color-text: #333;

}

```

with `theme_store.set(new_theme)` the current theme can be changed and `theme_store.subscribe(() => ...)` you can subscribe to updates on the theme.

## API

The `useTheme` function consumes an object implementing the `ThemingOptions` interface:

<table>

  <thead>

    <tr>

      <th>Parameter</th>

      <th>Type</th>

      <th>Description</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td><code>initial</code></td>

      <td><code>Theme</code></td>

      <td>Initial theme to be used.</td>

    </tr>

    <tr>

      <td><code>dark?</code></td>

      <td><code>Theme</code></td>

      <td>

        Optional, overrides the initial theme if user prefers darkmode.

      </td>

    </tr>

    <tr>

      <td><code>light?</code></td>

      <td><code>Theme</code></td>

      <td>

        Optional, overrides the initial theme if user prefers lightmode.

      </td>

    </tr>

    <tr>

      <td><code>id?</code></td>

      <td><code>string</code></td>

      <td>

        Optional, id of the style element used to set the css variables.

        Will be generated if not set.

      </td>

    </tr>

  </tbody>

</table>