@media (prefers-color-scheme: dark) {

    :root {
        color-scheme: dark;
    }

    body {
        background-color: @backgound-color-dark;
        color: @text-color-dark;

        a {
            color: @link-text-color-dark;

            &:hover{
                border-bottom-color: @link-text-color-dark;
            }
        }

        .btn {

            &.btn-primary {
                &:hover {
                    background-color: darken(@link-text-color-dark, 5%);
                }
            }

            &.btn-grey {
                background-color: @grey-btn-background-dark;

                &:hover {
                    background-color: lighten(@grey-btn-background-dark, 5%);
                }
            }
        }

        .entry {
            background-color: @panel-background-color-dark;

            &.selected {
                box-shadow: @link-text-color-dark 0 0 0 1.5px;
                background-color: @grey-btn-background-dark;
            }

            .entry-link {
                a {
                    color: @text-color-dark;
                }
            }

            .entry-time {
                color: @text-grey-color-dark;
            }

            .entry-remove {
                svg {
                    fill: @text-color-dark;
                }

                &:hover {
                    background-color: @backgound-color-dark;
                }
            }
        }

        &.main {
            .wrapper {
                .sidebar {
                    background-color: @backgound-color-dark;
                    border-right-color: @border-color-dark;

                    .container {

                        &>.search {
                            &>.content {
                                .search-structure {
                                    background-color: @input-background-dark;
                                    border-color: @border-color-dark;

                                    &.focus {
                                        box-shadow: 0 0 0 1px lighten(@border-color-dark, 10%) inset;
                                        border-color: lighten(@border-color-dark, 10%);
                                    }

                                    svg {
                                        fill: @text-color-dark;
                                    }

                                    .search-clear {
                                        &:hover {
                                            background-color: @backgound-color-dark;
                                        }
                                    }
                                }
                            }
                        }

                        &>.footer {
                            border-top-color: @border-color-dark;
                        }
                    }
                }

                .history-container {
                    .gutter {
                        .remove-confirmation {
                            background-color: @panel-background-color-dark;
                        }
                    }
                }
            }
        }

        .form-group {

            input[type=number] {
                background-color: @backgound-color-dark;
                border-color: #858585;
                outline: none;
            }

            .toggle-switch {
                input {
                    background-color: @backgound-color-dark;
                    border-color: #858585;
                }

                .dot {
                    background-color: #fff;
                }
            }
        }

        .modal {
            .modal-content {
                background-color: @panel-background-color-dark;

                .modal-heading {
                    .close {
                        svg {
                            fill: @text-color-dark;
                        }
                        &:hover {
                            background-color: @backgound-color-dark;
                        }
                    }
                }
            }
        }
    }

    .ic__container {
        background: darken(@panel-background-color-dark, 5%);
    }

    .ic__month-select,
    .ic__year-select {
        background-color: @input-background-dark;
    }

    .ic__prev div {
        border-right-color: @text-color-dark;
    }

    .ic__next div {
        border-left-color: @text-color-dark;
    }

    .ic__header,
    .ic__prev,
    .ic__next {
        background-color: @panel-background-color-dark;
    }

    .ic__prev:hover,
    .ic__next:hover {
        background-color: lighten(@border-color-dark, 10%);
    }

    .ic__week-head td {
        border: 1px solid @border-color-dark;
        color: @text-grey-color-dark;
    }

    .ic__days td {
        border: 1px solid @border-color-dark;
        color: @text-color-dark;
    }

    .ic__days .ic__day {
        background: lighten(@backgound-color-dark, .5%);
    }

    .ic__days .ic__day:hover {
        background: darken(@link-text-color-dark, 30%);
    }

    .ic__days .ic__day-empty {
        background-image: linear-gradient(135deg,
        darken(@border-color-dark, 2%) 25%,
        darken(@border-color-dark, 5%) 25%,
        darken(@border-color-dark, 5%) 50%,
        darken(@border-color-dark, 2%) 50%,
        darken(@border-color-dark, 2%) 75%,
        darken(@border-color-dark, 5%) 75%,
        darken(@border-color-dark, 5%) 100%);

        background-size: 5px 5px;
    }

    .ic__days .ic__day_state_current {
        background: darken(@link-text-color-dark, 20%);
    }

    .ic__days .ic__day_state_selected {
        background: lighten(@border-color-dark, 10%);
        color: @text-color-dark;
    }
}