Returns a value depending on whether your browser has dark mode or light mode activated, it is super useful with Styled-Components for ReactJS, but you can also use it with JS Vanilla
npm i value-theme-returnFor import in your proyect only write this:
import useTheme from "value-theme-return";useTheme("lightValue", "darkValue");This will return one of those two values depending on whether your browser is in Dark Mode or Light Mode
import useTheme from "value-theme-return";
let value = useTheme("#FFF", "#000");
console.log(value)Try it yourself :D
import useTheme from "value-theme-return";
//Your Styled Component
const MyStyledComponent = styled.button`
background-color: ${useTheme("white", "black")};
color: ${useTheme("dodgerblue", "white")};
`In this simple way you have automatic values for Dark Mode or Light Mode. Experiment with your creativity, this is only one use of many that you can apply: D
Why not?
import useTheme from "value-theme-return";
//Your Styled Component
const MyStyledComponent = styled.button`
@apply: ${useTheme(`
bg-white text-black
`, `
bg-black text-white
`)};
`