Fix build of output files

Author: hyperupcall

Gulpfile.js

@@ -61,12 +61,17 @@ export async function build() {
 	let postCssPlugins = [postcssImport, autoprefixer]
 
 	deleteSync(['dist/*', '!dist'])
+	src('site/both/styles/fox.css')
+		.pipe(postcss(postCssPlugins))
+		.pipe(rename('fox-min.css'))
+		.pipe(dest('dist'))
+		.pipe(rename('fox.min.css'))
+		.pipe(dest('dist'))
+
 	src('site/light/styles/fox.css')
 		.pipe(postcss(postCssPlugins))
 		.pipe(rename('fox-light.min.css'))
 		.pipe(dest('dist'))
-		.pipe(rename('fox-min.css'))
-		.pipe(dest('dist'))
 
 	src('site/dark/styles/fox.css')
 		.pipe(postcss(postCssPlugins))

dist/fox-min.css

@@ -1084,37 +1084,75 @@ summary {
 	border-radius: var(--border-radius);
 }
 
-:root {
-	--html-text-color: var(--oc-gray-9);
-	--html-bg-color: var(--oc-white);
+@media (prefers-color-scheme: dark) {
+	:root {
+		--html-text-color: var(--oc-gray-0);
+		--html-bg-color: var(--oc-gray-9);
+
+		/* background levels */
+		--bg-0: var(--oc-gray-9);
+		--bg-1: var(--oc-gray-8);
+		--bg-2: var(--oc-gray-7);
+		--bg-3: var(--oc-gray-6);
+
+		/* borders */
+		--border-color-light: var(--oc-gray-8);
+		--border-color-dark: var(--oc-gray-4);
+
+		/* a */
+		--a-normal: var(--oc-blue-6);
+		--a-visited: var(--oc-grape-8);
+		--a-hover: var(--oc-grape-3);
+		--a-active: var(--oc-grape-3);
+
+		/* ins, del */
+		--del-bg-color: var(--oc-red-8);
+		--ins-bg-color: var(--oc-green-8);
+
+		/* mark */
+		--mark-bg-color: var(--oc-yellow-7);
+
+		/* u */
+		--u-underline-color: var(--oc-red-4);
+
+		/* form */
+		--form-input-bg-color: var(--oc-gray-7);
+	}
+}
 
-	/* background levels */
-	--bg-0: var(--oc-gray-0);
-	--bg-1: var(--oc-gray-1);
-	--bg-2: var(--oc-gray-2);
-	--bg-3: var(--oc-gray-3);
+@media (prefers-color-scheme: light) {
+	:root {
+		--html-text-color: var(--oc-gray-9);
+		--html-bg-color: var(--oc-white);
 
-	/* borders */
-	--border-color-light: var(--oc-gray-3);
-	--border-color-medium: var(--oc-gray-4);
-	--border-color-dark: var(--oc-gray-8);
+		/* background levels */
+		--bg-0: var(--oc-gray-0);
+		--bg-1: var(--oc-gray-1);
+		--bg-2: var(--oc-gray-2);
+		--bg-3: var(--oc-gray-3);
+
+		/* borders */
+		--border-color-light: var(--oc-gray-3);
+		--border-color-medium: var(--oc-gray-4);
+		--border-color-dark: var(--oc-gray-8);
 
-	/* a */
-	--a-normal: var(--oc-blue-5);
-	--a-visited: var(--oc-grape-3);
-	--a-hover: var(--oc-grape-8);
-	--a-active: var(--oc-grape-8);
+		/* a */
+		--a-normal: var(--oc-blue-5);
+		--a-visited: var(--oc-grape-3);
+		--a-hover: var(--oc-grape-8);
+		--a-active: var(--oc-grape-8);
 
-	/* ins, del */
-	--del-bg-color: var(--oc-red-2);
-	--ins-bg-color: var(--oc-green-2);
+		/* ins, del */
+		--del-bg-color: var(--oc-red-2);
+		--ins-bg-color: var(--oc-green-2);
 
-	/* mark */
-	--mark-bg-color: var(--oc-yellow-2);
+		/* mark */
+		--mark-bg-color: var(--oc-yellow-2);
 
-	/* u */
-	--u-underline-color: var(--oc-red-4);
+		/* u */
+		--u-underline-color: var(--oc-red-4);
 
-	/* form */
-	--form-input-bg-color: var(--oc-white);
+		/* form */
+		--form-input-bg-color: var(--oc-white);
+	}
 }