0.0.1 • Published 10 months ago

vite-dark v0.0.1

Weekly downloads
-
License
ISC
Repository
github
Last release
10 months ago

React Component Toggle Button Dark Light Mode.

🙏 DONATE ❤️

Just Import the component and use this dark mode.

Make Sure You Will be using tailwindcss in our project

Alt text Alt text

Installation

You can install the package via npm:

   npm install vite-dark
       OR
   npm install vite-dark@latest
You can Handle the design esily just change classes according to tailwindcss
import React from "react";
import Toggle from 'vite-dark'
const App = () => {
  return (
    <div className=' h-screen bg-slate-400 dark:bg-slate-900'>
      <Toggle
        buttonClass="p-2 relative rounded-full flex flex-col w-8 h-8 m-auto justify-center item-center bg-slate-200 hover:bg-slate-300 dark:bg-slate-600 dark:hover:bg-slate-700 shadow-sm shadow-black dark:shadow-white"
        buttonIconClass="text-[1rem] dark:text-white"
        lightButtonClass="bg-gray-400 dark:bg-gray-800"
        darkButtonClass="bg-gray-400 dark:bg-gray-800"
        lightIconClass="text-black dark:text-white"
        darkIconClass="text-black dark:text-white"
      />
    </div>
  );
};

export default App;