mirror of
https://github.com/mail-in-a-box/mailinabox.git
synced 2024-12-24 07:37:04 +00:00
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 <jt@occams.info>
This commit is contained in:
parent
91079ab934
commit
353084ce67
@ -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);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="/admin/assets/bootstrap/css/bootstrap-theme.min.css">
|
||||
</head>
|
||||
|
Loading…
Reference in New Issue
Block a user