Add dark theme

It uses prefers-color-scheme CSS @media selector to determine which
theme is used.

Support table: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme#browser_compatibility
This commit is contained in:
Alexey Yerin 2021-03-15 19:37:54 +03:00
parent 5f5936702d
commit 1526372946
1 changed files with 15 additions and 0 deletions

View File

@ -57,3 +57,18 @@ body {
/* Stretch to form width */ /* Stretch to form width */
width: 100%; width: 100%;
} }
@media screen and (prefers-color-scheme: dark) {
body {
background-color: #212529;
color: #f8f9fa;
}
.form__input,
.form__button,
.textarea {
background-color: #131618;
border-color: #495057;
color: #f8f9fa;
}
}