Jump to content

Any idea how to change Art Background gradient colour via CSS for light/dark mode?

Recommended Posts

Site URL: https://www.jabberdesigns.com/home

Page password: s3cr3t

Hi there, I'm trying to incorporate a light/dark mode button into my website but I've hit a stumbling block when trying to modify the CSS of the Art backgrounds.

My art backgrounds are purple + black themed, so I'd like to switch that to a white + purple theme when the light mode is enabled either by 'preferred-mode' media queries or when switched.

Could anyone help me figure out how to modify the Art Background colour palette's CSS to achieve this?

Thanks a lot for any input

Link to comment
  • Replies 3
  • Views 412
  • Created
  • Last Reply

Top Posters In This Topic

  • 1 month later...
On 4/24/2022 at 9:00 AM, tuanphan said:

I guess you need to add 2 section with different gradient art, then we will give the code to show 1 on lightmode, show another on dark mode.

Hi there @tuanphan

Sorry to revive a dead thread, but would it be possible to change the attribute data in the art section using javascript to change the black gradient colour to white when a toggle is switched to light mode?

many thanks

Edited by JabberDesigns
Link to comment
On 6/19/2022 at 11:04 AM, JabberDesigns said:

Hi there @tuanphan

Sorry to revive a dead thread, but would it be possible to change the attribute data in the art section using javascript to change the black gradient colour to white when a toggle is switched to light mode?

many thanks

I think it is possible, but I'm not familiar with JS code, can't help with this.

You try tag some active contributors on forum

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.