Chrome

鉻:更改捲動條顏色

  • May 27, 2021

是否可以在 Chromium 瀏覽器中更改捲動條的顏色,而無需安裝另一個擴展程序?

也許通過在某處修改一些css文件?

我在 Debian 10 上使用 chromium 83。

我知道如何在 Firefox 中實現這一點。我剛剛添加了以下幾行userContent.css

html,body{
   scrollbar-color: #B63C29 #555555 !important;
}

我可以做一些類似的事情來為 Chromium 實現相同的目標嗎?

更新:

我嘗試了以下解決方案,但沒有效果:

  1. 我已經創建了目錄~/.config/chromium/Default/User StyleSheets/
  2. Custom.css在其中創建文件
  3. 添加了以下程式碼來測試它:
   .scrollable-element {
     scrollbar-color: red yellow;
   }

沒有什麼。沒有效果。

有人可以向我展示如何將捲動條更改為紅色的簡單工作範例嗎?

如果沒有其他工作,你可能需要使用某種擴展。基於這個問題這個答案以及這個我做到了:

$ mkdir CustomCSS && cd CustomCSS
$ cat > manifest.json << EOF

{
   "name": "My Style Sheet",
   "content_scripts": [
       {
         "matches": ["*://*/*"],
         "css": ["Custom.css"]
       }
   ],
   "version": "1.0.0",
   "description": "User StyleSheet replacement",
   "manifest_version": 2
}
EOF
$ cat > Custom.css << EOF

::-webkit-scrollbar {
   height: 12px;
   width: 12px;
   background: yellow;
}

::-webkit-scrollbar-thumb {
   background: red;
   -webkit-border-radius: 1ex;
   -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}

::-webkit-scrollbar-corner {
   background: #000;
}
EOF

chrome://extensions開發者模式下:載入解壓擴展 -> 選擇路徑/到/CustomCSS

就是這樣。有用。黃色背景上的紅色捲動條。

檢查 chrome://memory顯示它使用了約 1.8MiB 的記憶體。

Ed:如果你想覆蓋網站的樣式,你可以嘗試使用!important規則

background: red !important;

引用自:https://unix.stackexchange.com/questions/650981