/* * `color-scheme` is what actually makes the browser's own furniture dark: * the scrollbar it paints for the page, the ones it paints for every nested * scrolling box, and the controls it renders itself. The ::-webkit- rules * below can only reach the first of those, and only in Chromium and Safari â?? * which is why the page could be fully dark while the scrollbar beside it * stayed light grey. */ html.darkify_dark_mode_enabled { color-scheme: dark; /* Standard property: Firefox, and Chromium 121+. */ scrollbar-color: #52565a #29292a; } /* Chromium and Safari, including scrolling boxes inside the page. */ html.darkify_dark_mode_enabled::-webkit-scrollbar, html.darkify_dark_mode_enabled *::-webkit-scrollbar { width: 12px; height: 12px; background: #29292a !important; } html.darkify_dark_mode_enabled::-webkit-scrollbar-track, html.darkify_dark_mode_enabled *::-webkit-scrollbar-track { background: #29292a !important; } /* * The transparent border plus content-box clipping is what gives the thumb * its inset pill shape instead of a full-width slab â?? the difference * between a scrollbar that looks designed and one that looks like a default. */ html.darkify_dark_mode_enabled::-webkit-scrollbar-thumb, html.darkify_dark_mode_enabled *::-webkit-scrollbar-thumb { background-color: #52565a !important; border: 3px solid transparent !important; border-radius: 8px !important; background-clip: content-box !important; } html.darkify_dark_mode_enabled::-webkit-scrollbar-corner, html.darkify_dark_mode_enabled *::-webkit-scrollbar-corner { background-color: #29292a !important; } html.darkify_dark_mode_enabled::-webkit-scrollbar-button, html.darkify_dark_mode_enabled *::-webkit-scrollbar-button { background-color: transparent !important; background-repeat: no-repeat !important; background-size: contain !important; background-position: center !important; }