search

varletjs / varlet

A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.
https://varlet.pages.dev
MIT License
4.81k stars 602 forks source link

跟随系统偏好设置深浅色模式 #1626

Closed gxres042 closed 1 month ago

gxres042 commented 1 month ago

Varlet 目前似乎不支持跟随系统偏好设置深浅色模式。

我不太清楚这是不是因为 MD2 和 MD3 兼容导致的，但如果是的话，我想给个小小小小小的建议：

大概就是这样，可能描述的不是很准 a661736ed950bcadd16f3ea64bf2292f

haoziqaq commented 1 month ago

主题跟随系统偏好通过 window.matchMedia('(prefers-color-scheme: dark)').matches 判断一下就可以实现。我们认为组件库只暴露一些相对原子的能力就可以了，具体怎么使用还是随用户喜欢比较好，这也更利于按需引入。

如果很多人不知道这个功能怎么做，我们可以写到文档里，可能比改 api 或是增加一些 api 要好一些。

gxres042 commented 1 month ago

主题跟随系统偏好通过 window.matchMedia('(prefers-color-scheme: dark)').matches 判断一下就可以实现。我们认为组件库只暴露一些相对原子的能力就可以了，具体怎么使用还是随用户喜欢比较好，这也更利于按需引入。

如果很多人不知道这个功能怎么做，我们可以写到文档里，可能比改 api 或是增加一些 api 要好一些。

这个我当然知道，但麻烦的点其实就是：我自己的网站（博客）提供了自动、浅色和深色三种模式。 我的博客目前还在使用 Bulma CSS 库，它是通过一个 html class="theme-dark" 实现深色模式的启用，所以当前我的解决办法是用 @nuxtjs/color-mode 实现。 现在 varlet 已经解决了两种，但第三种就恰恰没一个好的解决办法...? 如果有更简单的办法，那确实比改 API 要方便得多

haoziqaq commented 1 month ago

第三种指的是什么？自动么？

gxres042 commented 1 month ago

第三种指的是什么？自动么？

对的，就是自动

haoziqaq commented 1 month ago

https://github.com/varletjs/varlet-app-template-lite/blob/main/src/use/useDark.ts

可以参考这里。

gxres042 commented 1 month ago

那我先关了这个 issue，等我研究一下（