Enable Light/Dark Mode

To enable light/dark toggle button

#Step 1:

Please add custom HTML code below into Theme Options -> General Settings -> Extra Code -> Custom Footer Code

Custom HTML code

<div class="akali-dark-light-mode">
    <button type="button" data-color-mode="dark">Dark mode</button>
    <button type="button" data-color-mode="light">Light mode</button>
</div>

# Step 2:

Please add custom css code below into Theme Options -> General Settings -> Extra Code -> Custom CSS

Custom CSS

/** DARK & LIGHT **/
body.body-dark {
    --theme-body-bg-color: #202020;
    --theme-secondary-color: #FFFFFF;
    --theme-link-color: #FFFFFF;
    --theme-heading-font-color: #FFFFFF;
    --theme-border-color: #5C5C5C;
    --theme-body-font-color: #D0D0D0;
    --theme-fourth-color: #333;
    --e-global-color-314e4a3: #FFFFFF;
    /* #202020 */
    --e-global-color-990d558: #F9F9F9;
    /* #5C5C5C */
    --e-global-color-bb438e2: #5C5C5C;
    /* #A0A0A0 */
    --e-global-color-7bf8134: #A0A0A0;
    /* #D0D0D0 */
    --e-global-color-370f36e: #333333;
    /* #F9F9F9 */
    --e-global-color-4cf9b9c: #202020;
    /* #FFFFFF */
    --e-global-color-9d75a75: #4F3F32;
    /* #BBAFA5 */
    --e-global-color-2d411bf: #5C5C5C;
    /* #ECECEC */
    --e-global-color-c035a3b: #956B3A;
    /* #BBAFA5 */
    --e-global-color-13a92d9: #5C5C5C;
    /* #D0D0D0 */
    --e-global-color-0f0e69c: #333333;
    /* #D0D0D0 */
    --e-global-color-f457923: #5C5C5C;
    /* #D0D0D0 */
}
body.body-dark .lakit-logo .lakit-logo__n {
    display: none;
}
body.body-dark .lakit-logo .lakit-logo__t {
    display: block;
}
body.body-dark .la-compare-table {
    --theme-border-color: #333;
}
body.body-dark .la-compare-table .add_to_cart_wrap a {
    background-color: var(--theme-fourth-color);
    color: #fff;
}
body.body-dark .la-compare-table .add_to_cart_wrap a:hover {
    background-color: var(--theme-primary-color);
}
body.body-dark #la_wishlist_table_wrapper .product-action .la-addcart {
    background-color: var(--theme-fourth-color);
    color: #fff;
}
body.body-dark #la_wishlist_table_wrapper .product-action .la-addcart:hover {
    background-color: var(--theme-primary-color);
}
body:not(.lakitdoc-enable-header-transparency) .lakit-site-wrapper > .elementor-location-header > .e-parent.elementor-sticky--active:not(.elementor-sticky--effects) {
    background: none;
}
.akali-dark-light-mode {
    position: fixed;
    right: 0;
    top: 35%;
    display: flex;
    flex-direction: column;
}
.akali-dark-light-mode button{
    border: none;
    font-size: 18px;
    padding: 10px 15px;
    line-height: 1;
}
.akali-dark-light-mode button[data-color-mode="dark"] {
    background: #202020;
    color: #fff;
}
.akali-dark-light-mode button[data-color-mode="light"] {
    background: #fff;
    color: #202020;
    display: none;
}
.body-dark .akali-dark-light-mode button[data-color-mode="dark"]{
    display: none
}
.body-dark .akali-dark-light-mode button[data-color-mode="light"]{
    display: block
}
@media(max-width: 1280px){
    .akali-dark-light-mode button{
        font-size: 16px;
        padding: 8px 12px;
        width: 65px;
    }
}