摘要: 想要从​@mixin themeify {@each $theme-name, $theme-map in $themes {……方案转为普通方案如何办,sass变量如何自动转为css变量实现主体 阅读全文
posted @ 2020-12-11 22:58 zhoulujun 阅读(1655) 评论(0) 推荐(0) 编辑
摘要: 在《DarkMode(1):产品应用深色模式分析》提过,单纯反转是不行的。但是,把不需要反转的,在反转过来。或者用js,给想要反转的,加上反转样式,再对其他的做微调。这样个人觉得,开发成本是最低的 @media (prefers-color-scheme: dark) { // one .app{ 阅读全文
posted @ 2020-12-11 22:55 zhoulujun 阅读(597) 评论(0) 推荐(0) 编辑
摘要: 深色模式实现起来有很多种。但是最简易的还是 :not(img) { filter: invert(100%) hue-rotate(180deg); } 最舒服。对于不是很复杂的页面,足够了 阅读全文
posted @ 2020-12-11 22:49 zhoulujun 阅读(517) 评论(0) 推荐(0) 编辑
摘要: 暗黑模式实现,最初的设计,就是参考之前的主题模式。所谓多套主题/配色/皮肤,就是我们很常见的换肤功能。换肤简单的实现就是更换 css实现不同样式呈现不同肤色。 之前做不同颜色的皮肤,暗黑模式可以单做其中的一种黑色暗黑主题。 通用的方法,就是less、sass、post-css,把颜色抽离出变量。然后 阅读全文
posted @ 2020-12-11 22:42 zhoulujun 阅读(1312) 评论(0) 推荐(0) 编辑
摘要: Dark Mode 并不是简单的颜色反转!在界面色彩复杂一些的情况下,直接的颜色反转就完全没法用了。苹果是如何为 iOS 设计 Dark Mode 的?Dark Mode 的设计难点在哪?为什么Dark Mode变得越来越流行 阅读全文
posted @ 2020-12-11 22:31 zhoulujun 阅读(545) 评论(0) 推荐(1) 编辑