V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
kawaiidora
V2EX  ›  Web Dev

如何在 Edge 以及其他 chromium 上实现暗色滚动条呢?

  •  
  •   kawaiidora · Jan 25, 2021 · 2544 views
    This topic created in 1917 days ago, the information mentioned may be changed or developed.
    当系统偏好暗色主题的时候,可以利用 @media (prefers-color-scheme: dark)设置其他元素的配色。
    而浏览 github 的时候发现,最右侧的滚动条也变成了暗色模式。显然不是利用::webkit-scrollbar 实现的,会改变整个滚动条的形状。

    而利用开发者工具在 css 里也没有 scroll 字样,可能有简单的实现方法但楼主没发现……

    在 windows 上看,滚动条的样式变成了:原来的形状不变,只有配色变了。就像 win10 设置暗色模式后,打开命令提示符看到的那样。

    v2ex 和 twitter 在 firefox 也做出了暗色滚动条,在 edge 上反而没有。也许是方法不一样。
    2 replies    2021-01-25 21:42:24 +08:00
    codehz
        1
    codehz  
       Jan 25, 2021   ❤️ 1
    <meta name="color-scheme" content="light dark">
    codehz
        2
    codehz  
       Jan 25, 2021
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   5315 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 34ms · UTC 01:18 · PVG 09:18 · LAX 18:18 · JFK 21:18
    ♥ Do have faith in what you're doing.