Hey there, I was trying to dynamically change the background and came up with this method. It's working fine but I'm encountering an error that is leaving me unsatisfied. Interestingly, when I hardcode a color, the error disappears. The code is functioning as expected, but the error persists.
function theme() {
const ls = require('local-storage');
const [dark, setdark] = useState(false);
function set(params) {
setdark((dark) => !dark);
if (dark) {
console.log('disabled');
ls.set('color', 'white');
} else {
console.log('enabled');
ls.set('color', '#141526');
}
}
const theme = ls.get('color');
return (
<div>
<style jsx global className='theme'>{`
body {
background: ${theme};
}
`}</style>
<label htmlFor='dark'>Dark theme</label>
<input type='checkbox' name='dark' id='' onClick={set} />
</div>
);
}
export default theme;