\n
\n )\n}\n\nconst style = {\n boxStyle: {\n width: 80, \n height: 80, \n margin: 8,\n alignItems: 'center',\n justifyContent: 'center'\n }\n}\n\nexport default ThemeEx;\n```\n\n### extra1. colorScheme\n\nAlso you can use `colorScheme`. It is `light` or `dark`.\n\n```javascript\nimport { useTheme } from '@team-devmonster/react-theme';\nimport { Theme } from './App.theme';\n\nimport ImgWhite from '@Img/imgWhite.png';\nimport ImgDark from '@Img/imgDark.png';\n\nconst ThemeEx = () => {\n\n const { colorScheme } = useTheme\n
\n primary
\n \n
\n danger
\n \n 
\n
\n )\n}\nexport default ThemeEx;\n```\n\n### extra2. => CSS property\n\nYou can use style in user css property.\nProperty name's rule is `--${ColorKey}`.\n\n```css\n::placeholder {\n color: var(--placeholder);\n}\n```\n\n```css\nhtml,\nbody {\n background-color: var(--backgroundColor);\n}\n```\n\n### extra3. => color utils\n\nSometimes we should use lighter, darker, or invert colors.\nSo this library offers some utils.\n\n```javascript\nimport { useTheme, darken, lighten, hexToRgb, contrast } from \"@local_modules/theme\";\nimport { Theme } from \"App.theme\";\n\nconst ThemeEx = () => {\n\n const { color, fontSize } = useTheme\n
\n )\n}\nconst style = {\n boxStyle: {\n width: 80,\n height: 80, \n margin: 8,\n alignItems: 'center',\n justifyContent: 'center'\n }\n}\n```","readmeFilename":"README.md"}\n
\n primary lighter 50
\n \n
\n danger darken 50
\n \n
\n step200 hex:{color.step200}
rgb: {hexToRgb(color.step200)}
\n rgb: {hexToRgb(color.step200)}