Home Archive

Embed Snippet on Your Site

<script src="https://library.wpcode.com/embedjs/m5yegp62.js/"></script>

Dark Mode Toggle

Sarah Schopick

<10

Code Preview

Comments

php


	`<?php`
	`<head>`
	`<meta name="color-scheme" content="light dark" />`
	`<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />`
	`<script src="https://cdnjs.cloudflare.com/ajax/libs/Darkmode.js/1.5.7/darkmode-js.min.js"></script>`
	`<style>`
	`.checkbox {`
	`opacity: 0;`
	`position: absolute;`
	`}`

	`.checkbox-label {`
	`background-color: #111;`
	`width: 50px;`
	`height: 26px;`
	`border-radius: 50px;`
	`position: relative;`
	`padding: 5px;`
	`cursor: pointer;`
	`display: flex;`
	`justify-content: space-between;`
	`align-items: center;`
	`}`

	`.fa-moon {`
	`color: #f1c40f;`
	`}`

	`.fa-sun {`
	`color: #f39c12;`
	`}`

	`.checkbox-label .ball {`
	`background-color: #fff;`
	`width: 22px;`
	`height: 22px;`
	`position: absolute;`
	`left: 2px;`
	`top: 2px;`
	`border-radius: 50%;`
	`transition: transform 0.2s linear;`
	`}`

	`.checkbox:checked+.checkbox-label .ball {`
	`transform: translateX(24px);`
	`}`

	`.darkmode {`
	`background: black;`
	`color: #f5f5f5;`
	`}`

	`html,`
	`body,`
	`* {`
	`overflow-x: hidden;`
	`box-sizing: border-box;`
	`}`

	`#theme-toggle {`
	`float: right;`
	`margin-left: auto;`
	`margin-right: 50px;`
	`margin-top: 1rem;`
	`margin-bottom: 1rem;`
	`box-shadow: 1px;`
	`border: 1px solid currentcolor;`
	`border-radius: 1em;`
	`clear: both;`
	`}`

	`.sticky {`
	`position: sticky;`
	`}`
	`</style>`
	`</head>`

	`<body>`
	`<div class="box icon toggle btn float-end sticky" id="theme-toggle">`
	`<input type="checkbox" class="checkbox" id="checkbox">`
	`<label for="checkbox" class="checkbox-label">`
	`<i class="fas fa-moon"></i>`
	`<i class="fas fa-sun"></i>`
	`<span class="ball"></span>`
	`</label>`
	`</div> <!-- End of dark mode toggle -->`
	`</body>`

<head>
	<meta name="color-scheme" content="light dark" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Darkmode.js/1.5.7/darkmode-js.min.js"></script>
	<style>
		.checkbox {
			opacity: 0;
			position: absolute;
		}

		.checkbox-label {
			background-color: #111;
			width: 50px;
			height: 26px;
			border-radius: 50px;
			position: relative;
			padding: 5px;
			cursor: pointer;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.fa-moon {
			color: #f1c40f;
		}

		.fa-sun {
			color: #f39c12;
		}

		.checkbox-label .ball {
			background-color: #fff;
			width: 22px;
			height: 22px;
			position: absolute;
			left: 2px;
			top: 2px;
			border-radius: 50%;
			transition: transform 0.2s linear;
		}

		.checkbox:checked+.checkbox-label .ball {
			transform: translateX(24px);
		}

		.darkmode {
			background: black; 
			color: #f5f5f5;
		}

		html,
		body,
		* {
			overflow-x: hidden;
			box-sizing: border-box;
		}

		#theme-toggle {
			float: right;
			margin-left: auto;
			margin-right: 50px;
			margin-top: 1rem;
			margin-bottom: 1rem;
			box-shadow: 1px;
			border: 1px solid currentcolor;
			border-radius: 1em;
			clear: both; 
		}
		
		.sticky {
			position: sticky;
		}
	</style>
</head>

<body>
		<div class="box icon toggle btn float-end sticky" id="theme-toggle">
			<input type="checkbox" class="checkbox" id="checkbox">
			<label for="checkbox" class="checkbox-label">
				<i class="fas fa-moon"></i>
				<i class="fas fa-sun"></i>
				<span class="ball"></span>
			</label>
		</div> <!-- End of dark mode toggle -->
</body>

Embed Snippet on Your Site

Dark Mode Toggle

Comments

Add a Comment Cancel Reply