external/mailinabox
1
0
Fork 0
mirror of https://github.com/mail-in-a-box/mailinabox.git synced 2024-11-24 02:37:05 +00:00
Code Issues Releases Wiki Activity

Use "smart invert" for dark mode (#2038)

Browse Source 
* 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:
Elsie Hupp 2021-09-19 09:53:03 -04:00 committed by GitHub
parent 91079ab934
commit 353084ce67
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 29 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
management/templates/index.html
View File

@ -65,6 +65,34 @@
.if-logged-in { display: none; } .if-logged-in { display: none; }
.if-logged-in-admin { 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> </style>
<link rel="stylesheet" href="/admin/assets/bootstrap/css/bootstrap-theme.min.css"> <link rel="stylesheet" href="/admin/assets/bootstrap/css/bootstrap-theme.min.css">
</head> </head>