profile image linking to the home page
PostsDarkmode toggle

Darkmode toggle

This is an old post from 2020. I'm keeping it here for archival purposes.

Created a little darkmode toggle button with pure CSS.

Code:

<style>
	#darkmode-switch {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	#darkmode-switch input {
		display: none;
	}

	#darkmode-switch label {
		position: relative;
		display: block;
		width: 70px;
		height: 35px;
		border-radius: 45px;
		background: rgb(76, 170, 233);
		transition: background-color 0.5s;
	}

	#darkmode-switch label .cloud {
		position: absolute;
		display: block;
		border-radius: 5px;
		background: rgb(176, 215, 241);
		transition: all 0.4s cubic-bezier(0.7, -0.5, 0.25, 1.5);
	}

	#darkmode-switch label .cloud:nth-child(1) {
		top: 11px;
		right: 12px;
		height: 6px;
		width: 14px;
	}

	#darkmode-switch label .cloud:nth-child(2) {
		top: 18px;
		right: 18px;
		width: 6px;
		height: 3px;
	}

	#darkmode-switch input:checked ~ label {
		background-color: rgb(23, 76, 109);
	}

	#darkmode-switch input:checked ~ label .cloud {
		transform: translateX(-27px);
		width: 3px;
		height: 3px;
		background: rgb(104, 144, 168);
	}

	#darkmode-switch label::after {
		box-sizing: border-box;
		content: '';
		display: block;
		position: absolute;
		width: 25px;
		height: 25px;
		margin: 5px;
		left: 0;
		top: 0;
		border-radius: 20px;
		background: rgb(235, 201, 108);
		transition: all 0.4s cubic-bezier(0.7, -0.5, 0.25, 1.5);
	}

	#darkmode-switch input:checked ~ label::after {
		left: 35px;
		box-shadow: 10px 6px 0 0 rgb(235, 201, 108);
		transform: translate(-10px, -6px);
		background: transparent;
	}
</style>

<div id="darkmode-switch">
	<input type="checkbox" id="darkmode-switch-radio" />
	<label for="darkmode-switch-radio">
		<span class="cloud"></span>
		<span class="cloud"></span>
	</label>
</div>