Light / Dark Theme Switch - Front End
Forum rules
Always add your Laravel, Aimeos and PHP version as well as your environment (Linux/Mac/Win)
Spam and unrelated posts will be removed immediately!
Always add your Laravel, Aimeos and PHP version as well as your environment (Linux/Mac/Win)
Spam and unrelated posts will be removed immediately!
- MattWoodward
- Posts: 20
- Joined: 03 Mar 2022, 04:15
Light / Dark Theme Switch - Front End
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
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
Re: Light / Dark Theme Switch - Front End
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
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
Professional support and custom implementation are available at Aimeos.com
If you like Aimeos, give us a star
If you like Aimeos, give us a star
- MattWoodward
- Posts: 20
- Joined: 03 Mar 2022, 04:15
Re: Light / Dark Theme Switch - Front End
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?
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?
Re: Light / Dark Theme Switch - Front End
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
https://github.com/aimeos/aimeos-larave ... r.php#L268
Professional support and custom implementation are available at Aimeos.com
If you like Aimeos, give us a star
If you like Aimeos, give us a star
- MattWoodward
- Posts: 20
- Joined: 03 Mar 2022, 04:15
Re: Light / Dark Theme Switch - Front End
Thanks for sharing that
I can see that a "dirty" implementation of the same thing for the front end would be something like follows...
...in the base blade template.
Is there a preferred way of passing this type of data to the view from the controller within Aimeos?
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'; ?>">
Is there a preferred way of passing this type of data to the view from the controller within Aimeos?
Re: Light / Dark Theme Switch - Front End
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
https://github.com/aimeos/aimeos/blob/m ... hp#L54-L56
Professional support and custom implementation are available at Aimeos.com
If you like Aimeos, give us a star
If you like Aimeos, give us a star
- MattWoodward
- Posts: 20
- Joined: 03 Mar 2022, 04:15
Re: Light / Dark Theme Switch - Front End
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)
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')
}
Re: Light / Dark Theme Switch - Front End
Is this something that could be improved for the admin backend too?
If yes, can you create a PR?
If yes, can you create a PR?
Professional support and custom implementation are available at Aimeos.com
If you like Aimeos, give us a star
If you like Aimeos, give us a star
- MattWoodward
- Posts: 20
- Joined: 03 Mar 2022, 04:15
Re: Light / Dark Theme Switch - Front End
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
https://github.com/aimeos/ai-admin-jqadm/pull/229