twin-moon-color v0.0.6

Features

• Create object for mui create theme
• Generate dark or light color automatically for MUI
• Support RGB, HSL, HEX and known colors

how to use

...
import tmc from "twin-moon-color"

let themes = tmc({primary:"#000000"})
//or
//let themes = tmc({"text.primary":"!#000000", "background.default":"#ffffff"})
// the "!" will put the darker color in light theme and vise versa, made for contrast
//or
//let themes = tmc({text:{primary:"#000000", secondary:"#ffffff"}})

const app = ()=>{
    return (
        <ThemeProvider theme={isDarkTheme ? createTheme(themes.dark) : createTheme(themes.light)}>
        </ThemeProvider>
    )
}

or

...
import tmc from "twin-moon-color"

let themes = tmc({"text.primary":"#000000", "background.default":"#ffffff"})

const app = ()=>{
    return (
        <ThemeProvider theme={isDarkTheme ? createTheme(themes.dark) : createTheme(themes.light)}>
        </ThemeProvider>
    )
}

supported format examples

let themes = tmc({primary:"#000000"})
let themes = tmc({primary:"black"})
let themes = tmc({primary:"!black"})
let themes = tmc({"text.primary":"#000000",})
let themes = tmc({primary:{main:"#000000",}})
let themes = tmc({"text.primary":"!#000000",}) // will invert the color
let themes = tmc({primary:[0,0,0]})//RGB
let themes = tmc({primary:["!", 0,0,0]})//RGB invert color
let themes = tmc({primary:["h", 0,0,0]})//HSL invert color
let themes = tmc({primary:["!h", 0,0,0]})//HSL invert color
let themes = tmc({primary:"*#000000"})//will put the same color in dark light theme

how to use createDarkLightColors

...
import {createDarkLightColors} from "twin-moon-color"

let colors = createDarkLightColors("#00FF00");

const light = {
  palette: {
    mode: "light",
    primary: {
        main: colors.light
    }
  },
};

const dark = {
  palette: {
    mode: "dark",
    primary: {
        main: colors.dark
    }
  },
};

const app = ()=>{
    return (
        <ThemeProvider theme={isDarkTheme ? createTheme(dark) : createTheme(light)}>
        </ThemeProvider>
    )
}

changes

• 0.0.6:

  • add * to set the same color in dark and light theme

• 0.0.5:

  • more bug fixing

• 0.0.4:

  • add support for rgb, hsl, known colors
  • fix bug when using multi "something.something" format

• 0.0.3:

  • add palette text etc.
  • add "!" before color and it will put the darker color in light theme and vise versa

• 0.0.2:

  • create object for mui create theme

• 0.0.1:

  • createDarkLightColors