https://github.com/dev-warner/svelte-theme-switcher

Component and state for switching theme
https://github.com/dev-warner/svelte-theme-switcher

Last synced: 3 months ago
JSON representation

Component and state for switching theme

• Host: GitHub
• URL: https://github.com/dev-warner/svelte-theme-switcher
• Owner: dev-warner
• Created: 2020-04-06T15:24:13.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T18:40:05.000Z (about 2 years ago)
• Last Synced: 2023-03-02T15:37:13.357Z (almost 2 years ago)
• Language: JavaScript
• Size: 1.94 MB
• Stars: 4
• Watchers: 3
• Forks: 0
• Open Issues: 17
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Svelte Theme Switcher

![Test](https://github.com/dev-warner/svelte-theme-switcher/workflows/Test/badge.svg)

A happy little svelte theme switcher to brighten or maybe darken your day 🌞.

- [demo](https://dev-warner.github.io/svelte-theme-switcher/)

## Basic example

App.svelte

```html

  import ThemeSwitcher from "svelte-theme-switcher";

  :global(body) {

    background: var(--background);

    color: var(--text);

    transition: 0.6s;

  }

  :global(.theme-light) {

    --background: rgb(250, 252, 240);

    --text: #222;

  }

  :global(.theme-dark) {

    --background: #222;

    --text: #fff;

  }

```

## Installation

```bash

npm i svelte-theme-switcher

```

```

yarn add svelte-theme-switcher

```

### Component props

| Property   | default                          | type   | notes              |

| ---------- | -------------------------------- | ------ | ------------------ |

| height:    | 30px                             | string | must be a px value |

| width:     | 60px                             | string |

| transition | 0.6s                             | string |

| background | `{ light: #ecf0f1, dark: #333 }` | object |

### Example

```js

```

### Accessing state

```javascript

import { theme } from "svelte-theme-switcher";

{$theme}

```


## Web Components

In the head of your document add:

```html

  body {

    background: var(--background);

    color: var(--text);

    transition: 0.6s;

  }

  .theme-light {

    --background: rgb(250, 252, 240);

    --text: #222;

  }

  .theme-dark {

    --background: #222;

    --text: #fff;

  }

```

this ensure's there is no inital flicker

You can now add the web component to switch between themes.

```html

```