X-Git-Url: https://git.danix.xyz/?a=blobdiff_plain;f=assets%2Fsass%2Fcomponents%2F_spotlights.scss;h=a9e9476c2a96b859085abfc2ccfb27c821458854;hb=HEAD;hp=337bc1a4768660fd47a06a8d8bbb615add7f2cf2;hpb=748286b530a4b000cac6b88bbcebb258056a9e77;p=theme-danix.xyz.git

diff --git a/assets/sass/components/_spotlights.scss b/assets/sass/components/_spotlights.scss
index 337bc1a..a9e9476 100644
--- a/assets/sass/components/_spotlights.scss
+++ b/assets/sass/components/_spotlights.scss
@@ -14,9 +14,13 @@
 		}
 
 		> section {
+			overflow: hidden;
 			@include vendor('display', 'flex');
 			@include vendor('flex-direction', 'row');
-			background-color: desaturate(lighten(_palette(bg-alt), 2), 1);
+			background-color: desaturate(lighten(_palette_light(bg-alt), 2), 1);
+			@media screen and (prefers-color-scheme: dark) {
+				background-color: desaturate(lighten(_palette_dark(bg-alt), 2), 1);
+			}
 
 			> .image {
 				background-position: center center;
@@ -33,7 +37,7 @@
 				}
 
 				&:before {
-					background: transparentize(_palette(bg), 0.1);
+					background: transparentize(_palette_light(bg), 0.1);
 					content: '';
 					display: block;
 					height: 100%;
@@ -42,6 +46,9 @@
 					position: absolute;
 					top: 0;
 					width: 100%;
+					@media screen and (prefers-color-scheme: dark) {
+						background: transparentize(_palette_dark(bg), 0.1);
+					}
 				}
 			}
 
@@ -62,7 +69,10 @@
 
 			&:nth-child(2n) {
 				@include vendor('flex-direction', 'row-reverse');
-				background-color: desaturate(lighten(_palette(bg-alt), 4), 2);
+				background-color: desaturate(lighten(_palette_light(bg-alt), 4), 2);
+				@media screen and (prefers-color-scheme: dark) {
+					background-color: desaturate(lighten(_palette_dark(bg-alt), 4), 2);
+				}
 
 				> .content {
 					@include vendor('align-items', 'flex-end');