From 353084ce6726e7aaee9b9df1c87dd03df29c5f9e Mon Sep 17 00:00:00 2001 From: Elsie Hupp <9206310+elsiehupp@users.noreply.github.com> Date: Sun, 19 Sep 2021 09:53:03 -0400 Subject: [PATCH] Use "smart invert" for dark mode (#2038) * Use "smart invert" for dark mode Signed-off-by: Elsie Hupp <9206310+elsiehupp@users.noreply.github.com> * Add more contrast to form controls Co-authored-by: Joshua Tauberer --- management/templates/index.html | 30 +++++++++++++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) diff --git a/management/templates/index.html b/management/templates/index.html index 081d527f..115693aa 100644 --- a/management/templates/index.html +++ b/management/templates/index.html @@ -62,9 +62,37 @@ ol li { margin-bottom: 1em; } - + .if-logged-in { display: none; } .if-logged-in-admin { display: none; } + + /* 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; + } + + /* Override Boostrap theme here to give more contrast. The black turns to white by the filter. */ + .form-control { + color: black !important; + } + + /* 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); + } + }