Darkmode-toggle-react NPM

Darkmode-toggle-react

🌒 Looking for maintainers for Darkmode-toggle-react library

darkmode-toggle-react is a simple React component for implementing a dark mode toggle switch using Tailwind CSS or you can use customaized css instead.

You should consider using reactjs-popup for those couple of reasons :

✅ Very tiny library
✅ Fully accessible 🔓
✅ Easy to use 💦
✅ Full style customization 🧩 ( CSS, styled-components)
✅ Default & Custom Animations

Demo

Installing / Getting started

To install and use the DarkMode Toggle React component in your project, follow these steps:

Install the tailwindcss (optional):

to install Tailwind CSS, follow these steps: for more details go take a look at this docuentation install tailwindcss with react

Install Tailwind CSS:

1- Install Tailwind CSS and its dependencies using npm:

    npm install -D tailwindcss

2- Create a Tailwind Configuration File:

Generate a Tailwind CSS configuration file using the following command:

    npx tailwindcss init

This will create a tailwind.config.js file in your project directory.

3- Include Tailwind CSS Styles:

Include Tailwind CSS styles in your project. You can either import the styles directly into your CSS/SCSS file or include them via a link tag in your HTML file:

    <!-- In your HTML file -->
    <link href="path/to/tailwind.css" rel="stylesheet">

4- Set Up Dark Mode :

If you want to enable dark mode using Tailwind CSS, you can configure it in your tailwind.config.js file:

    // tailwind.config.js
    module.exports = {
    darkMode: 'class', // Enable dark mode based on the 'dark' class
    theme: {
        extend: {},
    },
    variants: {},
    plugins: [],
    };

install darkModeToggle

This package is available in NPM repository as darkmode-toggle-react. It will work correctly with all popular bundlers.

install with npm

    npm i darkmode-toggle-react

install it with yarn

    yarn add darkmode-toggle-react

Include the Component

To start using darkModeToggle you just need to import the component from the darkmode-toggle-react package.

using tailwindCss

import React from 'react';
import { DarkModeToggle } from 'darkmode-toggle-react'

export default () => (
  <div className="bg-gray-200 text-gray-900 dark:bg-gray-900 dark:text-gray-300 min-h-screen min-w-full" >
        <DarkModeToggle />
  </div>
);

using css

    /* main.css file */
    .dark{
        background-color: #121212; /* Dark background color */
        color: #ffffff; /* Light text color for dark mode */
    }

    import React from 'react';
    import { DarkModeToggle } from 'darkmode-toggle-react'
    import main.css

    export default () => (
        <div className="" >
                <DarkModeToggle />
        </div>
    );

Contributing

Clone Repo

Fork and then clone the repo

git clone https://github.com/ouchkaih/Darkmode-toggle-react.git

Start Developing

Install all npm scripts:

npm install
or
yarn install

we use storybook to build popup use cases.

To start storybook:

yarn storybook

Run Test in watch mode

yarn test

To make contributing simply you need to create a new story for your use case under stories directory to demonstrate the new features or the bug fix .

Make Changes 😀.

Before submitting a pull request run npm run test to run the unit tests .