diff --git a/package-lock.json b/package-lock.json
index 5cab20b7..a56e154f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,11 +13,13 @@
 			},
 			"devDependencies": {
 				"@awmottaz/prettier-plugin-void-html": "^2.1.0",
+				"@csstools/postcss-light-dark-function": "^3.0.1",
 				"@eslint/js": "^10.0.1",
 				"@rollup/plugin-typescript": "^12.3.0",
 				"@stylistic/eslint-plugin": "^5.10.0",
 				"@types/bootstrap": "^5.2.10",
 				"@types/mocha": "^10.0.10",
+				"autoprefixer": "^10.5.0",
 				"copy-webpack-plugin": "^14.0.0",
 				"css-loader": "^7.1.4",
 				"css-minimizer-webpack-plugin": "^8.0.0",
@@ -28,6 +30,8 @@
 				"globals": "^17.5.0",
 				"mini-css-extract-plugin": "^2.10.2",
 				"mocha": "^11.7.5",
+				"postcss": "^8.5.15",
+				"postcss-loader": "^8.2.1",
 				"prettier": "^3.8.3",
 				"rollup": "^4.60.2",
 				"rollup-plugin-dts": "^6.4.1",
@@ -273,6 +277,61 @@
 				"@csstools/css-tokenizer": "^4.0.0"
 			}
 		},
+		"node_modules/@csstools/postcss-light-dark-function": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/@csstools/postcss-light-dark-function/-/postcss-light-dark-function-3.0.1.tgz",
+			"integrity": "sha512-tD2MMJmZ6XXCHgDythLHcXQDNi5z7KEEWPe7JeB3vPcw+YMuMabpW5ugRqndhIrui+vduhc0Md7f7yGPCmOErg==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/csstools"
+				},
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/csstools"
+				}
+			],
+			"license": "MIT-0",
+			"dependencies": {
+				"@csstools/css-parser-algorithms": "^4.0.0",
+				"@csstools/css-tokenizer": "^4.0.0",
+				"@csstools/postcss-progressive-custom-properties": "^5.1.0",
+				"@csstools/utilities": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=20.19.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.4"
+			}
+		},
+		"node_modules/@csstools/postcss-progressive-custom-properties": {
+			"version": "5.1.0",
+			"resolved": "https://registry.npmjs.org/@csstools/postcss-progressive-custom-properties/-/postcss-progressive-custom-properties-5.1.0.tgz",
+			"integrity": "sha512-lt/4yHy2GdKcGVpK4OGhBdSIq+z2PXynSusSRggn/T4y7uFurYAhdHqo/aYM+xI37vNb8rJlEKchqKKvVCXROQ==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/csstools"
+				},
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/csstools"
+				}
+			],
+			"license": "MIT-0",
+			"dependencies": {
+				"postcss-value-parser": "^4.2.0"
+			},
+			"engines": {
+				"node": ">=20.19.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.4"
+			}
+		},
 		"node_modules/@csstools/selector-resolve-nested": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/@csstools/selector-resolve-nested/-/selector-resolve-nested-4.0.0.tgz",
@@ -319,6 +378,29 @@
 				"postcss-selector-parser": "^7.1.1"
 			}
 		},
+		"node_modules/@csstools/utilities": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/@csstools/utilities/-/utilities-3.0.0.tgz",
+			"integrity": "sha512-etDqA/4jYvOGBM6yfKCOsEXfH96BKztZdgGmGqKi2xHnDe0ILIBraRspwgYatJH9JsCZ5HCGoCst8w18EKOAdg==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/csstools"
+				},
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/csstools"
+				}
+			],
+			"license": "MIT-0",
+			"engines": {
+				"node": ">=20.19.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.4"
+			}
+		},
 		"node_modules/@discoveryjs/json-ext": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-1.0.0.tgz",
@@ -3054,6 +3136,43 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/autoprefixer": {
+			"version": "10.5.0",
+			"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.5.0.tgz",
+			"integrity": "sha512-FMhOoZV4+qR6aTUALKX2rEqGG+oyATvwBt9IIzVR5rMa2HRWPkxf+P+PAJLD1I/H5/II+HuZcBJYEFBpq39ong==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/postcss/"
+				},
+				{
+					"type": "tidelift",
+					"url": "https://tidelift.com/funding/github/npm/autoprefixer"
+				},
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"browserslist": "^4.28.2",
+				"caniuse-lite": "^1.0.30001787",
+				"fraction.js": "^5.3.4",
+				"picocolors": "^1.1.1",
+				"postcss-value-parser": "^4.2.0"
+			},
+			"bin": {
+				"autoprefixer": "bin/autoprefixer"
+			},
+			"engines": {
+				"node": "^10 || ^12 || >=14"
+			},
+			"peerDependencies": {
+				"postcss": "^8.1.0"
+			}
+		},
 		"node_modules/balanced-match": {
 			"version": "4.0.4",
 			"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
@@ -5080,6 +5199,20 @@
 				"node": ">= 0.6"
 			}
 		},
+		"node_modules/fraction.js": {
+			"version": "5.3.4",
+			"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
+			"integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": "*"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/rawify"
+			}
+		},
 		"node_modules/fresh": {
 			"version": "0.5.2",
 			"resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -5975,6 +6108,16 @@
 				"node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
 			}
 		},
+		"node_modules/jiti": {
+			"version": "2.7.0",
+			"resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz",
+			"integrity": "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==",
+			"dev": true,
+			"license": "MIT",
+			"bin": {
+				"jiti": "lib/jiti-cli.mjs"
+			}
+		},
 		"node_modules/js-tokens": {
 			"version": "9.0.1",
 			"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-9.0.1.tgz",
@@ -7115,6 +7258,38 @@
 				"node": "^12 || >=14"
 			}
 		},
