Dark Mode—现代浏览器纯CSS黑暗模式

vanishcode commented 4 years ago

其实就是一个新的媒体查询啦

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>dark-light</title>
    <style>
      .day {
        background: #eee;
        color: black;
      }
      .night {
        background: #333;
        color: white;
      }

      @media (prefers-color-scheme: dark) {
        .day.dark-scheme {
          background: #333;
          color: white;
        }
        .night.dark-scheme {
          background: black;
          color: #ddd;
        }
      }

      @media (prefers-color-scheme: light) {
        .day.light-scheme {
          background: white;
          color: #555;
        }
        .night.light-scheme {
          background: #eee;
          color: black;
        }
      }

      .day,
      .night {
        display: inline-block;
        padding: 1em;
        width: 7em;
        height: 2em;
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <div class="day">Day (initial)</div>
    <div class="day light-scheme">Day (changes in light scheme)</div>
    <div class="day dark-scheme">Day (changes in dark scheme)</div>
    <br />

    <div class="night">Night (initial)</div>
    <div class="night light-scheme">Night (changes in light scheme)</div>
    <div class="night dark-scheme">Night (changes in dark scheme)</div>
  </body>
</html>

在这里手动切换查看效果：

t0128ff51237b095671

可以看到是实时的（不用刷新网页）：（gif 1m比较大，加载比较慢）

t012a784818649249bd

兼容性：

t017df6dab24fd5504b

可以看到，基本上只有比较新的浏览器才支持这个特性。不过这些浏览器厂商还是狠啊，很多特性标准还在w3c草案阶段，那边已经实现了，确实有点屌 😆

相关链接：

raptazure commented 4 years ago

这个好实用！（狠的是在说 Mozilla 嘛哈哈哈哈

vanishcode commented 4 years ago

这个好实用！（狠的是在说 Mozilla 嘛哈哈哈哈

这几家都挺狠的，Chrome一直挺狠，Mozilla是最近两年变狠的。不少api都是草案阶段他那边直接实现发布了，比如web usb，media stream image capture之类～ 😂

raptazure commented 4 years ago

这个好实用！（狠的是在说 Mozilla 嘛哈哈哈哈

这几家都挺狠的，Chrome一直挺狠，Mozilla是最近两年变狠的。不少api都是草案阶段他那边直接实现发布了，比如web usb，media stream image capture之类～ 😂

奥奥这样，最近没怎么关注 Chrome 那边，不过自从 Firefox 上了 Quantum 感觉就挺狠哈哈哈哈，内核用 rust 重写是真的优秀

vanishcode commented 4 years ago

这个好实用！（狠的是在说 Mozilla 嘛哈哈哈哈

这几家都挺狠的，Chrome一直挺狠，Mozilla是最近两年变狠的。不少api都是草案阶段他那边直接实现发布了，比如web usb，media stream image capture之类～ 😂

奥奥这样，最近没怎么关注 Chrome 那边，不过自从 Firefox 上了 Quantum 感觉就挺狠哈哈哈哈，内核用 rust 重写是真的优秀

是的。。UI也是，以前的Firefox真的不怎么好看。。。

vanishcode / Blog

Dark Mode—现代浏览器纯CSS黑暗模式 #107