Coder Wrap provides free to use snippets Coder Wrap provides free to use snippets

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
Back to Header Options
Preview Source Code
Download
HTML
CSS 
/**Typeo CSS Start**/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

* {
	box-sizing: border-box;
}

body {
	font-family: "Poppins", sans-serif;
	color: #444;
	box-sizing: border-box;
	margin: 0px;
}

ul, li, a {
	list-style: none;
	text-decoration: none;
	margin: 0px;
	padding: 0px;
}

.container {
	max-width: 1280px;
	width: 100%;
	padding: 0px 15px;
	margin: auto;
}

.container-fluid {
	width: 100%;
	padding: 0px 30px;
}

/**Typeo CSS End**/

/**Switch Theme **/
.switch-theme img {
	width: 24px;
	cursor: pointer;
	display: inline-block;
}

.switch-theme .light_mode {
	display: none;
}

.darkmode .switch-theme .light_mode {
	display: block;
}

.darkmode .switch-theme .dark_mode {
	display: none;
}

.switch-theme {
	width: 26px;
	margin-left: 20px;
	height: 26px;
}

/**Switch Theme **/

/**Header Option**/
.header-scn {
	position: relative;
	width: 100%;
	border-bottom: #ccc 1px solid;
	background-color: #fff;
}

.hdr-inner {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: space-between;
	padding: 15px 0px;
	width: 100%;
}

.hdr-inner .logo {
	margin: 0px;
	font-size: 0px;
	line-height: 1;
}

.hdr-inner .logo a {
	color: #000;
	font-size: 30px;
	text-transform: uppercase;
	font-weight: 700;
}

.hdr-right {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	width: calc(100% - 210px);
	justify-content: flex-end;
}

.menu ul {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
}

.menu ul li {
	margin: 0px 20px;
}

.menu ul li a {
	font-size: 16px;
	font-weight: 400;
	color: #040C18;
	transition: 0.5s all;
	padding: 10px 0px;
	display: inline-block;
	text-transform: uppercase;
}

.menu ul li a:hover, .menu ul li.active a {
	color: #FF4820;
}

.menu ul li:last-child {
	margin-right: 0px;
}

.menu ul li.menu-btn a {
	background: #FF4820;
	border-radius: 5px;
	color: #fff;
	font-size: 16px;
	font-weight: 400;
	padding: 14px 28px;
	display: inline-block;
}

.menu ul li.menu-btn a:hover {
	background-color: #000000;
}

@media (max-width:1100px) {
	.container-fluid {
		padding: 0 15px;
	}

}

.middle-scn {
	margin-top: 60px;
}

/*Dark Theme*/
.darkmode {
	background-color: #212121;
}

.darkmode .header-scn {
	background-color: #000;
}

.darkmode .hdr-inner .logo a, .darkmode .menu ul li a {
	color: #fff;
}

.darkmode .menu ul li a:hover, .darkmode .menu ul li.active a {
	color: #FF4820;
}

.menu ul li.menu-btn a:hover {
	background-color: #fff;
	color: #000;
}

.darkmode body {
	color: #fff;
}
JS 
/*-------Switch Theme--------*/
const darkSwitchTheme = localStorage.getItem("darkthemeMode");
const lightSwitchTheme = localStorage.getItem("lightthemeMode");
const darkmode = document.querySelector('.dark_mode');
const lightmode = document.querySelector('.light_mode');
const htmlclass = document.querySelector('html');
if (darkSwitchTheme === "darkMode") {
	themeDarkmode();
}
if (lightSwitchTheme === "lightMode") {
	themeLightmode();
}
function themeDarkmode (){
	htmlclass.classList.remove('lightmode');
	htmlclass.classList.add('darkmode');
	localStorage.setItem("darkthemeMode", "darkMode");
		localStorage.setItem("lightthemeMode", "");
}
function themeLightmode (){
	htmlclass.classList.remove('darkmode');
	htmlclass.classList.add('lightmode')
	localStorage.setItem("lightthemeMode", "lightMode");
	localStorage.setItem("darkthemeMode", "");
}
darkmode.addEventListener('click', themeDarkmode);
lightmode.addEventListener('click', themeLightmode); 
/*-------Switch Theme--------*/

Related Snippets

Leave a comment

Your email address will not be published. Required fields are marked *