// global main style .logo-svg { background-color: #000000; } [data-theme="dark"] { $bg-dark: #3c3c3c; $bg-darker: darken($bg-dark, 5%); $fg-color: #dedede; background-color: darken($bg-dark, 5%) ; color: $fg-color !important; body { background: $bg-darker; color: $fg-color; } .card { border-color: lighten($bg-dark, 10%); background-color: $bg-dark; } .card-body { background: $bg-dark; color: $fg-color; } .card-header { background: lighten($bg-dark, 5%); color: $fg-color; } .table { color: $fg-color; } .list-group-item { color: $fg-color; background: $bg-dark; } // .custom-select { // color: $fg-color; // // background: $bg-dark; // } .nav-tabs { border-bottom: 1px solid lighten($bg-dark, 20%); .nav-link { color: $primary; &:hover { border-color: lighten($bg-dark, 5%); color: lighten($primary, 10%); } } } .nav-link.active { color: $fg-color; background: $bg-darker; border-color: lighten($bg-dark, 20%); } .modal-content { color: $fg-color; background: $bg-dark; } .form-control { color: $fg-color; background: $bg-dark; } .popover { background: $bg-dark; } .popover-body { color: $fg-color; } .logo-svg { background-color: $fg-color; } textarea { color: $fg-color; background: $bg-dark; } .custom-select{ color: $fg-color; border-color: lighten($bg-dark, 20%); background: $bg-dark url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23dedede' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px } } html.ft-theme-transition, html.ft-theme-transition *, html.ft-theme-transition *:before, html.ft-theme-transition *:after { transition:background 750ms ease-in-out, border-color 750ms ease-in-out; transition-delay: 0 !important; }