verobaroni

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