diff --git a/qt/Makefile b/qt/Makefile
index f5bdb480f..8079c4763 100644
--- a/qt/Makefile
+++ b/qt/Makefile
@@ -29,7 +29,7 @@ all: check
 	(cd i18n && ./build-mo-files && ./copy-qt-files)
 	@touch $@
 
-TSDEPS := $(wildcard ts/src/*.ts)
+TSDEPS := $(wildcard ts/src/*.ts) $(wildcard ts/scss/*.scss)
 
 .build/js: $(TSDEPS)
 	(cd ts && npm i && npm run build)
diff --git a/qt/aqt_data/web/.gitignore b/qt/aqt_data/web/.gitignore
new file mode 100644
index 000000000..93d402b95
--- /dev/null
+++ b/qt/aqt_data/web/.gitignore
@@ -0,0 +1,2 @@
+*.css
+
diff --git a/qt/ts/package-lock.json b/qt/ts/package-lock.json
index 3256a1878..51f6a62dc 100644
--- a/qt/ts/package-lock.json
+++ b/qt/ts/package-lock.json
@@ -34,12 +34,147 @@
       "integrity": "sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg==",
       "dev": true
     },
+    "anymatch": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz",
+      "integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==",
+      "dev": true,
+      "requires": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      }
+    },
+    "binary-extensions": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.0.0.tgz",
+      "integrity": "sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow==",
+      "dev": true
+    },
+    "braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dev": true,
+      "requires": {
+        "fill-range": "^7.0.1"
+      }
+    },
+    "chokidar": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.3.1.tgz",
+      "integrity": "sha512-4QYCEWOcK3OJrxwvyyAOxFuhpvOVCYkr33LPfFNBjAD/w3sEzWsp2BUOkI4l9bHvWioAd0rc6NlHUOEaWkTeqg==",
+      "dev": true,
+      "requires": {
+        "anymatch": "~3.1.1",
+        "braces": "~3.0.2",
+        "fsevents": "~2.1.2",
+        "glob-parent": "~5.1.0",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.3.0"
+      }
+    },
+    "fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dev": true,
+      "requires": {
+        "to-regex-range": "^5.0.1"
+      }
+    },
+    "fsevents": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.2.tgz",
+      "integrity": "sha512-R4wDiBwZ0KzpgOWetKDug1FZcYhqYnUYKtfZYt4mD5SBz76q0KR4Q9o7GIPamsVPGmW3EYPPJ0dOOjvx32ldZA==",
+      "dev": true,
+      "optional": true
+    },
+    "glob-parent": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.0.tgz",
+      "integrity": "sha512-qjtRgnIVmOfnKUE3NJAQEdk+lKrxfw8t5ke7SXtfMTHcjsBfOfWXCQfdb30zfDoZQ2IRSIiidmjtbHZPZ++Ihw==",
+      "dev": true,
+      "requires": {
+        "is-glob": "^4.0.1"
+      }
+    },
+    "is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "requires": {
+        "binary-extensions": "^2.0.0"
+      }
+    },
+    "is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
+      "dev": true
+    },
+    "is-glob": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
+      "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
+      "dev": true,
+      "requires": {
+        "is-extglob": "^2.1.1"
+      }
+    },
+    "is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true
+    },
+    "normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true
+    },
+    "picomatch": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.1.tgz",
+      "integrity": "sha512-ISBaA8xQNmwELC7eOjqFKMESB2VIqt4PPDD0nsS95b/9dZXvVKOlz9keMSnoGGKcOHXfTvDD6WMaRoSc9UuhRA==",
+      "dev": true
+    },
     "prettier": {
       "version": "1.19.1",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz",
       "integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==",
       "dev": true
     },
+    "readdirp": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.3.0.tgz",
+      "integrity": "sha512-zz0pAkSPOXXm1viEwygWIPSPkcBYjW1xU5j/JBh5t9bGCJwa6f9+BJa6VaB2g+b55yVrmXzqkyLf4xaWYM0IkQ==",
+      "dev": true,
+      "requires": {
+        "picomatch": "^2.0.7"
+      }
+    },
+    "sass": {
+      "version": "1.25.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.25.0.tgz",
+      "integrity": "sha512-uQMjye0Y70SEDGO56n0j91tauqS9E1BmpKHtiYNQScXDHeaE9uHwNEqQNFf4Bes/3DHMNinB6u79JsG10XWNyw==",
+      "dev": true,
+      "requires": {
+        "chokidar": ">=2.0.0 <4.0.0"
+      }
+    },
+    "to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "requires": {
+        "is-number": "^7.0.0"
+      }
+    },
     "typescript": {
       "version": "3.7.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.7.3.tgz",
diff --git a/qt/ts/package.json b/qt/ts/package.json
index 240bffea9..985d48d41 100644
--- a/qt/ts/package.json
+++ b/qt/ts/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "description": "Anki desktop js support files",
   "scripts": {
-    "build": "tsc --build",
+    "build": "tsc --build; sass --no-source-map scss:../aqt_data/web",
     "pretty": "prettier --write src/*.ts",
     "check-pretty": "prettier --check src/*.ts"
   },
@@ -15,6 +15,7 @@
     "@types/jqueryui": "^1.12.9",
     "@types/mathjax": "0.0.36",
     "prettier": "^1.19.1",
+    "sass": "^1.25.0",
     "typescript": "^3.7.3"
   }
 }
diff --git a/qt/aqt_data/web/deckbrowser.css b/qt/ts/scss/deckbrowser.scss
similarity index 100%
rename from qt/aqt_data/web/deckbrowser.css
rename to qt/ts/scss/deckbrowser.scss
diff --git a/qt/aqt_data/web/editor.css b/qt/ts/scss/editor.scss
similarity index 100%
rename from qt/aqt_data/web/editor.css
rename to qt/ts/scss/editor.scss
diff --git a/qt/aqt_data/web/overview.css b/qt/ts/scss/overview.scss
similarity index 100%
rename from qt/aqt_data/web/overview.css
rename to qt/ts/scss/overview.scss
diff --git a/qt/aqt_data/web/reviewer-bottom.css b/qt/ts/scss/reviewer-bottom.scss
similarity index 100%
rename from qt/aqt_data/web/reviewer-bottom.css
rename to qt/ts/scss/reviewer-bottom.scss
diff --git a/qt/aqt_data/web/reviewer.css b/qt/ts/scss/reviewer.scss
similarity index 100%
rename from qt/aqt_data/web/reviewer.css
rename to qt/ts/scss/reviewer.scss
diff --git a/qt/aqt_data/web/toolbar-bottom.css b/qt/ts/scss/toolbar-bottom.scss
similarity index 100%
rename from qt/aqt_data/web/toolbar-bottom.css
rename to qt/ts/scss/toolbar-bottom.scss
diff --git a/qt/aqt_data/web/toolbar.css b/qt/ts/scss/toolbar.scss
similarity index 93%
rename from qt/aqt_data/web/toolbar.css
rename to qt/ts/scss/toolbar.scss
index 3c661cc37..8c842b564 100644
--- a/qt/aqt_data/web/toolbar.css
+++ b/qt/ts/scss/toolbar.scss
@@ -29,6 +29,10 @@ body {
     color: #000;
 }
 
+.nightMode .hitem {
+    color: white;
+}
+
 .hitem:hover {
     text-decoration: underline;
 }
diff --git a/qt/aqt_data/web/webview.css b/qt/ts/scss/webview.scss
similarity index 75%
rename from qt/aqt_data/web/webview.css
rename to qt/ts/scss/webview.scss
index 99fdab3a5..b824b591a 100644
--- a/qt/aqt_data/web/webview.css
+++ b/qt/ts/scss/webview.scss
@@ -8,3 +8,8 @@ body {
 h1 {
     margin-bottom: 0.2em;
 }
+
+body.nightMode {
+    color: white;
+    background: #2f2f31;
+}