Home

Awesome

<img width="100%" src="./banner-dark.gif#gh-dark-mode-only" /> <img width="100%" src="./banner-light.gif#gh-light-mode-only" /> <div align="center"> <br /> <img alt="NPM version" src="https://img.shields.io/npm/v/theme-toggles?style=for-the-badge"> <!-- PROJECT LOGO --> <br /> <h1 >Theme Toggles</h1> <p>Theme toggles is a collection of awesome, easy to use, animated toggles; designed for switching between light and dark modes. It's a modular library which aims to provide an ample customization where needed. Works great utility CSS frameworks such as Tailwindcss.</p> </p> <h2> <a href="https://toggles.dev">Full Documentation</a> </h2> </div>

This is the v5 branch. The current release version can be found here. Version 5 is a complete refactor of the library

Installing the latest version

You can install the latest version by using:

Packages

NameVersion
theme-togglesnpm version
@theme-toggles/reactnpm version

About

Our project provides you with a quick and effortless way to implement well designed toggles. With more websites supporting both light and dark themes, it's important to ensure sites also have a clean and accessible toggle.

We use SVG’s for each of our toggles, animating them with CSS. Using SVG’s instead of html elements like div’s enables us to have minimal markup whilst maintaining a high quality and scalable icon.

Features

Roadmap

New development is currently happening on the v5 branch

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.