Package Exports

value-theme-return

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (value-theme-return) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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