Post by Progenix » Fri Jan 27, 2023 1:32 pm

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?

Newbie

Posts

Joined
Wed Jul 29, 2020 7:17 pm

Post by OSWorX » 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.

Full Stack Web Developer :: Dedicated OpenCart Development & Support DACH Region
Contact for Custom Work / Fast Support.


User avatar
Guru Member
Online

Posts

Joined
Mon Jan 11, 2010 10:52 pm
Location - Austria

Post by paulfeakins » 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 ;D

UK OpenCart Hosting | OpenCart Audits | OpenCart Support - please email info@antropy.co.uk


User avatar
Guru Member
Online

Posts

Joined
Mon Aug 22, 2011 11:01 pm
Location - London Gatwick, United Kingdom

Post by Progenix » Fri Jan 27, 2023 10:18 pm

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 ;D
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.

Newbie

Posts

Joined
Wed Jul 29, 2020 7:17 pm

Post by OSWorX » 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

Full Stack Web Developer :: Dedicated OpenCart Development & Support DACH Region
Contact for Custom Work / Fast Support.


User avatar
Guru Member
Online

Posts

Joined
Mon Jan 11, 2010 10:52 pm
Location - Austria

Post by Progenix » Mon Jan 30, 2023 5:58 pm

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 :P

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 ;D

Newbie

Posts

Joined
Wed Jul 29, 2020 7:17 pm
Who is online

Users browsing this forum: No registered users and 68 guests