html.dark-theme body {
--bs-body-color: var(--text-dark);
color: var(--text-dark);
background-color: var(--white);
}
html.dark-theme ::placeholder {
color: var(--text-dark) !important;
opacity: 0.4 !important;
}
html.dark-theme p {
color: var(--text-dark);
}
html.dark-theme .h1,
html.dark-theme .h2,
html.dark-theme .h3,
html.dark-theme .h4,
html.dark-theme .h5,
html.dark-theme .h6,
html.dark-theme h1,
html.dark-theme h2,
html.dark-theme h3,
html.dark-theme h4,
html.dark-theme h5,
html.dark-theme h6 {
color: var(--primary-blue);
}
/* Sidebar */
html.dark-theme .sidebar-wrapper,
html.dark-theme .sidebar-wrapper .sidebar-header {
background-color: var(--primary-blue);
}
/* html.dark-theme .sidebar-wrapper,
html.dark-theme .sidebar-wrapper .sidebar-header {
border-right: 1px solid rgb(255 255 255 / 12%);
} */
html.dark-theme .sidebar-wrapper,
html.dark-theme .sidebar-wrapper .sidebar-header {
border-bottom: 1px solid rgb(255 255 255 / 0%);
}
html.dark-theme .toggle-icon {
color: var(--text-dark);
}
html.dark-theme .toggle-icon:hover {
color: var(--white);
background-color: var(--primary-blue);
}
html.dark-theme .sidebar-wrapper .sidebar-header .logo-text {
color: #fcfcfc;
}
html.dark-theme .sidebar-wrapper .metismenu ul {
background-color: rgb(255 255 255 / 4%);
border: 1px solid rgb(255 255 255 / 12%);
}
html.dark-theme .sidebar-wrapper .metismenu a {
color: var(--white) !important;
}
html.dark-theme .sidebar-wrapper .metismenu .mm-active>a,
html.dark-theme .sidebar-wrapper .metismenu a:active,
html.dark-theme .sidebar-wrapper .metismenu a:focus,
html.dark-theme .sidebar-wrapper .metismenu a:hover {
color: var(--white);
text-decoration: none;
background-color: rgb(255 255 255 / 12%);
}
html.dark-theme .sidebar-wrapper .sidebar-header img {
/* filter: invert(1) grayscale(100%) brightness(200%); */
transition: opacity 0.3s ease;
}
html.dark-theme .sidebar-wrapper .simplebar-scrollbar:before {
background: rgba(255, 255, 255, .4);
}
html.dark-theme .apexcharts-pie-label,
html.dark-theme .apexcharts-datalabels,
html.dark-theme .apexcharts-datalabel,
html.dark-theme .apexcharts-datalabel-label,
html.dark-theme .apexcharts-datalabel-value {
fill: var(--text-dark);
}
html.dark-theme .apexcharts-text tspan {
fill: rgba(0, 0, 0, 0.877);
}
/* Header */
html.dark-theme .top-header {
color: var(--text-dark);
background-color: var(--white);
border-bottom: 1px solid rgb(90 90 90 / 12%);
}
html.dark-theme .top-header .navbar .top-navbar-right .nav-item {
background-color: #181818;
}
html.dark-theme .top-header .navbar .top-navbar-right .nav-item:hover {
background-color: #212121;
}
html.dark-theme .top-header .navbar .top-navbar-right .nav-link {
color: #fcfcfc;
}
html.dark-theme .top-header .navbar .searchbar .form-control {
color: #fcfcfc;
background-color: #000;
border: 1px solid rgb(255 255 255 / 0%);
}
html.dark-theme .options {
color: #fcfcfc;
}
/* ecommerce */
html.dark-theme .shop-container .card {
border: 1px solid rgb(255 255 255 / 12%);
}
html.dark-theme .product-grid .card.product-card {
background-color: #212121;
}
html.dark-theme .product-name {
color: #fcfcfc;
}
html.dark-theme .product-categories ul a {
color: #fcfcfc;
}
html.dark-theme .product-wishlist {
background-color: #212529;
color: #fcfcfc;
}
html.dark-theme .product-compare,
html.dark-theme .product-catergory {
color: #fcfcfc;
}
html.dark-theme .steps-light .step-item.active.current {
color: #ffffff;
}
html.dark-theme .payment-img img,
html.dark-theme .payment-mode img {
filter: invert(1) grayscale(100%) brightness(200%);
}
@media (min-width: 992px) {
html.dark-theme .product-grid .card.product-card:hover {
background-color: #302f2f;
}
}
/* Components */
html.dark-theme .btn-dark {
color: #fff;
background-color: #181818;
border-color: #181818;
}
html.dark-theme .btn-outline-dark {
color: #b1b6bb;
border-color: #7f868d;
}
html.dark-theme .btn-white {
color: #ffffff;
background-color: #212121;
border-color: rgb(255 255 255 / 12%);
}
html.dark-theme .btn-light {
color: #fff;
background-color: rgb(255 255 255 / 12%);
border-color: rgb(255 255 255 / 12%);
}
html.dark-theme .ff_fileupload_wrap .ff_fileupload_dropzone,
html.dark-theme .imageuploadify {
border: 2px dashed rgb(255 255 255 / 74%);
background-color: #212121;
}
html.dark-theme .picker__input {
background-color: #181818 !important;
}
html.dark-theme .picker__holder {
background: #181818;
border: 1px solid rgb(255 255 255 / 12%);
}
html.dark-theme .picker__button--today,
html.dark-theme .picker__button--clear,
html.dark-theme .picker__button--close {
border: 1px solid rgb(255 255 255 / 12%);
background: #181818;
}
html.dark-theme .select2-container--bootstrap4 .select2-selection {
background-color: #181818;
border: 1px solid rgb(255 255 255 / .35)
}
html.dark-theme .select2-dropdown {
background-color: #181818;
border: 1px solid rgb(255 255 255 / 38%)
}
html.dark-theme .select2-search--dropdown .select2-search__field {
border: 1px solid rgb(255 255 255 / 34%);
background-color: #181818;
color: #e3dfdf
}
html.dark-theme .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
color: #dee1e5;
border: 1px solid rgb(255 255 255 / 55%);
background: #171717
}
html.dark-theme .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered .select2-search__field {
background: 0 0;
color: #e6e1e1
}
html.dark-theme .select2-container--bootstrap4 .select2-dropdown .select2-results__option[aria-selected=true] {
background-color: #181818;
}
html.dark-theme .modal-content {
border: 1px solid var(--border-light);
transform: translateY(0);
transition: transform 0.3s ease, box-shadow 0.3s ease;
background: var(--white);
border-radius: 8px;
box-shadow: var(--box-shadow-sm);
}
html.dark-theme .modal-header {
border-bottom: 1px solid var(--border-light);
}
html.dark-theme .modal-footer {
border-top: 1px solid var(--border-light);
}
html.dark-theme .nav-tabs .nav-item.show .nav-link,
html.dark-theme .nav-tabs .nav-link.active {
background-color: var(--orange-primary);
}
html.dark-theme .nav-tabs {
border-bottom: 1px solid var(--border-light);
}
html.dark-theme .nav-primary.nav-tabs .nav-link.active {
border-color: #008cff #008cff rgb(255 255 255 / 24%);
}
html.dark-theme .nav-tabs .nav-link {
color: var(--text-dark);
}
html.dark-theme .nav-danger.nav-tabs .nav-link.active {
border-color: #f41127 #f41127 rgb(255 255 255 / 24%);
}
html.dark-theme .nav-success.nav-tabs .nav-link.active {
border-color: #17a00e #17a00e rgb(255 255 255 / 24%);
}
html.dark-theme .nav-warning.nav-tabs .nav-link.active {
border-color: #ffab4d #ffab4d rgb(255 255 255 / 24%);
}
html.dark-theme .nav-pills .nav-link {
color: var(--text-dark);
}
html.dark-theme .page-link {
color: var(--text-dark);
background-color: #b8b8b8;
border: 1px solid rgb(255 255 255 / 12%);
}
html.dark-theme .page-link:hover {
background-color: var(--orange-primary);
color: var(--white);
}
html.dark-theme .page-item.disabled .page-link {
color: #ffffff;
background-color: #181f2e;
border-color: rgb(255 255 255 / 12%);
}
html.dark-theme .productlist .product-box {
border: 1px solid rgb(255 255 255 / 12%);
background-color: #181818;
}
html.dark-theme .form-control,
html.dark-theme .form-select {
color: var(--text-dark);
background-color: var(--white);
border: 1px solid #e1e1e1;
}
html.dark-theme .form-control:disabled,
html.dark-theme .form-control[readonly] {
background-color: var(--medium-gray);
}
html.dark-theme .form-select:disabled {
background-color: #38383838;
}
html.dark-theme .bootstrap-tagsinput {
color: #fcfcfc;
background-color: #181818;
border: 1px solid rgb(255 255 255 / 12%);
}
html.dark-theme .input-group-text {
color: #ffffff;
background-color: #313c53;
border: 1px solid rgb(255 255 255 / 12%);
}
html.dark-theme .chip {
color: #ffffff;
background-color: #141b29;
}
html.dark-theme .card {
/* background-color: #212121; */
border: 1px solid var(--border-light);
transform: translateY(0);
transition: transform 0.3s ease, box-shadow 0.3s ease;
background: var(--white);
border-radius: 8px;
box-shadow: var(--box-shadow-sm);
}
html.dark-theme .card-header,
html.dark-theme .card-footer {
background-color: var(--medium-gray);
border-bottom: 1px solid #e1e1e1;
}
html.dark-theme .bg-dark {
background-color: #101821 !important;
}
html.dark-theme .text-secondary {
color: #8c949c !important;
}
html.dark-theme .border {
border: 1px solid rgb(255 255 255 / 12%) !important;
}
html.dark-theme .border-start {
border-left: 1px solid rgb(255 255 255 / 12%) !important;
}
html.dark-theme .border-end {
border-right: 1px solid rgb(255 255 255 / 12%) !important;
}
html.dark-theme .border-top {
border-top: 1px solid rgb(255 255 255 / 12%) !important;
}
html.dark-theme .border-bottom {
border-bottom: 1px solid rgb(255 255 255 / 12%) !important;
}
html.dark-theme .text-option {
color: #fcfcfc !important;
}
html.dark-theme .offcanvas {
background-color: #181818;
}
html.dark-theme .btn-close {
/* filter: invert(1) grayscale(100%) brightness(200%); */
}
html.dark-theme .w_percent {
color: #ffffff;
}
html.dark-theme .bg-light {
background-color: rgb(248 249 250 / 12%) !important;
}
html.dark-theme .list-group-item {
color: #fcfcfc;
background-color: rgb(32 42 64 / 0%);
border: 1px solid rgb(255 255 255 / 12%);
}
html.dark-theme .sidebar-submenu-wrapper .list-group-item {
border: 1px solid rgb(255 255 255 / 0%);
}
html.dark-theme .list-group-flush>.list-group-item {
border-width: 0 0 1px;
}
html.dark-theme .new-customer-list .customer-list-item:hover {
background-color: #1b2436;
}
html.dark-theme .best-product-item {
background-color: #212121;
}
html.dark-theme .best-product-item:hover,
html.dark-theme .sellers-list-item:hover {
background-color: #1b2436;
}
html.dark-theme .theme-icons,
html.dark-theme .product-box {
background-color: #212121;
color: #f1f4f6;
}
html.dark-theme .accordion-button {
color: var(--text-dark);
background-color: var(--white) !important;
padding: 0 var(--spacing-md);
border-radius: 8px !important;
}
html.dark-theme .accordion-item {
background-color: var(--white);
border: 1px solid var(--border-light);
border-bottom: 1px solid var(--border-light);
border-radius: 8px;
margin-bottom: 8px;
}
html.dark-theme .accordion-button:focus {
border-color: #ffffff;
box-shadow: 0 0 0 0.25rem rgb(255 255 255 / 25%);
}
html.dark-theme .accordion-button:not(.collapsed) {
color: var(--primary-blue);
background-color: var(--white);
font-weight: var(--font-weight-bold);
padding: 0 var(--spacing-md) !important;
}
html.dark-theme .dropdown-menu {
color: var(--text-dark);
background-color: var(--white);
border: 1px solid rgb(255 255 255 / 12%);
}
html.dark-theme .dropdown-large .msg-header .msg-header-title {
color: #fcfcfc;
}
html.dark-theme .dropdown-large .msg-footer {
color: #fcfcfc;
border-top: 1px solid rgb(255 255 255 / 12%);
}
html.dark-theme .dropdown-large .msg-header .msg-header-clear {
color: #fcfcfc;
}
html.dark-theme .dropdown-large .msg-header,
html.dark-theme .dropdown-large .dropdown-menu .dropdown-item {
border-bottom: 1px solid rgb(255 255 255 / 12%);
}
html.dark-theme .dropdown-item {
color: var(--text-dark);
}
html.dark-theme .top-header .navbar .dropdown-large .dropdown-menu::after,
html.dark-theme .top-header .navbar .dropdown-user-setting .dropdown-menu::after {
background: #212121;
border-top: 1px solid #2f3b55;
border-left: 1px solid #2f3b55;
display: none;
}
html.dark-theme .top-header .navbar .dropdown-searchbar .form-control {
color: #fcfcfc;
background-color: #212121;
}
html.dark-theme .top-header .navbar .dropdown-item .setting-icon {
background-color: #2b3650;
}
html.dark-theme .top-header .navbar .dropdown-large .dropdown-item:hover,
html.dark-theme .top-header .navbar .dropdown-user-setting .dropdown-item:hover {
color: #fcfcfc;
background-color: rgb(255 255 255 / 12%)
}
html.dark-theme .top-header .navbar .dropdown-menu .notification-box {
background-color: #2b3650;
}
html.dark-theme .top-header .navbar .dropdown-menu .apps:hover {
background-color: #283349;
transition: all 0.2;
}
html.dark-theme .top-header .navbar .dropdown-menu .apps .apps-name {
color: #fcfcfc;
}
html.dark-theme .progress {
background-color: rgb(255 255 255 / 12%);
}
html.dark-theme .table {
--bs-table-bg: transparent;
--bs-table-accent-bg: transparent;
--bs-table-striped-color: #ffffff;
--bs-table-striped-bg: rgba(255, 255, 255, 0.05);
--bs-table-active-color: #ffffff;
--bs-table-active-bg: rgb(255 255 255 / 10%);
--bs-table-hover-color: #ffffff;
--bs-table-hover-bg: rgb(255 255 255 / 8%);
width: 100%;
margin-bottom: 1rem;
color: #fcfcfc;
vertical-align: top;
border-color: rgb(255 255 255 / 12%);
}
html.dark-theme .table-light {
--bs-table-bg: rgb(255 255 255 / 12%);
--bs-table-striped-bg: #ecedee;
--bs-table-striped-color: #000;
--bs-table-active-bg: #dfe0e1;
--bs-table-active-color: #000;
--bs-table-hover-bg: #e5e6e7;
--bs-table-hover-color: #000;
--bs-table-color: #d7d7d7;
border-color: #dfe0e1;
}
html.dark-theme .breadcrumb {
background-color: rgb(32 42 64 / 0%);
}
html.dark-theme .breadcrumb-item.active {
color: #8b969f
}
html.dark-theme .breadcrumb-title {
border-right: 1.5px solid rgb(255 255 255 / 18%)
}
html.dark-theme .bg-body {
background-color: #212121 !important
}
html.dark-theme .footer {
color: #fcfcfc;
background-color: #181818;
border-top: 1px solid rgb(255 255 255 / 12%);
}
html.dark-theme .top-header .navbar .full-search-bar {
background-color: rgb(0 0 0);
border-bottom: 1px solid rgb(255 255 255 / 15%);
}