diff --git a/resources/skins.vector.styles/CSSCustomProperties.less b/resources/skins.vector.styles/CSSCustomProperties.less
index 2e8e713ca..2849de5db 100644
--- a/resources/skins.vector.styles/CSSCustomProperties.less
+++ b/resources/skins.vector.styles/CSSCustomProperties.less
@@ -16,6 +16,11 @@
 :root {
 	--font-size-medium: unit( @font-size-small, rem );
 	--line-height-medium: @line-height-small;
+	--background-color-base: @background-color-base;
+}
+
+.night-mode-palette() {
+	--background-color-base: #101418;
 }
 
 .vector-feature-custom-font-size-clientpref-1 {
@@ -27,3 +32,13 @@
 	--font-size-medium: unit( @font-size-x-large, rem );
 	--line-height-medium: 1.3;
 }
+
+html.skin-night-mode-clientpref-1 {
+	.night-mode-palette();
+}
+
+@media ( prefers-color-scheme: dark ) {
+	html.skin-night-mode-clientpref-2 {
+		.night-mode-palette();
+	}
+}
diff --git a/resources/skins.vector.styles/variables.less b/resources/skins.vector.styles/variables.less
index 9b40477e9..fbe18f230 100644
--- a/resources/skins.vector.styles/variables.less
+++ b/resources/skins.vector.styles/variables.less
@@ -59,7 +59,7 @@
 @padding-blockquote: 8px 32px;
 
 @background-color-secondary--modern: #f8f9fa;
-@background-color-page-container: @background-color-base;
+@background-color-page-container: var( --background-color-base );
 
 // Navigation
 @background-color-secondary: #f6f6f6;