OpenCart Community

It's time to hop into the 2020s and offer a dark mode for my customers, but without losing light mode as not everyone likes dark mode. I'm capable of creating a dark mode copy of the default theme (at the moment I'm using a lightly modified version of the default theme), but from what I can see a theme can only be set on the backend. Is it possible to have more than one theme, and allow customers to choose which theme they use?

Not per default.
But you could add a button in the shop to offer visitors the possibility to change.

Progenix wrote: ↑

Fri Jan 27, 2023 1:32 pm

It's time to hop into the 2020s

Doing this on a website really doesn't sound like hopping in to the 2020s to me

OSWorX wrote: ↑

Fri Jan 27, 2023 6:53 pm

Not per default.
But you could add a button in the shop to offer visitors the possibility to change.

That's quite alright with me, but how would it be implemented? Let's keep things simple and assume it's nothing more than a hyperlink, turning it into a toggle is something I can do myself but I don't know where to begin implementing this.

For what it's worth, I'm on OpenCart 2.3.0.2 using a lightly modified default theme, the URLs are

catalogue/view/theme/default/
catalogue/view/theme/dark/

At the moment, I'm making changes and editing in the middle of the night when there's no traffic by just moving the CSS file across and I've pretty much got it nailed.

All the better if the change can be saved via a cookie rather than timing out with the session, but it's really not required. I came up with that as I was typing this message.

paulfeakins wrote: ↑

Fri Jan 27, 2023 8:49 pm

Progenix wrote: ↑

Fri Jan 27, 2023 1:32 pm

It's time to hop into the 2020s

Doing this on a website really doesn't sound like hopping in to the 2020s to me

To the best of my knowledge, NewEgg is the only online store that currently allows users to swap between dark and light mode. I've seen plenty that use dark mode by default, but none that give the user the ability to chop and change at will.

Simply use some css.
Creating a second theme I would say is really not requried.

Read this for example: https://web.dev/patterns/theming/theme-switch/
Or: https://dcodemania.com/post/switch-dark ... javascript
Or: https://www.w3schools.com/howto/howto_j ... k_mode.asp

OSWorX wrote: ↑

Sat Jan 28, 2023 1:24 am

Simply use some css.
Creating a second theme I would say is really not requried.

Read this for example: https://web.dev/patterns/theming/theme-switch/
Or: https://dcodemania.com/post/switch-dark ... javascript
Or: https://www.w3schools.com/howto/howto_j ... k_mode.asp

This suddenly jumped a bit beyond my capabilities, but thanks

The primary things I need to change are:

body {
background-color: #000;
}
.breadcrumb {
background-color: #000;
border: 1px solid #888;
}
.breadcrumb > li {
text-shadow: none;
}
#menu {
border: 0px solid #000;
}

I'm building up the courage to try