reactbits-mcp-tools
Version:
Model Context Protocol server for ReactBits component library with comprehensive TypeScript build system and real data integration
80 lines • 3.94 kB
JSON
{
"metadata": {
"name": "Color Mode",
"category": "ui-component",
"variant": "js-css",
"priority": 1,
"extractedAt": "2025-08-01T16:33:17.007Z"
},
"source": {
"filePath": "src/components/setup/color-mode.jsx",
"sourceCode": "/* eslint-disable react-refresh/only-export-components */\n\"use client\"\n\nimport { ClientOnly, IconButton, Skeleton, Span } from \"@chakra-ui/react\"\nimport { ThemeProvider, useTheme } from \"next-themes\"\nimport * as React from \"react\"\nimport { LuMoon, LuSun } from \"react-icons/lu\"\n\n\nexport function ColorModeProvider(props) {\n return (\n <ThemeProvider attribute=\"class\" disableTransitionOnChange {...props} />\n )\n}\n\nexport function useColorMode() {\n const { resolvedTheme, setTheme, forcedTheme } = useTheme()\n const colorMode = forcedTheme || resolvedTheme\n const toggleColorMode = () => {\n setTheme(resolvedTheme === \"dark\" ? \"light\" : \"dark\")\n }\n return {\n colorMode: colorMode,\n setColorMode: setTheme,\n toggleColorMode,\n }\n}\n\nexport function useColorModeValue(light, dark) {\n const { colorMode } = useColorMode()\n return colorMode === \"dark\" ? dark : light\n}\n\nexport function ColorModeIcon() {\n const { colorMode } = useColorMode()\n return colorMode === \"dark\" ? <LuMoon /> : <LuSun />\n}\n\nexport const ColorModeButton = React.forwardRef(function ColorModeButton(props, ref) {\n const { toggleColorMode } = useColorMode()\n return (\n <ClientOnly fallback={<Skeleton boxSize=\"8\" />}>\n <IconButton\n onClick={toggleColorMode}\n variant=\"ghost\"\n aria-label=\"Toggle color mode\"\n size=\"sm\"\n ref={ref}\n {...props}\n css={{\n _icon: {\n width: \"5\",\n height: \"5\",\n },\n }}\n >\n <ColorModeIcon />\n </IconButton>\n </ClientOnly>\n )\n})\n\nexport const LightMode = React.forwardRef(\n function LightMode(props, ref) {\n return (\n <Span\n color=\"fg\"\n display=\"contents\"\n className=\"chakra-theme light\"\n colorPalette=\"gray\"\n colorScheme=\"light\"\n ref={ref}\n {...props}\n />\n )\n },\n)\n\nexport const DarkMode = React.forwardRef(\n function DarkMode(props, ref) {\n return (\n <Span\n color=\"fg\"\n display=\"contents\"\n className=\"chakra-theme dark\"\n colorPalette=\"gray\"\n colorScheme=\"dark\"\n ref={ref}\n {...props}\n />\n )\n },\n)\n",
"fileSize": 2174
},
"analysis": {
"dependencies": [
"@chakra-ui/react",
"next-themes",
"react",
"react-icons/lu"
],
"exports": [
"ColorModeProvider",
"useColorMode",
"useColorModeValue",
"ColorModeIcon",
"ColorModeButton",
"LightMode",
"DarkMode"
],
"imports": [
{
"statement": "{ ClientOnly, IconButton, Skeleton, Span }",
"from": "@chakra-ui/react",
"isExternal": true
},
{
"statement": "{ ThemeProvider, useTheme }",
"from": "next-themes",
"isExternal": true
},
{
"statement": "* as React",
"from": "react",
"isExternal": true
},
{
"statement": "{ LuMoon, LuSun }",
"from": "react-icons/lu",
"isExternal": true
}
],
"hooks": [
"useTheme",
"useColorMode",
"useColorModeValue"
],
"features": [
"ref-forwarding",
"interactive"
],
"complexity": {
"level": "moderate",
"score": 38,
"metrics": {
"lines": 94,
"dependencies": 4,
"hooks": 7,
"conditionals": 0
}
},
"stylingApproach": [
"css-classes"
],
"hasAnimation": false
},
"types": {
"definitions": [],
"propsInterface": []
}
}