.theme_dark {
    --my-bgcolor: rgb(9, 31, 44);
    --my-thead-bgcolor: rgb(12, 63, 93);
    --my-tr-bgcolor-odd: rgb(6, 38, 56);
    --my-tr-bgcolor-even: rgb(9, 31, 44);
    --my-tr-bgcolor-hover: darkslategray;

    --my-grid-line-color: rgb(50, 50, 50);
    --my-td-border-color: rgb(50, 50, 50);
    --my-th-border-color: rgb(76, 82, 82);

    --my-error-color: hsl(0, 63%, 41%);
    --outline-color-error: hsl(0, 63%, 41%);
    --warning_text_color: hsl(0, 63%, 41%);

    --outline-color-success: green;
    --outline-color-warning: orange;

    --sql-statements-pane-bgcolor: darkslategrey;

    --my-bgcolor-lighter: rgb(29, 51, 74);
    --my-bgcolor-darker: #000;

    --my-textcolor: #bbb;

    --my-link-color: rgb(79, 156, 205);

    --record_archived_bgcolor: darkred;
    --record_future_bgcolor: darkolivegreen;

    dialog {
        background-color: var(--my-bgcolor);
    }
}

.theme_dark #appx_body_main,
.theme_dark .my-dialog-main {
    color: var(--my-textcolor);

    th {
        border-color: var(--my-th-border-color) !important;
    }

    td {
        border-color: var(--my-td-border-color) !important;
    }

    a {
        color: var(--my-link-color);

        &:hover {
            /* this mix both at 50%, resulting in pink */
            color: color-mix(in srgb, red, white);
        }
    }

    .repeatable-itemx:nth-child(2n) {
        background-color: var(--my-bgcolor);
    }

    .repeatable-itemx:nth-child(2n+1) {
        background-color: color-mix(in srgb, var(--my-bgcolor) 90%, yellow);
    }

    pre {
        white-space: pre-wrap;
        word-break: break-word;
        scrollbar-color: red var(--my-bgcolor-darker);
    }

    .grid-data-row:hover {
        background-color: inherit;
        filter: brightness(160%);
    }

    button:not(.btnx) {
        background-color: darkgrey;
    }

    hr {
        border-top: 1px solid darkolivegreen;
    }

    select>option {
        color: var(--my-textcolor);
    }

    select>option:checked {
        color: black;
        background-color: lightskyblue;
    }

    input,
    select,
    textarea {
        background-color: var(--my-bgcolor-lighter) !important;
        color: var(--my-textcolor) !important;
        caret-color: lightblue !important;
    }

    input[type=checkbox] {
        accent-color: lightblue;
    }

    input[type=radio] {
        accent-color: darkblue;
    }

    input[type="checkbox"]:not(:checked):not(:disabled) {
        /* by default checkboxes are roundish */
        border-radius: 2px;
        /* so checkboxes are aligned at bottom with labels */
        margin-bottom: 0;
        appearance: none;
        /* so background-color would apply to radios and checkboxes */
        background-color: var(--my-bgcolor) !important;
        accent-color: lightblue;
        border-color: lightblue;
        outline: 1px solid lightblue;
    }

    input[type="radio"]:not(:checked):not(:disabled) {

        /* by default radios have a square shape */
        border-radius: 100px;

        appearance: none;
        background-color: black !important;
        accent-color: lightblue;

        /* so checkboxes are aligned at bottom with labels */
        margin-bottom: 0;
    }

    .ffx-combobox-popup {
        background-color: var(--my-bgcolor-lighter) !important;
        color: var(--my-textcolor) !important;
        border: gray 1px solid;
        border-radius: 3px;
        border-bottom: black 2px solid;

        &>* {
            border-bottom: lightblue 1px solid;
            padding: 5px;
            min-height: 20pt;
        }

        &>*:hover {
            background-color: darkcyan;
        }
    }
}