From 1fa9f276194fc638234967a4ddf53b68b03b9e74 Mon Sep 17 00:00:00 2001 From: Alexandre Iooss Date: Mon, 26 Dec 2022 22:57:04 +0100 Subject: [PATCH] Theme browser scrollbar Hint current color-scheme to the browser. This enables chromium-based browsers to change the scrollbar color according to the current theme. --- static/style.css | 6 ++++++ static/themes/gruvboxlight.css | 5 +++++ static/themes/light.css | 5 +++++ 3 files changed, 16 insertions(+) diff --git a/static/style.css b/static/style.css index 500646d..2b065a9 100644 --- a/static/style.css +++ b/static/style.css @@ -26,6 +26,9 @@ --highlighted: #333; --visited: #aaa; --shadow: 0 1px 3px rgba(0, 0, 0, 0.5); + + /* Hint color theme to browser for scrollbar */ + color-scheme: dark; } /* Browser-defined light theme */ @@ -42,6 +45,9 @@ --highlighted: white; --visited: #555; --shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + + /* Hint color theme to browser for scrollbar */ + color-scheme: light; } } diff --git a/static/themes/gruvboxlight.css b/static/themes/gruvboxlight.css index d39f8e9..49389a5 100644 --- a/static/themes/gruvboxlight.css +++ b/static/themes/gruvboxlight.css @@ -11,3 +11,8 @@ --highlighted: #fbf1c7; --shadow: 0 1px 3px rgba(0, 0, 0, 0.25); } + +html:has(> .gruvboxlight) { + /* Hint color theme to browser for scrollbar */ + color-scheme: light; +} diff --git a/static/themes/light.css b/static/themes/light.css index 1fe0387..ad73b2d 100644 --- a/static/themes/light.css +++ b/static/themes/light.css @@ -11,4 +11,9 @@ --highlighted: white; --visited: #555; --shadow: 0 1px 3px rgba(0, 0, 0, 0.1); +} + +html:has(> .light) { + /* Hint color theme to browser for scrollbar */ + color-scheme: light; } \ No newline at end of file