Save

wwwroot/vendor/toggle-dark-light-mode.css

@@ -0,0 +1,80 @@
+.toggle-checkbox {
+	position: absolute;
+	opacity: 0;
+	cursor: pointer;
+	height: 0;
+	width: 0;
+}
+
+.toggle-slot {
+	position: relative;
+	height: 2em;
+	width: 3em;
+	border: none;
+	border-radius: 10em;
+	background-color: white;
+	transition: background-color 250ms;
+}
+
+.toggle-checkbox:checked ~ .toggle-slot {
+	background-color: #374151;
+}
+
+.toggle-button {
+	transform: translate(1.6em, 0.5em);
+	position: absolute;
+	height: 1em;
+	width: 1em;
+	border-radius: 50%;
+	background-color: #ffeccf;
+	transition: background-color 250ms, border-color 250ms, transform 500ms cubic-bezier(.26, 2, .46, .71);
+}
+
+.toggle-checkbox:checked ~ .toggle-slot .toggle-button {
+	background-color: #485367;
+	transform: translate(0.5em, 0.5em);
+}
+
+.sun-icon {
+	position: absolute;
+	height: 1em;
+	width: 1em;
+	color: #ffbb52;
+}
+
+.sun-icon-wrapper {
+	position: absolute;
+	height: 1em;
+	width: 1em;
+	opacity: 1;
+	transform: translate(0.55em, 0.25em) rotate(15deg);
+	transform-origin: 50% 50%;
+	transition: opacity 150ms, transform 500ms cubic-bezier(.26, 2, .46, .71);
+}
+
+.toggle-checkbox:checked ~ .toggle-slot .sun-icon-wrapper {
+	opacity: 0;
+	transform: translate(1.6em, 0.5em) rotate(0deg);
+}
+
+.moon-icon {
+	position: absolute;
+	height: 1em;
+	width: 1em;
+	color: white;
+}
+
+.moon-icon-wrapper {
+	position: absolute;
+	height: 1em;
+	width: 1em;
+	opacity: 0;
+	transform: translate(1.6em, .5em) rotate(0deg);
+	transform-origin: 50% 50%;
+	transition: opacity 150ms, transform 500ms cubic-bezier(.26, 2.5, .46, .71);
+}
+
+.toggle-checkbox:checked ~ .toggle-slot .moon-icon-wrapper {
+	opacity: 1;
+	transform: translate(1.85em, 0.15em) rotate(-15deg);
+}