| 1 |
<?php |
| 2 |
// don't call the file directly. |
| 3 |
if (!defined('ABSPATH')) { |
| 4 |
exit; |
| 5 |
} |
| 6 |
|
| 7 |
/* |
| 8 |
* Fall back to the colours the settings screen offers as defaults, so an option |
| 9 |
* saved before these fields existed still produces valid CSS rather than an |
| 10 |
* empty declaration. |
| 11 |
*/ |
| 12 |
$darkify_track = !empty($dark_mode_scrollbar_track_bg) ? $dark_mode_scrollbar_track_bg : '#29292a'; |
| 13 |
$darkify_thumb = !empty($dark_mode_scrollbar_thumb_bg) ? $dark_mode_scrollbar_thumb_bg : '#52565a'; |
| 14 |
?> |
| 15 |
<style type="text/css" class="darkify_inline_css"> |
| 16 |
/* |
| 17 |
* `color-scheme` is what actually makes the browser's own furniture dark: |
| 18 |
* the scrollbar it paints for the page, the ones it paints for every nested |
| 19 |
* scrolling box, and the controls it renders itself. The ::-webkit- rules |
| 20 |
* below can only reach the first of those, and only in Chromium and Safari — |
| 21 |
* which is why the page could be fully dark while the scrollbar beside it |
| 22 |
* stayed light grey. |
| 23 |
*/ |
| 24 |
html.darkify_dark_mode_enabled { |
| 25 |
color-scheme: dark; |
| 26 |
/* Standard property: Firefox, and Chromium 121+. */ |
| 27 |
scrollbar-color: <?php echo esc_attr($darkify_thumb); ?> <?php echo esc_attr($darkify_track); ?>; |
| 28 |
} |
| 29 |
|
| 30 |
/* Chromium and Safari, including scrolling boxes inside the page. */ |
| 31 |
html.darkify_dark_mode_enabled::-webkit-scrollbar, |
| 32 |
html.darkify_dark_mode_enabled *::-webkit-scrollbar { |
| 33 |
width: 12px; |
| 34 |
height: 12px; |
| 35 |
background: <?php echo esc_attr($darkify_track); ?> !important; |
| 36 |
} |
| 37 |
|
| 38 |
html.darkify_dark_mode_enabled::-webkit-scrollbar-track, |
| 39 |
html.darkify_dark_mode_enabled *::-webkit-scrollbar-track { |
| 40 |
background: <?php echo esc_attr($darkify_track); ?> !important; |
| 41 |
} |
| 42 |
|
| 43 |
/* |
| 44 |
* The transparent border plus content-box clipping is what gives the thumb |
| 45 |
* its inset pill shape instead of a full-width slab — the difference |
| 46 |
* between a scrollbar that looks designed and one that looks like a default. |
| 47 |
*/ |
| 48 |
html.darkify_dark_mode_enabled::-webkit-scrollbar-thumb, |
| 49 |
html.darkify_dark_mode_enabled *::-webkit-scrollbar-thumb { |
| 50 |
background-color: <?php echo esc_attr($darkify_thumb); ?> !important; |
| 51 |
border: 3px solid transparent !important; |
| 52 |
border-radius: 8px !important; |
| 53 |
background-clip: content-box !important; |
| 54 |
} |
| 55 |
|
| 56 |
html.darkify_dark_mode_enabled::-webkit-scrollbar-corner, |
| 57 |
html.darkify_dark_mode_enabled *::-webkit-scrollbar-corner { |
| 58 |
background-color: <?php echo esc_attr($darkify_track); ?> !important; |
| 59 |
} |
| 60 |
|
| 61 |
html.darkify_dark_mode_enabled::-webkit-scrollbar-button, |
| 62 |
html.darkify_dark_mode_enabled *::-webkit-scrollbar-button { |
| 63 |
background-color: transparent !important; |
| 64 |
background-repeat: no-repeat !important; |
| 65 |
background-size: contain !important; |
| 66 |
background-position: center !important; |
| 67 |
} |
| 68 |
</style> |
| 69 |
|
