b2b-colors-v3

by Petr Haluza

HTML

<body>
<div id="wrap">

<header>
<div class="header-message-box">
<div class="container"><b>bílý</b> text na <b>černým</b> pozadí</div>
</div>
	<div class="container">
	
		Header	

    <label class="b2b-theme-switch" for="b2b-theme-switch"> Tma
    <input type="checkbox" id="b2b-theme-switch" />

  </label>


	</div><!-- /containr -->
</header>

<main>
	<section>
		<div class="container">
			Section 1
		</div><!-- /containr -->
	</section>
</main>

<footer>
	<div class="container">
		Footer
	</div><!-- /containr -->
</footer>

</div>
</body>

CSS

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

:root {
	--messageBox-bg: #000;
	--messageBox-text: #fff;
	--wrap-bg: linear-gradient(0deg, rgba(29, 47, 67, 0.05) 19.16%, rgba(196, 196, 196, 0) 59.55%), radial-gradient(102.29% 81.78% at 50% 30%, rgba(255, 255, 255, 0) 5%, rgb(211, 219, 227) 100%);
	--body-bg: #f1f5f9;
	--body-text: #252f3f;
}


[data-theme="dark"] {
	--messageBox-bg: #fff;
	--messageBox-text: #000;
	--wrap-bg: linear-gradient(0deg, #1d1f23, #0d0f13);
	--body-bg: #1d1f23;
	--body-text: #f1f5f9;
  }
  


.dark {color: red}

body {font-family: "DM Sans", sans-serif; font-optical-sizing: auto; font-size: 15px; background: var(--body-bg); color: var(--body-text);}

#wrap { min-height:90vh; padding:0; margin:0; display: flex; flex-direction: column; background: var(--wrap-bg);}

.container { max-width: 800px; width: 100%; margin: 0 auto}
#wrap > header {}
#wrap > main {}
#wrap > footer { margin-top: auto}

.header-message-box { background: var(--messageBox-bg); color: var(--messageBox-text); padding: .65em 0}

JavaScript

// HAPv25 DarkMode
const toggleSwitch = document.querySelector('.b2b-theme-switch input[type="checkbox"]');
const currentTheme = localStorage.getItem('100mega-b2b-theme');
if (currentTheme) {
  document.documentElement.setAttribute('data-theme', currentTheme);
  if (currentTheme === 'dark') { toggleSwitch.checked = true; }
}
function switchTheme(e) {
  if (e.target.checked) { document.documentElement.setAttribute('data-theme', 'dark'); localStorage.setItem('100mega-b2b-theme', 'dark'); }
  else { document.documentElement.setAttribute('data-theme', 'light'); localStorage.setItem('100mega-b2b-theme', 'light'); }    
}
toggleSwitch.addEventListener('change', switchTheme, false);
// konec HAPv25 DarkMode