aio-input/ai-dark-theme.css

generate all input types in react j

:root {
    --adt-in-shadow: inset 0px 3px 5px 1px rgb(0 0 0 / 20%),
        0px -1px 2px 1px rgb(0 0 0 / 16%),
        0px 1px 2px 1px rgb(53, 53, 53);
    --adt-in-bg: #222222 !important;
    --adt-out-bg: #2b2b2b;
    --adt-in-bg-darker: #adb0b8 !important;
    --adt-out-shadow: inset 0px -2px 3px 1px rgb(0 0 0 / 37%), inset 0px 1px 2px 1px rgb(63 63 63);
    --adt-out-shadow-reverse: inset 0px 1px 2px 1px rgb(0 0 0 / 16%),
        inset 0px -1px 1px 1px rgb(255 255 255);
    --adt-color-in: #aaa;
    --adt-bg-grad: linear-gradient(180deg, #ffffff, #ffffff42)
}

.ai-dark-theme {
    background: var(--adt-out-bg) !important;
    color:#aaa !important;
}

.ai-dark-theme {

    .aio-input-switch,
    .aio-input-text,
    .aio-input-select,
    .aio-input-slider {
        box-shadow: var(--adt-in-shadow);
        background: var(--adt-in-bg);
        border-radius: 24px;
        border:none;
    }

    .out-bg{
        background:var(--adt-out-bg);
    }
    .out-shadow{
        box-shadow:var(--adt-out-shadow);
    }
    .in-bg{
        background:var(--adt-in-bg);
    }
    .in-shadow{
        box-shadow:var(--adt-in-shadow);
    }
    .ai-sidenav {
        padding: 0.4em;
        background: var(--adt-in-bg);
    }

    .ai-bottom-menu {
        border-radius: 16px;
        overflow: hidden;
    }

    .ai-bottom-menu-item {
        box-shadow: var(--adt-out-shadow);
        background: var(--bg-out)
    }

    .ai-bottom-menu-item.active {
        box-shadow: none;
        background: var(--adt-in-bg)
    }

    .aio-input-dropdown-option,
    .ai-range-point,
    .ai-sidenav-item,
    .white-button {
        box-shadow: var(--adt-out-shadow);
        background: var(--adt-out-bg);
        color: var(--adt-color-in);
        font-weight: bold;
    }

    .white-button {
        border-radius: 36px;
        flex-shrink: 0;
    }

    .white-button:active {
        background: var(--bg-out);
        box-shadow: var(--adt-out-shadow-reverse);
        font-size: 96%;
    }

    .aio-input-dropdown-option:first-child {
        border-radius: 1.2em 1.2em 0 0 !important;
    }

    .aio-input-dropdown-option:last-child {
        border-radius: 0 0 1.2em 1.2em !important;
    }
    .ai-bottom-menu-item:first-child {
        border-radius: 1.0em 0 0 1.0em !important;
    }

    .ai-bottom-menu-item:last-child {
        border-radius: 0 1.0em 1.0em 0 !important;
    }

    .aio-input-dropdown-options {
        padding: 0.4em;
        box-shadow: var(--adt-in-shadow) !important;
        background: var(--adt-in-bg);
    }

    .aio-input-radio,
    .aio-input-checkbox {
        background: none !important;
    }

    .ai-range-point {
        width: 3em;
        height: 3em;
    }

    .aio-input-slider {
        padding: 0 1.5em;
    }

    .aio-input-dropdown-option {
        border-radius: 0;
        border-bottom:none !important;
    }
    .aio-input-caret {
        color: var(--adt-color-in);
    }

    .ai-slider-groove {
        background: #333;
        height: 3px;
        border-radius: 12px !important;
    }

    .ai-slider-fill {
        background: #888;
        border-radius: 12px !important;
    }

    .aio-popup {
        border-radius: 24px;
        overflow: hidden;
    }

    .aio-popup-body {
        background: none !important;
    }

    .ai-sidenav-sub-item.active {
        background: #dedede !important;
        color: #000;
    }

    .aio-input-check-out {
        box-shadow: var(--adt-in-shadow);
        border: none;
        background: var(--adt-in-bg) !important;
        width: 1.6em;
        height: 1.6em;
        padding: .1.8em;
    }

    .aio-input-check-in {
        background: var(--adt-bg-grad);
    }

    .aio-popup-snackebar-item {
        background: var(--adt-in-bg);
        border-radius:1em;
    }
    .ai-bottom-menu{
        padding:0.4em;
        background: var(--adt-in-bg);
        box-shadow:var(--adt-in-shadow)
    }
    .ai-bottom-menu-item{
        background:var(--adt-out-bg);
    }

}