Hey! So I am using Alto theme, and I see where I can set it to light or dark mode in the design and branding section. Ideally, I’d like to have my theme automatically switch between the two based on the viewer’s browser settings. Is this possible with a code injection? I am not really a developer, and only kinda half way know what I am doing.
The other issue I noticed is that when I share my link on social media, the logo in the shared link doesn’t look right if my phone or computer is automatically switching to dark mode based on my preferences. I do have a “white” version of the logo uploaded for dark mode, but it only shows up if I permanently toggle my site to dark mode in the design and branding section.
Am I making sense? Any guidance? Thanks!
#2 -
You might want to set a social media logo specifically, and if it doesn’t work on light and dark, make it have a background.
(question #1 is out of scope for me this afternoon – just passing through while waiting for code to compile!)
Thank you for this! In light mode, my background is white, so I should probably just make my logo have a white background anyways rather than be transparent. I don’t currently have a way for users to toggle between light and dark mode, which is fine with me, though I guess it may annoy certain users.
A background is certainly an easy solution and one I should have thought of! This is will at least until I can figure out how to make this change automatically.
For sharing social images, you can’t detect the user’s browser settings, so you’re going to need something with a background, or risk it being wrong.
I’ve got directions for adding dark mode for other Ghost themes (although not Alto) over here:
In terms of auto-detection, you can change your css based on browser settings… I should update that post…