PSA：将黑暗模式添加到您的网站，或者至少让浏览器为您服务

我对Web开发人员有一个简单的消息，开始将Color-Scheme属性添加到网页。

＆lt;！ - 页面支持黑暗和浅色方案，页面作者更喜欢黑暗.--＆gt;

/ *页面支持黑暗和浅色方案，页面作者更喜欢黑暗。* /：根{：暗光;}

我绝对讨论了＆＃34;有一个黑暗模式，但是不要制作滚动条黑暗！＆＃34;，一个很好的例子是docusaurus。

光模式滚动条伤害了眼睛，并且废墟了网站的外观，所以，为了每个有眼睛和喜欢黑暗模式的人，请使用颜色方案，你甚至可以使用它与你的黑暗模式一起使用它例如，CSS，我为客户提供的网站之一Josephojo.com

当使用颜色方案属性时，您可以转动表单元素，网页背景，文本颜色和滚动条黑暗，一个更名的例子是Github，

注意，滚动条是黑暗的，也是如何烧掉眼睛，他们能够使用元标签来完成它。

对于Josephojo.com，我使用了与@Media（Prefers-Color-Scheme：Dark）{}和.dark类一起使用的颜色方案CSS属性，最终结果是

{：light;} .dark {：黑暗; @media（黑暗）{：not（）{：黑色; }}

创建网站时，我使用了DailWindcs，用暗模式设置为＆＃34;类＆＃34;，我的tailwind config看起来像这样，

对于那些谁避难所＆＃39; t一起使用tailwindcss之前，它＆＃39; S基本相同定义一个类，当加入到该html元素将用信号，该网站是在黑暗模式。

现在我们有一些样板代码，你真正需要做的，是设置一个将记住我们当前主题状态的切换。

在开发josephojo.com，我发现，你必须设置你的主题化系统之前别的支持本地媒体的主题，它＆＃39; S一般用户痛苦少，即＆＃39; S为什么我设置的HTML：没有（ [Data-Theme]）在更喜欢 - 颜色方案中：黑暗媒体查询，

html.dark表示黑暗的主题应用于由顺风和[数据主题]表示当前应用的主题，如果数据的主题是从本地存储器不同，那么主题手动切换和页应该在数据 - 使用新的主题主题以及更新本地存储的主题，否则，它应该使用本地存储的主题数据主题，但由于数据的主题仅适用于JavaScript的加载后的HTML元素，我们可以告诉我们的CSS使用默认的黑暗主题如果喜欢 - 颜色方案：黑暗和HTML元素没有数据 - 主题属性。

当您在那里看到的那样，改变实际的浏览器主题Won＆＃39; t永久更改本地存储中设置的主题，如果用户a手动更改它们必须希望永久使用该主题的主题，则使用系统主题。

//基于[Joshwomeau.com/gatsby/dark-mode/]让LetsAvedTheme =（）=＆gt; {const主题= window.localstorage.getItem（＆＃34;主题＆＃34;）; //如果用户明确地选择了灯光或暗，//让＆＃39; s使用它。否则，此值将为null。 if（typeof theme ===＆＃34;字符串＆＃34;）返回主题; //如果他们使用的浏览器/操作系统，那么支持//颜色主题，设＆＃39;不做任何事情。返回null;};让野马=（主题）=＆gt; {//如果用户已明确选择灯或暗，则存储默认主题（Typeof Theme ===＆＃34; String＆＃34;）window.localstorage.setItem（＆＃34;主题＆＃34;主题） ;};让MediaTheme =（）=＆gt; {//如果他们没有明确设置，让＆＃39; s检查媒体查询const mql = matchMedia（＆＃34;（更喜欢 - 颜色方案：黑暗）＆＃34;）; const hasmediaquerypreference = typeof mql.matches ===＆＃34;布尔＆＃34 ;;如果（hasmediaquerypreference）返回mql.matches？ ＆＃34;黑暗＆＃34; ：＆＃34;光＆＃34 ;;}; const html = document.querySelector（＆＃34; html＆＃34;）; //从HTML标记获取主题，如果它有主题或从LocalStorage获取它，请留下CheckCurrentTheme =（）=＆gt; {让ProMeattr = HTML.getAttribute（＆＃34;数据主题＆＃34;）; if（themeattr）返回themeattr;返回getsavedtheme（）;}; //在localStorage中设置主题，以及HTML标记，Let ApplicatTheme =（主题）=＆gt; {html.classname =主题; html.setTribute（＆＃34;数据主题＆＃34;主题）;尝试{//如果在本地存储中存在保存的主题，请使用，//否则使用`更偏好的颜色方案（Scheme Scheme`）设置主题，让主题= getsAvedTheme（）; if（theme == null）主题= mediaTheme（）; //设置初始主题html.setattribute（＆＃34;数据主题＆＃34;主题）; html.classlist.add（主题）; //如果用户更改系统/浏览器/操作系统主题，也更新站点主题，// ant＆＃39; t保存本地存储窗口的更改.matchmedia（＆＃34;（Prefers-color-scheme：黑暗）＆＃34;）.addeventlistener（＆＃34;变更＆＃34;（e）=＆gt; {applicattheme（e）=＃34;黑暗＆＃34;：＆＃34;光和＃34;） ;}）; //在主题切换按钮单击，在暗和光模式之间切换页面主题，然后将主题保存在本地存储文档中.QuerySelector（＆＃34;＃主题 - 切换＆＃34;）.addeventlistener（＆＃34;单击＆＃34;（）=＆gt; {让主题= checkCurrentTheme（）===＆＃34;暗＆＃34;？＆＃34;光和＃34;：＆＃34;黑暗＆＃34 ;; applicattheme（主题）;野马（主题）;}}}}} catch（e）{console.warn（＆＃34;主题是＆＃39; t在这个浏览器上。＆＃34;，e）;}

您可以在下面查看演示，但您可能需要在新选项卡中打开演示，以便正常工作。

此外，注意，我如何从未设置文本颜色，背景颜色，滚动条颜色或按钮样式，即设置颜色方案的魔力的一部分。