If the CSS is setup to default to light mode, but the user selects dark mode, the next time they visit the app, they will be in dark mode. However, the user will see a flash of light mode before the app is spun up and useDarkMode is called.

This component looks and performs great, but does not work at all in TypeScript due to the lack of a definitions file.

I plan on making a PR to include the definitions file in the library directly, but until then TypeScript users can create a definition file (e.g. declaration.d.ts) in their project and paste in the following to get up and running:

declare module "react-dark-mode-toggle" {
  import React from "react";
  declare type Props = {
    size?: number | string;
    checked?: boolean;
    onChange?: (isChecked: boolean) => void;
    speed?: number;
    className?: string;
  };
  declare const _default: React.MemoExoticComponent<(props: Props) => JSX.Element>;
  export default _default;
}

Hi, the function of size and speed is not working on react with typescript

Hi. First of all, great work!

I have a problem with testing components which use this button.

Simple test:

import React from 'react'
import { render } from '@testing-library/react'
import App from './App'

test('renders learn react link', () => {
  const { queryByTestId } = render(<App />)
  expect(queryByTestId('App')).toBeTruthy()
  expect(queryByTestId('App').classList.contains('active')).toBeFalsy()
})

has output:

App was created with create-react-app. I've prepared simple repository to reproduce this problem: https://github.com/karlosos/dark-mode-toggle-failed-tests

Maybe there's something wrong with testing config?

I have to use a wrapper in order to manipulate the element like for adding margin. Coudn't we pass it as a prop?
thank you

For those of you who love this library like I do but do not want to see it die, please check out my copy of this repo:

https://github.com/todd-elvers/react-dark-mode-toggle-2

Contains an outstanding PR to convert this to TypeScript and add modern bundling technology. Some bugs were also addressed, including #20.

Hello @cawfree

I set the dark mode is true, and the animation will be executed again every time the page refreshes or reloads.

Is there get some functions to not repeat the animation when the dark mode is true by default?

Just like the dark mode is false, render and display toggle directly.

Hello @cawfree hope that you can help me here, I'm using tsx and every time I interact with the nav bar (where the dark mode toggle is), by clicking on any of the links or writing in the search box, the position of the toggle changes.
Im using mobX to manage the state of the dark mode.

Seems like a bug, correct me if I'm wrong. Attached you will find a gif of the "bug".
You can also check the code here

Thanks a lot and great work on the awesome component!
Joao Felicio

Hi @cawfree ,
I congratulate you on the module, I'm having some problems.
As you can see from the image, there is too much distance between the component and the object below.

Would it be possible to do something to remove this margin?

Link: codesandbox

I have used this button in my blog (https://blog.krharsh17.vision) and it works absolutely fine as a static element on the homepage. However, while trying to put it in a collapsible navbar in one of the pages, it started automatically changing its state. I've used a Transition component, inside of it, there's another div and finally, inside this div, there is this button. I am animating the navbar out of the page when the user scrolls down, and back in when the user scrolls up. Here's the code for the top navbar:

const TopNav = (props) => {
    return(
    <Transition in={animate} timeout={1000}>
                {(state) => (
                    <NavContainer state={state}>
                        <NavBrand href={'/'}>brand-name</NavBrand>
                        {props.title}
                            <DarkModeToggle
                                onChange={props.toggleDarkMode}
                                checked={props.darkMode}
                                size={56}
                            />
                     </NavContainer>
                )}
    </Transition>
    );
}

NavContainer is a styled div element, while NavBrand is a styled a element. Upon scrolling up and down the page a number of times, the button changes from light to dark automatically gradually.

Here's a GIF about what exactly is happening on scroll

Clicking on the toggle button produces an outline around the button in Chrome:

Adding outline: "none" to the button element fixes the issue, however that will cause confusion to anyone who is strictly using the keyboard because when they tab to the element on the page that outline won't be present. Some articles online suggest listening for key presses and, if the element is focused and the last key pressed was tab, showing the outline. While that pleases both types of users, it complicates the component.

I'm not sure what makes the most sense for this library and I defer to you @cawfree

First, just want to say thank you for making this beautiful component!

Chrome is giving this warning at runtime. Anything I can do to solve this? Thank you for your help!
"Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
Check the render method of NightModeToggle."