#优质博文 #前端 #theme #dark #css
Implementing light-dark()
AI 摘要:作者用新的 light-dark() 函数替换了暗模式。通过简单的语法,我可以在 :root 上设置颜色方案,并在需要时轻松切换颜色。这个方法利用了 CSS 的级联特性,使得所有相关组件能够重新渲染。唯一的限制是 light-dark() 只接受颜色值,而不支持线性渐变。需要将 light-dark() 的结果放入线性渐变中,这使得语法的可读性降低,但可以通过命名良好的自定义属性来解决。
via Trys Mudford's Blog
也是很早的时候看到过。
Reference: 使用 light-dark() 的 CSS 配色方案相关颜色 - web.dev
Implementing light-dark()
AI 摘要:作者用新的 light-dark() 函数替换了暗模式。通过简单的语法,我可以在 :root 上设置颜色方案,并在需要时轻松切换颜色。这个方法利用了 CSS 的级联特性,使得所有相关组件能够重新渲染。唯一的限制是 light-dark() 只接受颜色值,而不支持线性渐变。需要将 light-dark() 的结果放入线性渐变中,这使得语法的可读性降低,但可以通过命名良好的自定义属性来解决。
via Trys Mudford's Blog
也是很早的时候看到过。
Reference: 使用 light-dark() 的 CSS 配色方案相关颜色 - web.dev