vibe coded frontend

Frontend/src/components/dashboard/dashboard-theme-toggle.module.scss

@@ -0,0 +1,75 @@
+.toggleButton {
+	display: grid;
+	place-items: center;
+	width: 2.75rem;
+	height: 2.75rem;
+	padding: 0;
+	border-radius: 1rem;
+	border: 1px solid var(--border-soft);
+	background: var(--surface-panel);
+	color: var(--text-muted);
+	box-shadow: var(--shadow-soft);
+	cursor: pointer;
+	transition:
+		transform 0.2s ease,
+		background-color 0.2s ease,
+		border-color 0.2s ease;
+
+	&:hover {
+		transform: translateY(-1px);
+		background: var(--surface-panel-strong);
+		border-color: var(--border-strong);
+	}
+
+	@media (min-width: 768px) {
+		width: 3rem;
+		height: 3rem;
+	}
+}
+
+.iconContainer {
+	position: relative;
+	width: 1.2rem;
+	height: 1.2rem;
+}
+
+.colorIcon {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition:
+		transform 700ms ease,
+		opacity 300ms ease;
+
+	svg {
+		width: 1.2rem;
+		height: 1.2rem;
+		stroke: currentColor;
+		fill: none;
+		stroke-width: 1.8;
+		stroke-linecap: round;
+		stroke-linejoin: round;
+	}
+}
+
+.moonWrapper {
+	transform: rotate(90deg);
+	opacity: 0;
+
+	:global([data-color-scheme="dark"]) & {
+		transform: rotate(0deg);
+		opacity: 1;
+	}
+}
+
+.sunWrapper {
+	transform: rotate(0deg);
+	opacity: 1;
+
+	:global([data-color-scheme="dark"]) & {
+		transform: rotate(-90deg);
+		opacity: 0;
+	}
+}