极简白
来源：9-6 DarkMode 在复杂应用中的实现
别人都说我可帅
2023-03-30
老师，那个dark极夜黑，因为我们在tailwind设置了，然后每个元素也都加了dark:xxx，这我能理解。但是这个 light 是什么时候蹦出来的呀？好像都没有设置light，为什么不会报错并且还能回到白色状态？我是以为换成极简白的时候直接把类名去掉
写回答
1回答
-
CoderVi
2023-03-30
同学你是问老师在哪里写过这个 'light' 吗？具体的位置是utils文件夹下面的theme.js。tailwind的dark模式生效的前提是html标签的类名中有dark这个类，所以像你说的去掉类名也是可以生效的，改成其他类名也可以。使用 'light' 一来更加语义化，直白易懂，二来看到老师的这一行代码中用到的prefers-color-scheme：
matchMedia = window.matchMedia('(prefers-color-scheme: dark)')prefers-color-scheme - CSS：层叠样式表 | MDN (mozilla.org)这个媒体特性中，就是用 'light' 表示用户已告知系统他们选择使用浅色主题的界面，'dark' 表示系统是深色主题，所以将类名设置成 'light' 可以提高代码的可读性，同时也方便以后进行其他主题相关的操作。
（纯属自己摸索的，说的不一定对，以老师回复为准）
212023-03-30
相似问题