# tailwind-theme-toggle-buttons

> Tailwind Theme/Darkmode Toggler Buttons Multiple Styles

Latest version **1.0.8** (published 2023-03-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install tailwind-theme-toggle-buttons
pnpm add tailwind-theme-toggle-buttons
yarn add tailwind-theme-toggle-buttons
bun add tailwind-theme-toggle-buttons
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2023-03-15 |
| First published | 2023-03-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 15.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | stacksagar |
| Maintainers | stacksagar |
| Keywords | tailwind darkmode switcher buttons, tailwind theme change buttons, tailwindcss darkmode buttons |

## Links

- npm: https://www.npmjs.com/package/tailwind-theme-toggle-buttons
- Repository: https://github.com/stacksagar/npm-packages
- Homepage: https://github.com/stacksagar/npm-packages/blob/main/tailwind-theme-toggle-buttons/README.md
- Issues: https://github.com/stacksagar/npm-packages/issues
- npm.io page: https://npm.io/package/tailwind-theme-toggle-buttons

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 1.0.8 (latest) — 2023-03-15
- 1.0.7 — 2023-03-15
- 1.0.6 — 2023-03-15
- 1.0.5 — 2023-03-15
- 1.0.4 — 2023-03-14
- 1.0.3 — 2023-03-14
- 1.0.2 — 2023-03-14
- 1.0.1 — 2023-03-14
- 1.0.0 — 2023-03-14

## README

```
npm install tailwind-theme-toggle-buttons
```

or

```
yarn add tailwind-theme-toggle-buttons
```

### Usage

# Step 1.

`tailwind.config.js`

```js
module.exports = {
  darkMode: "class",
  // others
};
```

# Step 2.

```js
import Toggle from "tailwind-theme-toggle-buttons";

export default function App() {
  return (
    <div>
      // button style 1
      <Toggle style="A" />

      // button style 2
      <Toggle style="B" />

      // button style 3
      <Toggle style="C" />
    </div>
  );
}
```

`OR` You can use your custom button

```js
import { toggleFunc } from "tailwind-theme-toggle-buttons";

export default function App() {
  return (
    <div>
      <button onClick={toggleFunc}>Toggle</button>
    </div>
  );
}
```

### Also you can check theme

```js
const theme = localStorage.getItem("theme");
const isDark = theme === "dark";
```

---
_Source: https://npm.io/package/tailwind-theme-toggle-buttons · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._