How Do I Implement Automatic Dark Mode Into My Website?

Ask the community
, , ,
1

I’m having trouble with
Table, dropdown, image and vector image elements.

Working in
Wix Studio

Site link

What I’m trying to do
Complete dark mode implementation

What I’ve tried so far
CSS/JS lookups

Extra context
N/A

2

I see you’ve got pretty far with it. I’m guessing you’re using CSS to achieve this?

You mention table/dropdown/image and vector - have you got links to the pages you’re struggling with this on? Any code you’ve already tried would be a huge help too :slight_smile:

3

Yeah sure dood! Thank you for responding.

You can see by the size/color dropdowns, the quantity text field (forgot to include that), the size chart, the images for credits and the web title up top the page. Originally I casted a filter: invert() on top but when selected on the webpage the highlight is also inverted and makes it all funky and overall is kinda limiting.

My code:

.button, .button .rich-text__text {
    background-color: #1A6AFF;
    border-radius: 999px;
    height: 40px;
    line-height: 40px;
    transition: .2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.button:hover, .button .rich-text__text:hover {
    background-color: #E59500;
    color: black;
}

.cart-image, .catalog-image {
    transition: .2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.catalog-name .rich-text__text {
    -webkit-text-stroke: white 1px;
    paint-order: stroke fill;
}

.primary:hover + .box {
    background-color: red;
}

.dif-spacing {
    padding: 25px clamp(15px, 4.7%, 40px);
}

.full {
    height: 100dvh;
    width: 100dvw;
}

.spacing {
    padding: clamp(15px, 4.7%, 40px);
}

@media (prefers-color-scheme: dark) {
    .cart-image, .catalog-image, .info-image {
        opacity: 0.5;
        transition: 0.2s ease-out;
    }

    .cart-image:hover {
        opacity: 0.25;
    }

    .catalog-image:hover {
        opacity: 0.75;
    }

    .catalog-item {
        background-color: rgba(51, 51, 51, 1);
    }

    .catalog-name .rich-text__text {
        -webkit-text-stroke: unset;
    }

    .secondary + .box, .table__header, .table__row {
        background-color: #808080;
    }

    .secondary .rich-text__text {
        color: #808080;
    }

    .primary .rich-text__text {
        color: #e6e6e6;
    }

    .primary:hover + .box {
        background-color: #808080;
    }
    
    .page {
        background-color: #1e1e1e;
    }
}
4

Sorry, I forgot to put the last post as a reply to yours if that’s what your reminders are set for.

5

I’ve mostly worked around it with opacity and mid-colors. Hopefully there’s something far better in the future