Description

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

Installation

npm i value-theme-return

Import in Your Proyect

For import in your proyect only write this:

import useTheme from "value-theme-return";

Usage

useTheme("lightValue", "darkValue");

This will return one of those two values depending on whether your browser is in Dark Mode or Light Mode

Example

import useTheme from "value-theme-return";
let value = useTheme("#FFF", "#000");
console.log(value)

Try it yourself :D

Usage on Styled Components

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

Styled Components (or Pure CSS in JSX) + Taildwind + This Module = Power

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
    `)};
`