twin-moon-color
v0.0.6
Published
Generate dark or light color automatically for MUI
Downloads
16
Maintainers
Readme
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