feat(theme): add system preference (#20)

src/app/components/calendar-year/calendar-year.scss

@@ -22,10 +22,7 @@
 	align-items: center;
 	border-radius: 4px;
 	z-index: 1000;
-
-	@media (prefers-color-scheme: dark) {
-		background-color: rgba(0, 0, 0, 0.7);
-	}
+	background-color: var(--loading-overlay-bg);
 }
 
 .loading-spinner {
@@ -37,12 +34,8 @@
 	p {
 		font-size: 16px;
 		font-weight: 500;
-		color: #333;
+		color: var(--loading-text-color);
 		margin: 0;
-
-		@media (prefers-color-scheme: dark) {
-			color: #ddd;
-		}
 	}
 }
 
@@ -63,12 +56,8 @@
 		transform: translate(-50%, -50%);
 		font-size: 20px;
 		font-weight: bold;
-		color: #333;
+		color: var(--loading-text-color);
 		pointer-events: none;
-
-		@media (prefers-color-scheme: dark) {
-			color: #ddd;
-		}
 	}
 }