Light / Dark Theme Switch - Front End

MattWoodward · Post by **MattWoodward** » 03 Mar 2022, 04:24

Laravel: Laravel Framework 6.20.44
Aimeos: 2021.10.5
PHP: 7.4.3
Environment: Ubuntu 20.04.3 LTS

I'm looking to implement a light / dark theme switch capability for the front end of my custom theme (much like the one provided in the admin area).

Just curious if anyone has implemented something similar and could talk / share a little about the implementation approach you've used within the context of aimeos / laravel.

TYIA

Post by **aimeos** » 06 Mar 2022, 14:09

The easiest way is to assign different values to the CSS variables for a dark theme:
https://github.com/aimeos/ai-client-htm ... ss#L46-L58

We use that in the admin backend too:
https://github.com/aimeos/ai-admin-jqad ... css#L9-L65

The "dark" CSS class is assigned using JS:
https://github.com/aimeos/ai-admin-jqad ... .js#L9-L20

MattWoodward · Post by **MattWoodward** » 08 Mar 2022, 05:47

Thanks for sharing this. I've mostly gotten it working as hoped.

One question I do have is about the continuity of this across pages. I can see the value is stored in a cookie. In the admin area, the body class uses: https://github.com/aimeos/aimeos-larave ... de.php#L26

But if you try the same thing on the front end the theme constant isn't recognised. Does this need initializing somewhere specific?

Post by **aimeos** » 08 Mar 2022, 06:56

The theme variable gets initialized in the controller action to avoid switching the colors visible to the user because JS is evaluated after rendering:
https://github.com/aimeos/aimeos-larave ... r.php#L268

MattWoodward · Post by **MattWoodward** » 09 Mar 2022, 00:07

Thanks for sharing that

I can see that a "dirty" implementation of the same thing for the front end would be something like follows...

Code: Select all

<body class="<?= ( $_COOKIE['aimeos_frontend_theme'] ?? '' ) == 'dark' ? 'dark' : 'light'; ?>">

...in the base blade template.

Is there a preferred way of passing this type of data to the view from the controller within Aimeos?

Post by **aimeos** » 11 Mar 2022, 07:08

The Laravel standard way is to assign the value as a variable to the view. If it should be done for all views, Laravel's view composer can be a good solution like used here:
https://github.com/aimeos/aimeos/blob/m ... hp#L54-L56

MattWoodward · Post by **MattWoodward** » 16 Mar 2022, 03:53

Thanks, I've gotten that working now - much appreciated!

I'd also note that the automatic detection for dark preferences wasn't working very well when the browser was set to dark as an application. The theme would keep reverting to light. I updated the code to explicitly remove light and add dark under the desired circumstances (knowing that it was light by default based on the variable injected into the view)

Code: Select all

/* Check for preferred theme mode (dark/light) */
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
const setLight = document.cookie.includes('aimeos_frontend_theme=light');

//Light by default (based on View used) - checks for Dark preference (by browser, or cookie)
if (prefersDark.matches && !setLight){
	document.body.classList.remove('light');
	document.body.classList.add('dark')
}

Post by **aimeos** » 16 Mar 2022, 06:36

Is this something that could be improved for the admin backend too?
If yes, can you create a PR?

MattWoodward · Post by **MattWoodward** » 18 Mar 2022, 00:45

Yeah I just tested this with the admin backend and the same problem exists there too. I've submitted a PR for this to the relevant repo:

https://github.com/aimeos/ai-admin-jqadm/pull/229

Help for Aimeos

Light / Dark Theme Switch - Front End

Light / Dark Theme Switch - Front End

Re: Light / Dark Theme Switch - Front End

Re: Light / Dark Theme Switch - Front End

Re: Light / Dark Theme Switch - Front End

Re: Light / Dark Theme Switch - Front End

Re: Light / Dark Theme Switch - Front End

Re: Light / Dark Theme Switch - Front End

Re: Light / Dark Theme Switch - Front End

Re: Light / Dark Theme Switch - Front End

Connect with your social network account