英文:
What is the difference between 'ColorModeProvider' and 'ColorModeScript' in Chakra-UI?
问题
在chakra-ui自述文件中提到，应该使用ColorModeProvider来切换暗色和亮色主题模式。但在chakra-ui网站上提到，应该使用ColorModeScript来实现相同的效果。
我对这两者之间的区别感到困惑。ColorModeProvider和ColorModeScript之间有什么区别？
在Google上搜索了这两者的区别，但没有找到任何解释。
英文:
In the chakra-ui readme, it is mentioned to use ColorModeProvider for dark & light theme mode. But in chakra-ui website, it is mentioned to use ColorModeScript for the same.
I am confused between these. What is the difference b/w ColorModeProvider and ColorModeScript?
Searched for the difference in Google but didn't find any clarification.
答案1
得分: 1
我在思考同样的问题，并进行了一些研究和测试。以下是我找到的内容，其中在脚注中提供了参考链接。希望这对解释ColorModeProvider和ColorModeScript之间的区别有所帮助，或者至少作为一个起点。
ColorModeProvider提供了按颜色模式切换和呈现组件的功能，比如切换组件的CSS类从浅色到深色。对于未包含/未使用ColorModeProvider包装的内容，更改toggleColorMode不会更改内容的颜色模式。
幸运的是，ColorModeProvider内置于ChakraProvider和ChakraBaseProvider1, 2中的较新版本中，不需要单独添加。3
chakra-provider返回包括ColorModeProvider2：
return (
<ThemeProvider theme={theme as Dict} cssVarsRoot={cssVarsRoot}>
<ColorModeProvider
colorModeManager={colorModeManager}
options={theme.config}
>
{/* Children/additional settings omitted to save lines */}
</ColorModeProvider>
</ThemeProvider>
)
ColorModeScript生成并插入一个脚本，作为根元素中的第一个项目，用于读取用户的颜色模式首选项，以及从本地存储中设置和获取用户的颜色首选项设置。它还似乎添加/删除适当的body CSS类以用于Chakra的浅色/深色模式。4 ColorModeScript配置尽可能靠近<body>标签的开始位置。
ColorModeScript的文档非常简短，所以我查看了源代码5并进行了沙盒测试6以了解其影响。文档提到首选项存储也可以在服务器端处理，如果在服务器端实现，就不需要使用ColorModeScript。7
ColorModeScript插入到根元素中的生成脚本示例：
<div id="root">
<script id="chakra-script">
!(function(){try{var a=function(c){var v="(prefers-color-scheme: dark)",h=window.matchMedia(v).matches?"dark":"light",r=c==="system"?h:c,o=document.documentElement,s=document.body,l="chakra-ui-light",d="chakra-ui-dark",i=r==="dark";return s.classList.add(i?d:l),s.classList.remove(i?l:d),o.style.colorScheme=r,o.dataset.theme=r,r},n=a,m="system",e="chakra-ui-color-mode",t=localStorage.getItem(e);t?a(t):localStorage.setItem(e,a(m))}catch(a){}})();
</script>
</div>
参考
1 chakra-ui GitHub：ChakraProvider的源代码
2 参见链接1第100行。显示了ChakraProvider/ChakraBaseProvider源代码，其中返回了包装子元素的ThemeProvider和ColorModeProvider
3 chakra-ui GitHub：v1.6.0的修补程序说明建议使用ChakraProvider而不是ThemeProvider/ColorModeProvider模式
4 chakra-ui GitHub：显示在根元素中设置的脚本（上面也有示例），用于管理本地存储首选项、body类名等。关于localStorage，请参见第34行。
5 请参见链接4以获取ColorModeScript的源代码
6 Replit Sandbox：感谢用户tresorama提供的有用沙盒
7 chakra-ui GitHub：v2.0.1的修补程序说明添加了服务器端设置，并提供了配置示例，写作时在第213行附近。
英文:
I was wondering the same thing and did some research/testing today. Here's what I found with references linked in the footnotes. I hope it's helpful, or at least a starting point, in explaining the difference between ColorModeProvider and ColorModeScript.
ColorModeProvider provides functionality for toggling and rendering components by color mode, like toggling component CSS classes from light to dark. Changing toggleColorMode for content not wrapped in/using the ColorModeProvider would not change the content's color mode.
Luckily, ColorModeProvider is built into ChakraProvider and ChakraBaseProvider<sup>1, 2</sup> with newer versions, and does not need to be added separately. <sup>3</sup>
chakra-provider return includes ColorModeProvider<sup>2</sup>:
return (
<ThemeProvider theme={theme as Dict} cssVarsRoot={cssVarsRoot}>
<ColorModeProvider
colorModeManager={colorModeManager}
options={theme.config}
>
{/* Children/additional settings omitted to save lines */}
</ColorModeProvider>
</ThemeProvider>
)
ColorModeScript generates and inserts a script as the first item in the root element that helps read the user's system preference for color mode, as well as set and get the user's color preference setting from local storage. It also appears to add/remove the appropriate body CSS class for Chakra's light/dark mode.<sup>4</sup> The ColorModeScript configuration is placed as close as possible to the start of the <body> tag.
The documentation for ColorModeScript is quite short, so I looked at the source code<sup>5</sup> and sandbox tested<sup>6</sup> to understand its impact. The documentation mentions that preference storage can also be handled server-side, and if implemented server-side, the ColorModeScript does not need to be used.<sup>7</sup>
Generated script example from ColorModeScript Chakra inserts into the root element:
<div id="root">
<script id="chakra-script">
!(function(){try{var a=function(c){var v="(prefers-color-scheme: dark)",h=window.matchMedia(v).matches?"dark":"light",r=c==="system"?h:c,o=document.documentElement,s=document.body,l="chakra-ui-light",d="chakra-ui-dark",i=r==="dark";return s.classList.add(i?d:l),s.classList.remove(i?l:d),o.style.colorScheme=r,o.dataset.theme=r,r},n=a,m="system",e="chakra-ui-color-mode",t=localStorage.getItem(e);t?a(t):localStorage.setItem(e,a(m))}catch(a){}})();
</script>
</div>
<sup>Reference</sup><br>
<sub><sup>1</sup> chakra-ui GitHub: Source code for ChakraProvider</sub><br>
<sub><sup>2</sup> See link 1 line 100. Shows ChakraProvider/ChakraBaseProvider source code where it returns ThemeProvider and ColorModeProvider wrapping children</sub><br>
<sub><sup>3</sup> chakra-ui GitHub: Patch notes v1.6.0 shows it's recommended to use ChakraProvider over ThemeProvider/ColorModeProvider pattern</sub><br>
<sub><sup>4</sup> chakra-ui GitHub: Shows the script set in the root element (example also above) that manages local storage preference, body class names, etc. See line 34 re: localStorage.</sub><br>
<sub><sup>5</sup> See link 4 for ColorModeScript source code</sub><br>
<sub><sup>6</sup> Replit Sandbox: Credit to user tresorama for the helpful sandbox</sub><br>
<sub><sup>7</sup> chakra-ui GitHub: v2.0.1 patch notes indicate addition of server-side setting with configuration examples, around line 213 at time of writing.</sub>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论