Guest Cham Posted July 21, 2019 Share Posted July 21, 2019 (edited) Hi, Currently in iOS 13 Beta, dark mode can be enabled automatically. I have seen a lot of blogs add CSS code that’s turns their websites in dark mode when dark mode is initiated on iOS and vice versa. I’ve added a CSS code that turns my site into dark mode on iOS but having trouble with the headings and menu navigation text colour changing to match the theme. I am currently using the Avenue Theme on chambyte.net. I’ve attached a photo and the CSS code snippet I’m currently using, if anyone can help modify this CSS (or have a better CSS code) for the avenue theme for the blog post title and menu colours too match the theme that would greatly appreciated. @media (prefers-color-scheme: dark) { body { color: #fafafa; background-color: #1a1a1a; } .blog-title a { color: #ffffff; } .post-title a { color: #ffffff !important; } blockquote p { color: #ffffff !important; } } Any help will be greatly appreciated. Many thanks in advance. Edited July 21, 2019 by Cham Initial Revision Link to comment
Solution tuanphan Posted July 21, 2019 Solution Share Posted July 21, 2019 @Chambyte /* Tagline */ .logo-subtitle { color: white; } /* Nav */ nav.main-nav li a { color: white !important; } /* Post Title */ article h1.entry-title a { color: white !important; } 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
Guest Cham Posted July 21, 2019 Share Posted July 21, 2019 Hi @tuanphan, thanks for the response. The CSS code you provided did the job when in Dark Mode but unfortunately it has the opposite effect when light mode is on. As seen in the image below. Link to comment
Guest Cham Posted July 21, 2019 Share Posted July 21, 2019 Hi @tuanphan, thanks for the response. The CSS code you provided did the job when in Dark Mode but unfortunately it has the opposite effect when light mode is on. As seen in the image below. Link to comment
tuanphan Posted July 21, 2019 Share Posted July 21, 2019 @Chambyte I mean, wrap my code in your code ;) @media (prefers-color-scheme: dark) { body { color: #fafafa; background-color: #1a1a1a; } .blog-title a { color: #ffffff; } .post-title a { color: #ffffff !important; } blockquote p { color: #ffffff !important; } PASTE MY CODE } 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
Guest Cham Posted July 21, 2019 Share Posted July 21, 2019 (edited) You are a true star. Thank you very much @tuanphan. That worked. The menu nav on mobile is still grey but that is not much of a big deal. If anything can be done then please help, if not i can just about live with it. Edited July 21, 2019 by Cham Initial Revision Link to comment
tuanphan Posted July 21, 2019 Share Posted July 21, 2019 @Chambyte div#mobileMenuLink a { color: #fff; } 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
Guest Cham Posted July 21, 2019 Share Posted July 21, 2019 Thank you Thank you Thank you @tuanphan, your help is truly appreciated. Link to comment
Guest Cham Posted September 25, 2019 Share Posted September 25, 2019 My H2 and H3 Headings in Dark Mode are greyed out. (See Image attached Image). Any help with a CSS Code for H2 and H3 to convert to white text when the blog switches to Dark Mode? CC: @tuanphan Many thanks. Link to comment
tuanphan Posted September 26, 2019 Share Posted September 26, 2019 (edited) @Cahmbyte @media (prefers-color-scheme:dark) { h2, h3 { color: #fff !important; } } 10 minutes: check & find the solution Edited September 26, 2019 by tuanphan Initial Revision 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
Guest Cham Posted September 28, 2019 Share Posted September 28, 2019 I thank you, @tuanphan. Appreciate your help. Link to comment
MansidakS Posted June 15, 2020 Share Posted June 15, 2020 On 7/21/2019 at 10:07 AM, tuanphan said: @Chambyte I mean, wrap my code in your code 😉 @media (prefers-color-scheme: dark) { body { color: #fafafa; background-color: #1a1a1a; } .blog-title a { color: #ffffff; } .post-title a { color: #ffffff !important; } blockquote p { color: #ffffff !important; } PASTE MY CODE } @tuanphan Is there any way to use this method on just one page? I tried it but it applies to the whole website. Like I just wish one page to go to dark mode. I even tried to wrapping it in the collection ID but then it says that there's a syntax error. Like just make the background dark and the text light because I don't have any other elements on that page. Would appreciate any help! Link to comment
tuanphan Posted June 15, 2020 Share Posted June 15, 2020 1 hour ago, MansidakS said: Add to Page Settings > Advanced > Header. Each page has Page Header <style> @media (prefers-color-scheme: dark) { body { color: #fafafa; background-color: #1a1a1a; } .blog-title a { color: #ffffff; } .post-title a { color: #ffffff !important; } blockquote p { color: #ffffff !important; } PASTE MY CODE } </style> 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
MansidakS Posted June 15, 2020 Share Posted June 15, 2020 @tuanphan Thanks for the quick response. So it does turn the font to white which is great but the background is still white. Am I doing anything wrong? I think the code is not being able to override the site's style property of background color maybe? Link to comment
tuanphan Posted June 15, 2020 Share Posted June 15, 2020 5 minutes ago, MansidakS said: @tuanphan Thanks for the quick response. So it does turn the font to white which is great but the background is still white. Am I doing anything wrong? I think the code is not being able to override the site's style property of background color maybe? Can you share link to your site? 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
MansidakS Posted June 15, 2020 Share Posted June 15, 2020 @tuanphan My bad. Nvm. It worked. Just added .Main and .Header after body. So thank you so much for your help. Means a lot. I wanted to know a couple more things actually: 1. Is there a way to invert the color of the logo? I got a black logo as homepage navigation. I usually just use header { filter: invert(100%); } in custom css in order to invert the logo color but this time when I use this it inverts the whole header color. Like is there any way to target the logo individually and invert its color? 2. And, I understand it might be a long shot, but is there any way to activate the dark theme with a button instead of automatically recognizing it from the browser window? Like a switch button? Link to comment
tuanphan Posted June 15, 2020 Share Posted June 15, 2020 Q1. .logo-image .logo img { filter: invert(1); } Q2. You want to add a button, users need to click on it to change to dark mode? If yes, You need to use JavaScript, complex. If you want to find free solution, you can also post on some FB groups Squarespace Customization Resource Group Squarespace Community If you want paid solution, you can message me. 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
conversiontracking Posted December 29, 2021 Share Posted December 29, 2021 (edited) Plugin also available I just released an Automatic Dark Mode Plugin for Squarespace. Works on 7.1 and 7.0. I like it more than other plugins because you can just choose a 7.1 color palette as the dark mode. Also it doesn't have a bright flash when loading a page. Dark mode CSS for 7.0 Avenue I also have a simpler dark mode CSS snippet for Squarespace 7.0 which works on avenue. It's not nearly as good as the plugin but it will get you started 🙂 Edited April 14, 2022 by codeandtonic Freelance Squarespace developer making plugins like Full-Width Blocks, Hover effects for grid gallery and the Darkmode plugin. I know Squarespace inside out and I'm able to solve pretty much any Squarespace code problem. Get in touch here! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment