Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Search the Community

Showing results for tags 'dark mode'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


About Me


Website


Location

Found 2 results

  1. I was wondering if there was any way to add custom CSS or something like that to make a "dark mode" button for my website? I am using Skye template and I was wondering! Thanks for reading and please respond quickly as possible if you can :)
  2. Hello there, here it goes a difficult coding one for squarespace beginers I've made a toggle switch that can enable a Dark Mode. So far things work quite well, unless for some details that I really don't find a way to make them right. Here it goes 1) the header. I would like a header full black, full width, at all times (dark and light mode). It seems simple but I can't find a single way to do it. I've tried this code below in css but the website keeps showing white margins on both sides of the header when in light mode because of the white background. Someone has any idea what I can do? header#header { position: sticky; top: 0; background: #010101; } 2) I would like that the first option when someone new enter on the site, was the dark mode option instead of the light, and if he/she want's to change is just toggle the switch, but I wasn't able to get that, so here is the code: <script>const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]'); function switchTheme(e) { if (e.target.checked) { document.documentElement.setAttribute('data-theme', 'dark'); } else { document.documentElement.setAttribute('data-theme', 'light'); } } toggleSwitch.addEventListener('change', switchTheme, false); function switchTheme(e) { if (e.target.checked) { document.documentElement.setAttribute('data-theme', 'dark'); localStorage.setItem('theme', 'dark'); //add this } else { document.documentElement.setAttribute('data-theme', 'light'); localStorage.setItem('theme', 'light'); //add this } } const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null; if (currentTheme) { document.documentElement.setAttribute('data-theme', currentTheme); if (currentTheme === 'dark') { toggleSwitch.checked = true; } }</script> And the css for the dark mode and toggle switch appereance: /*DARK MODE SWITCH*/ [data-theme="dark"] { --primary-color: #9A97F3; --secondary-color: #818cab; --font-color: #e1e1ff; --bg-color: #161625; --heading-color: #818cab; } [data-theme="dark"] { --primary-color: #FEFEFE; --secondary-color: #FEFEFE; --font-color: #FEFEFE; --bg-color: #010101; --heading-color: #AEAAAA; } body { background-color: var(--bg-color); color: var(--font-color); /*other styles*/ } h1 { color: var(--secondary-color); /*other styles*/ } a { color: var(--primary-color); /*other styles*/ } /*Simple css to style it like a toggle switch*/ .theme-switch-wrapper { display: flex; align-items: center; em { margin-left: 10px; font-size: 1rem; } } .theme-switch { display: inline-block; height: 34px; position: relative; width: 60px; } .theme-switch input { display:none; } .slider { background-color: #ccc; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: .4s; } .slider:before { background-color: #fff; bottom: 4px; content: ""; height: 26px; left: 4px; position: absolute; transition: .4s; width: 26px; } input:checked + .slider { background-color: #66bb6a; } input:checked + .slider:before { transform: translateX(26px); } .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } If anyone needs the url: www.utrade.com.br password: utrade
×
×
  • Create New...