:root {
    --dons-dark-page: #101114;
    --dons-dark-panel: #1b1d23;
    --dons-dark-panel-alt: #252932;
    --dons-dark-border: #414653;
    --dons-dark-text: #f2f4f8;
    --dons-dark-muted: #b7becb;
    --dons-link: #8fc7ff;
}

body {
    transition: background-color 0.2s ease, color 0.2s ease;
}

body.dons-dark-mode {
    background-color: var(--dons-dark-page) !important;
    color: var(--dons-dark-text);
    color-scheme: dark;
}

body.dons-dark-mode .w3-light-grey {
    background-color: var(--dons-dark-page) !important;
    color: var(--dons-dark-text) !important;
}

body.dons-dark-mode .w3-white,
body.dons-dark-mode .w3-panel,
body.dons-dark-mode .w3-card {
    background-color: var(--dons-dark-panel) !important;
    color: var(--dons-dark-text) !important;
}

body.dons-dark-mode .w3-striped tbody tr:nth-child(even) {
    background-color: var(--dons-dark-panel-alt) !important;
}

body.dons-dark-mode .w3-bordered tr,
body.dons-dark-mode .w3-table-all tr,
body.dons-dark-mode .w3-border {
    border-color: var(--dons-dark-border) !important;
}

body.dons-dark-mode .w3-table,
body.dons-dark-mode .w3-table-all {
    color: var(--dons-dark-text);
}

body.dons-dark-mode th {
    background-color: #20242d;
    color: var(--dons-dark-text);
}

body.dons-dark-mode a:not(.w3-button) {
    color: var(--dons-link);
}

body.dons-dark-mode .w3-text-grey {
    color: var(--dons-dark-muted) !important;
}

body.dons-dark-mode input,
body.dons-dark-mode select,
body.dons-dark-mode textarea {
    background-color: #12141a !important;
    color: var(--dons-dark-text) !important;
    border-color: var(--dons-dark-border) !important;
}

body.dons-dark-mode input::placeholder,
body.dons-dark-mode textarea::placeholder {
    color: var(--dons-dark-muted);
}

.dons-theme-toggle {
    min-height: 38.5px;
}

body.dons-dark-mode .dons-top-bar,
body.dons-dark-mode .w3-bottom .w3-bar {
    background-color: #3f51b5 !important;
}

body.dons-dark-mode .dons-theme-toggle {
    background-color: #ffc107 !important;
    color: #1a237e !important;
}

body.dons-dark-mode .dons-theme-toggle:hover,
body.dons-dark-mode .dons-theme-toggle:focus {
    background-color: #ffd54f !important;
    color: #1a237e !important;
}