W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<!DOCTYPE html> <html> <head> <style> :root { /* 设置 color-scheme 以在浅色和深色之间切换 */ color-scheme: light dark; --light-bg: snow; --light-color: black; --dark-bg: black; --dark-color: snow; } * { background-color: light-dark(var(--light-bg), var(--dark-bg)); color: light-dark(var(--light-color), var(--dark-color)); } .light { color-scheme: light; } .dark { color-scheme: dark; } </style> </head> <body> <h1>CSS light-dark() 函数</h1> <section> <h2>自动模式</h2> <p>此部分将自动响应用户的系统或浏览器设置。 如果用户设置为浅色模式，将使用带有 --light 变量的浅色方案。 如果用户设置为深色模式，将使用带有 --dark 变量的深色方案。</p> </section> <section class="light"> <h2>浅色模式</h2> <p>此部分强制使用 color-scheme: light。</p> </section> <section class="dark"> <h2>深色模式</h2> <p>此部分强制使用 color-scheme: dark。</p> </section> </body> </html>