+		"node_modules/postcss-loader": {
+			"version": "8.2.1",
+			"resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-8.2.1.tgz",
+			"integrity": "sha512-k98jtRzthjj3f76MYTs9JTpRqV1RaaMhEU0Lpw9OTmQZQdppg4B30VZ74BojuBHt3F4KyubHJoXCMUeM8Bqeow==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"cosmiconfig": "^9.0.0",
+				"jiti": "^2.5.1",
+				"semver": "^7.6.2"
+			},
+			"engines": {
+				"node": ">= 18.12.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			},
+			"peerDependencies": {
+				"@rspack/core": "0.x || ^1.0.0 || ^2.0.0-0",
+				"postcss": "^7.0.0 || ^8.0.1",
+				"webpack": "^5.0.0"
+			},
+			"peerDependenciesMeta": {
+				"@rspack/core": {
+					"optional": true
+				},
+				"webpack": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/postcss-media-query-parser": {
 			"version": "0.2.3",
 			"resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz",
diff --git a/package.json b/package.json
index 54f5a16c..f9fcb4f8 100644
--- a/package.json
+++ b/package.json
@@ -38,11 +38,13 @@
 	},
 	"devDependencies": {
 		"@awmottaz/prettier-plugin-void-html": "^2.1.0",
+		"@csstools/postcss-light-dark-function": "^3.0.1",
 		"@eslint/js": "^10.0.1",
 		"@rollup/plugin-typescript": "^12.3.0",
 		"@stylistic/eslint-plugin": "^5.10.0",
 		"@types/bootstrap": "^5.2.10",
 		"@types/mocha": "^10.0.10",
+		"autoprefixer": "^10.5.0",
 		"copy-webpack-plugin": "^14.0.0",
 		"css-loader": "^7.1.4",
 		"css-minimizer-webpack-plugin": "^8.0.0",
@@ -53,6 +55,8 @@
 		"globals": "^17.5.0",
 		"mini-css-extract-plugin": "^2.10.2",
 		"mocha": "^11.7.5",
+		"postcss": "^8.5.15",
+		"postcss-loader": "^8.2.1",
 		"prettier": "^3.8.3",
 		"rollup": "^4.60.2",
 		"rollup-plugin-dts": "^6.4.1",
diff --git a/postcss.config.mjs b/postcss.config.mjs
new file mode 100644
index 00000000..85278376
--- /dev/null
+++ b/postcss.config.mjs
@@ -0,0 +1,6 @@
+import autoprefixer from 'autoprefixer';
+import postcssLightDarkFunction from '@csstools/postcss-light-dark-function';
+
+export default {
+	plugins: [postcssLightDarkFunction, autoprefixer]
+};
diff --git a/public/input-test.css b/public/input-test.css
index ea6a19ec..4e697fa3 100644
--- a/public/input-test.css
+++ b/public/input-test.css
@@ -23,7 +23,6 @@ input[type='text'] {
 	padding: 4px 6px 2px;
 	border: 1px solid #ccc;
 	border-radius: 4px;
-	background-color: white;
 	font-size: 16px;
 	font-weight: normal;
 	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
@@ -42,7 +41,6 @@ span[id^='mq-answer'] {
 	direction: ltr;
 	padding: 4px 5px 2px;
 	border-radius: 4px !important;
-	background-color: white;
 	margin-right: 0;
 	margin-left: 0;
 }
diff --git a/public/input-test.html b/public/input-test.html
index 07f8a4ce..53d74ce2 100644
--- a/public/input-test.html
+++ b/public/input-test.html
@@ -5,6 +5,15 @@
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<link rel="icon" href="data:;base64,iVBORw0KGgo=">
+		<script>
+			if (window.matchMedia('(prefers-color-scheme: dark)').matches)
+				document.documentElement.dataset.bsTheme = 'dark';
+			window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+				if (window.matchMedia('(prefers-color-scheme: dark)').matches)
+					document.documentElement.dataset.bsTheme = 'dark';
+				else document.documentElement.dataset.bsTheme = 'light';
+			});
+		</script>
 		<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
 		<link rel="stylesheet" href="mathquill.css">
 		<link rel="stylesheet" href="input-test.css">
diff --git a/src/css/editable.scss b/src/css/editable.scss
index 3834f613..8855b412 100644
--- a/src/css/editable.scss
+++ b/src/css/editable.scss
@@ -4,7 +4,7 @@
 	display: inline-block;
 
 	.mq-cursor {
-		border-left: 1px solid black;
+		border-left: 1px solid currentcolor;
 		margin-left: -1px;
 		position: relative;
 		z-index: 1;
diff --git a/src/css/math.scss b/src/css/math.scss
index 3f357136..f92d0ce0 100644
--- a/src/css/math.scss
+++ b/src/css/math.scss
@@ -56,7 +56,7 @@
 
 	// TODO: what's the difference between these?
 	.mq-empty {
-		background: skyblue;
+		background: light-dark(skyblue, #068);
 
 		&.mq-root-block {
 			background: transparent;
diff --git a/webpack.config.js b/webpack.config.js
index b964612b..159d4fbe 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -59,6 +59,7 @@ module.exports = (_env, argv) => {
 					use: [
 						MiniCssExtractPlugin.loader,
 						'css-loader',
+						'postcss-loader',
 						{
 							loader: 'sass-loader',
 							options: { additionalData: `$omit-font-face: ${process.env.OMIT_FONT_FACE !== undefined};` }