想必已经有不少小伙伴在学习vue3或在项目中使用了；vue3的文档结构友好，且一直以来对中文文档的支持都很棒 那么对于官方的文档，我们除了学习vue3的语法和使用之外，还有什么文档之外的东西能够学习的呢？ 有，深色模式！尤大大对于深色模式的适配让我又学了几招。深色模式 深色模式的切换并不神秘，vue3文档对其的实现其实很简单，来看看关键代码。 vue3文档使用了vuejstheme主题，该主题提供关于深色模式的实现逻辑。 首先是大量使用了css变量：根元素实则颜色变量：root｛vtcwhite：ffffff；vtcwhitesoft：f9f9f9；vtcwhitemute：f1f1f1；vtcblack：1a1a1a；vtcblackpure：000000；vtcblacksoft：242424；vtcblackmute：2f2f2f；。。。｝ 然后又添加了一个。dark类：用于浅色的颜色变量：root｛vtcbg：var（vtcwhite）；vtcbgsoft：var（vtcwhitesoft）；vtcbgmute：var（vtcwhitemute）；。。。｝用于深色的颜色变量。dark｛vtcbg：var（vtcblack）；vtcbgsoft：var（vtcblacksoft）；vtcbgmute：var（vtcblackmute）；。。。｝ 后面在页面开发中关于颜色的css都会使用这些颜色变量。 接着就是用户交互的控制逻辑：先获取到html元素的class列表：constclassListdocument。documentElement。classList切换显示模式class的函数：constsetClass（dark：boolean）classList〔dark？add：remove〕（dark）用户点击时调用函数：setClass（（isDark！isDark）） 以上是切换显示模式的最简实现代码。 在编写css时，文档还给颜色的切换添加了过渡效果，让切换体验更加丝滑。。description｛color：var（vtctext2）；transition：color0。5s；｝自动跟随系统外观 这里有一点值得注意的是，深色模式的切换是通过用户手动触发的，为什么我们在切换系统外观的时候，网页会检测到当前系统的显示模式，自动进行同步呢？ 文档默认是浅色模式，但也支持跟随系统，这主要是通过媒体查询来实现的。 以下代码中的query是一个用来判定Document是否匹配特定媒体查询的对象，在这里的preferscolorscheme：dark用于检测用户是否有将系统的主题色设置为暗色。constquerywindow。matchMedia（（preferscolorscheme：dark））letisDarkuserPreferenceauto？query。matches：userPreferencedark 当用户将外观改变为深色的时候，query。matches的值为true，vue3文档就会给html元素添加。dark来使用深色模式。 vue3文档注入了一个自执行的匿名函数来检测系统外观的变化。；（（）｛constsavedlocalStorage。getItem（vuethemeappearance）if（savedauto？window。matchMedia（（preferscolorscheme：dark））。matches：saveddark）｛document。documentElement。classList。add（dark）｝｝）（） 打开控制台可以看到这段编译后的代码： 关键代码 vue3文档在做深色模式时，整个过程考虑的很充分，用户切换的交互关键逻辑代码如下：functionuseAppearance（）｛letuserPreferencelocalStorage。getItem（storageKey）autoconstquerywindow。matchMedia（（preferscolorscheme：dark））constclassListdocument。documentElement。classListletisDarkuserPreferenceauto？query。matches：userPreferencedarkconstsetClass（dark：boolean）classList〔dark？add：remove〕（dark）query。onchange（e）｛if（userPreferenceauto）｛setClass（（isDarke。matches））｝｝consttoggle（）｛setClass（（isDark！isDark））localStorage。setItem（storageKey，（userPreferenceisDark？query。matches？auto：dark：query。matches？light：auto））｝returntoggle｝ 而在新版本的代码中，则使用了vueusecore来简化代码：import｛UseDarkOptions，useDark，useToggle｝fromvueusecoreexporttypeUseAppearanceOptionsUseDarkOptionsexportfunctionuseAppearance（options：UseAppearanceOptions｛｝）｛constisDarkuseDark（｛storageKey：vuethemeappearance，。。。options｝）consttoggleuseToggle（isDark）return｛isDark，toggle｝｝总结 最后来总结一下，vue3文档是如何实现深色模式的：给根元素（：root）添加css颜色变量；创建一个深色模式的。darkclass颜色变量；利用document。documentElement。classList来切换class；用localStorage来持久化用户的选择；用preferscolorscheme：dark监测用户的系统外观用自执行的函数来同步系统外观； 一个完整而又全面的深色模式的实现示例，你学会了吗？不妨也在你的项目或博客上试试吧欢迎关注我的个人公众号JSHub：提供最新的开发信息速报，优质的技术干货推荐。 或是查看我的个人博客：Devcursor。 点赞：如果有收获和帮助，请点个赞支持一下！ 收藏：欢迎收藏文章，随时查看！ 评论：欢迎评论交流学习，共同进步！
剖析中国古代法律制度缘何重刑轻民，民可使由之，不可使知之引言当今的中国毫无疑问是一个法治社会，法律成为了维护社会最重要的准绳，也成为了中国人民心中铁一般的规律。事实上，法律在中国古代社会中同样重要。只不过由于统治者的个人权威实在太过强大一代霸主秦始皇，为啥49岁便夭折了？这与他的一大嗜好有关说到我国历史上的秦朝，人们都会用霸秦来评价它，而作为缔造秦朝的开国皇帝秦始皇，更是引起了后人的热议。因为他不仅凭一己之力灭了六国，还建立了我国历史上第一个统一的封建王朝，秦朝或许也张富清离世，妻子孙玉兰灵前痛哭她这些年的付出，真让人心疼！近日，共和国勋章获得者张富清老先生病逝的消息，令无数国人恸哭。张富清的遗体送别仪式在来凤县殡仪馆举行，他87岁的妻子孙玉兰在灵前失声痛哭，久久不能自已。张富清同志深藏功名60年，曾武则天退位时群臣皆喜，唯有一人垂头痛哭，1年后没哭的人全死了作为我国历史上唯一的女皇帝，武则天的一生可谓波澜壮阔。她历经艰辛，从一个小小的才人一步步走到男权社会的至尊之位，上承贞观，下启开元，为唐朝的强盛做出了很大的贡献。但是在晚年之时，却辽代公主血红色棺材之谜，考古学家看到大喊危险，快跑古墓的发掘可不是胆小鬼的活儿，因为很多墓葬里面总是存在着难以估量的危险，比如辽代公主棺材血红色棺材之谜，考古人员看到都被这一幕震惊到了，随后大喊危险，快跑在2003年3月9号时，内秦国神童甘罗十二岁官拜上卿，让嬴政吃到公鸡蛋了吗？在阅读文章前，麻烦您点击一下关注，既能给予作者创作的动力，又便于您能快速的寻找到文章，给您更好的阅读体验，感谢您的支持！要说三国时期的神童，名气最大的无疑是曹操之子曹冲了。那么战国都铎王朝，贵族女性自我权力显现！选择太自由都铎时期一些贵族女性再婚时选了比自己社会地位低年龄小很多的男性作为再婚对象，有的甚至属于贵族集团之外，不仅没有贵族头衔而且出身卑微。虽然这样的再婚选择并不是都铎王朝时期贵族女性再婚他是原空军司令，抗美援朝曾击落9架敌机，88年授上将，享年94岁少时他参加革命，协助组织与众多同志一起与日本敌人作斗争，晚年被评为2020年感动中国年度人物。他的一生曾立下过无数赫赫战功，曾荣获三级解放勋章与独立功勋荣誉章。除此之外他更是一位王通胀加息衰退解析2022年美国经济高频词新华社华盛顿12月23日电（记者许缘邓仙来）2022年，美国通胀不断攀升并长期维持在历史高位，扰乱民众正常生活和经济秩序。为抑制数十年不遇的高通胀，美国联邦储备委员会自3月起大规模怪兽充电手握重金，还是撕开了共享经济的遮羞布编辑于斌出品潮起网于见专栏共享模式曾经有多风光，如今就有多落寞。共享模式中排行第一的共享单车们已经死的死，卖身的卖身，早已经没有了当初的风光。现如今，风水轮流转，轮到了共享充电宝们广州车展有望亮相，明年迎来国产奔驰EQESUV奔驰虽然是进入新能源阶段较早的一个豪华品牌，但早期EQ系列的产品，欧洲总部似乎对于奔驰这一代产品有着过高的自信，在内燃机时代沉淀的很多东西，到了电动汽车时代没办法延续下来，强行给自