vnshed/www/css/themes.css

@media (prefers-color-scheme: light) {
    body {
        background-color: #EFEFF3;
    }

    p {
        color: black;
    }

    .input {
        background-color: #F4F4F4;
        color: black;
    }

    .input::placeholder {
        color: black;
    }

    .plus {
        background-color: #5C8DC0;
        color: white;
    }

    .plus:hover {
        background-color: #567aa1;
    }

    .horisontal-item {
        background-color: #5C8DC0;
        color: white;
    }

    .horisontal-item:hover {
        background-color: #567aa1;
    }

    .cover .image {
        background-color: white;
    }

    .create {
        background-color: #D9D9D9;
    }

    .create button {
        background-color: #3CAA36;
        color: white;
    }

    .create button:hover {
        background-color: #3b8d37;
        color: white;
    }

    .fields {
        background-color: white;
    }

    .queue-item {
        background-color: #5C8DC0;
        color: white;
    }

    .queue-item p {
        color: white;
    }

    .imgbutton {
        color: white;
    }

    .month {
        background: #5C8DC0;
    }

    .month ul li {
        color: white;
    }

    .weekdays {
        background-color: #F4F4F4;
    }

    .weekdays li {
        color: black;
    }

    .days {
        background: #F4F4F4;
    }

    .days li {
        color: black;
    }

    .days li .active {
        color: white !important;
        background: #5C8DC0;
    }

    .remove {
        background-color: #FC1F1C;
    }

    .remove:hover {
        background-color: #d32522;
    }

    .edit {
        background-color: #1BC304;
    }

    .edit:hover {
        background-color: #1c9d0b;
    }
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #0F1011;
    }

    p {
        color: white;
    }

    .input {
        background-color: #192431;
        color: white;
    }

    .input::placeholder {
        color: white;
    }

    .plus {
        background-color: #2791FF;
        color: white;
    }

    .plus:hover {
        background-color: #2c7dd4;
    }

    .horisontal-item {
        background-color: #2791FF;
        color: white;
    }

    .horisontal-item:hover {
        background-color: #2c7dd4;
    }

    .cover .image {
        background-color: #131A22;
    }

    .create {
        background-color: #192431;
    }

    .create button {
        background-color: #3CAA36;
        color: white;
    }

    .create button:hover {
        background-color: #3b8d37;
        color: white;
    }

    .fields {
        background-color: #131A22;
    }

    .queue-item {
        background-color: #2791FF;
        color: white;
    }

    .queue-item p {
        color: white;
    }

    .imgbutton {
        color: white;
    }

    .month {
        background: #2791FF;
    }

    .month ul li {
        color: white;
    }

    .weekdays {
        background-color: #192431;
    }

    .weekdays li {
        color: white;
    }

    .days {
        background: #192431;
    }

    .days li {
        color: white;
    }

    .days li .active {
        color: white !important;
        background: #2791FF;
    }

    .remove {
        background-color: #FC1F1C;
    }

    .remove:hover {
        background-color: #d32522;
    }

    .edit {
        background-color: #1BC304;
    }

    .edit:hover {
        background-color: #1c9d0b;
    }
}