I am a junior in TypeScript, I am trying to create a dark mode in TypeScript, using styled-components and a custom hook.
useDarkMode.tsx
import { useState } from 'react';
export const useDarkMode = () => {
const [theme, setTheme] = useState('dark');
const toggleTheme = () => {
theme === 'dark' ? setTheme('light') : setTheme('dark');
};
return [theme, toggleTheme];
};
HeaderComponent.tsx
import styled from 'styled-components';
import { useDarkMode } from '../hooks';
import { ToggleTheme } from './';
const Header = styled.header`
position: relative;
width: 100%;
display: inline-block;
float: left;
margin: 0;
&:after {
clear: both;
content: '';
display: table;
}
`;
export const HeaderComponent = () => {
const [theme, toggleTheme] = useDarkMode();
console.log(theme);
return (
<>
<Header>
//