From c9926ebd3a98d3584fcb1f21a708e14fc39846c6 Mon Sep 17 00:00:00 2001 From: Elsie Hupp <9206310+elsiehupp@users.noreply.github.com> Date: Mon, 13 Sep 2021 12:22:09 -0400 Subject: [PATCH] Use "smart invert" for dark mode Signed-off-by: Elsie Hupp <9206310+elsiehupp@users.noreply.github.com> --- management/templates/index.html | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/management/templates/index.html b/management/templates/index.html index 12f6ad8e..82269908 100644 --- a/management/templates/index.html +++ b/management/templates/index.html @@ -62,6 +62,29 @@ ol li { margin-bottom: 1em; } + /* The below only gets used if it is supported */ + @media (prefers-color-scheme: dark) { + /* Invert invert lightness but not hue */ + html { + filter: invert(100%) hue-rotate(180deg); + } + + /* Set explicit background color (necessary for Firefox) */ + html { + background-color: #111; + } + + /* Revert the invert for the navbar */ + button, div.navbar { + filter: invert(100%) hue-rotate(180deg); + } + + /* Revert the revert for the dropdowns */ + ul.dropdown-menu { + filter: invert(100%) hue-rotate(180deg); + } + } +