Add support for dark mode, fixes #30

package-lock.json

@@ -14,6 +14,7 @@
         "@tsconfig/svelte": "^3.0.0",
         "@types/marked": "^4.0.8",
         "bulma": "^0.9.4",
+        "bulma-prefers-dark": "^0.1.0-beta.1",
         "postcss": "^8.4.21",
         "sass": "^1.58.3",
         "svelte": "^3.55.1",
@@ -489,12 +490,6 @@
       "integrity": "sha512-HVNzMT5QlWCOdeuBsgXP8EZzKUf0+AXzN+sLmjvaB3ZlLqO+e4u0uXrdw9ub69wBKFs+c6/pA4r9sy6cCDvImw==",
       "dev": true
     },
-    "node_modules/@types/node": {
-      "version": "18.14.4",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.14.4.tgz",
-      "integrity": "sha512-VhCw7I7qO2X49+jaKcAUwi3rR+hbxT5VcYF493+Z5kMLI0DL568b7JI4IDJaxWFH0D/xwmGJNoXisyX+w7GH/g==",
-      "dev": true
-    },
     "node_modules/@types/pug": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/@types/pug/-/pug-2.0.6.tgz",
@@ -502,12 +497,13 @@
       "dev": true
     },
     "node_modules/@types/sass": {
-      "version": "1.43.1",
+      "version": "1.45.0",
-      "resolved": "https://registry.npmjs.org/@types/sass/-/sass-1.43.1.tgz",
+      "resolved": "https://registry.npmjs.org/@types/sass/-/sass-1.45.0.tgz",
-      "integrity": "sha512-BPdoIt1lfJ6B7rw35ncdwBZrAssjcwzI5LByIrYs+tpXlj/CAkuVdRsgZDdP4lq5EjyWzwxZCqAoFyHKFwp32g==",
+      "integrity": "sha512-jn7qwGFmJHwUSphV8zZneO3GmtlgLsmhs/LQyVvQbIIa+fzGMUiHI4HXJZL3FT8MJmgXWbLGiVVY7ElvHq6vDA==",
+      "deprecated": "This is a stub types definition. sass provides its own type definitions, so you do not need this installed.",
       "dev": true,
       "dependencies": {
-        "@types/node": "*"
+        "sass": "*"
       }
     },
     "node_modules/anymatch": {
@@ -539,13 +535,12 @@
       }
     },
     "node_modules/brace-expansion": {
-      "version": "1.1.11",
+      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
       "dev": true,
       "dependencies": {
-        "balanced-match": "^1.0.0",
+        "balanced-match": "^1.0.0"
-        "concat-map": "0.0.1"
       }
     },
     "node_modules/braces": {
@@ -575,6 +570,12 @@
       "integrity": "sha512-86FlT5+1GrsgKbPLRRY7cGDg8fsJiP/jzTqXXVqiUZZ2aZT8uemEOHlU1CDU+TxklPEZ11HZNNWclRBBecP4CQ==",
       "dev": true
     },
+    "node_modules/bulma-prefers-dark": {
+      "version": "0.1.0-beta.1",
+      "resolved": "https://registry.npmjs.org/bulma-prefers-dark/-/bulma-prefers-dark-0.1.0-beta.1.tgz",
+      "integrity": "sha512-ti4sKxIIrTAvGtsYc9Rk66SUZSH/j63EU1hApQijQVlKFF0qBLGSb8E16HhI83KJaIeYP4aAHQv2tj0ara831A==",
+      "dev": true
+    },
     "node_modules/callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -780,20 +781,19 @@
       "dev": true
     },
     "node_modules/glob": {
-      "version": "7.2.3",
+      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
-      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==",
       "dev": true,
       "dependencies": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
         "inherits": "2",
-        "minimatch": "^3.1.1",
+        "minimatch": "^5.0.1",
-        "once": "^1.3.0",
+        "once": "^1.3.0"
-        "path-is-absolute": "^1.0.0"
       },
       "engines": {
-        "node": "*"
+        "node": ">=12"
       },
       "funding": {
         "url": "https://github.com/sponsors/isaacs"
@@ -995,15 +995,15 @@
       }
     },
     "node_modules/minimatch": {
-      "version": "3.1.2",
+      "version": "5.1.6",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
       "dev": true,
       "dependencies": {
-        "brace-expansion": "^1.1.7"
+        "brace-expansion": "^2.0.1"
       },
       "engines": {
-        "node": "*"
+        "node": ">=10"
       }
     },
     "node_modules/minimist": {
@@ -1169,46 +1169,6 @@
         "purgecss": "bin/purgecss.js"
       }
     },
-    "node_modules/purgecss/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "dev": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
-    "node_modules/purgecss/node_modules/glob": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
-      "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==",
-      "dev": true,
-      "dependencies": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^5.0.1",
-        "once": "^1.3.0"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/purgecss/node_modules/minimatch": {
-      "version": "5.1.6",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
-      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
-      "dev": true,
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -1289,6 +1249,48 @@
         "rimraf": "bin.js"
       }
     },
+    "node_modules/rimraf/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/rimraf/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/rimraf/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/rollup": {
       "version": "3.18.0",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.18.0.tgz",
@@ -1427,9 +1429,9 @@
       }
     },
     "node_modules/svelte-check": {
-      "version": "3.0.4",
+      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-3.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-3.1.0.tgz",
-      "integrity": "sha512-feIyBAA5cSIxq4vq6mwGvGQTHy/wBVQbs5b+/VvE21WN8X7nonAuSqwvZv0UDBowzRka3Rh4gmLPH8rPePz3/w==",
+      "integrity": "sha512-aSdnsGtndfqtb0dmN5qm9Zjl7wGpqh3cWF35WVCcK96TmGn2NEar4M40QW6bvaPPu089mrkZdpeD3Yar2SERBg==",
       "dev": true,
       "dependencies": {
         "@jridgewell/trace-mapping": "^0.3.17",

package.json

@@ -17,6 +17,7 @@
     "@tsconfig/svelte": "^3.0.0",
     "@types/marked": "^4.0.8",
     "bulma": "^0.9.4",
+    "bulma-prefers-dark": "^0.1.0-beta.1",
     "postcss": "^8.4.21",
     "sass": "^1.58.3",
     "svelte": "^3.55.1",

src/app.scss

@@ -68,12 +68,19 @@ $modal-content-width: 1000px;
 
 @keyframes pulse {
   0% {
-    background-color: $info-light; /* Green */
+    background-color: initial; /* Default color */
   }
   50% {
-    background-color: $danger-light; /* Red */
+    background-color: $danger; /* Red */
   }
   100% {
-    background-color: $info-light /* Green */
+    background-color: initial /* Default color */
   }
+}
+
+/* Support for dark mode */
+$modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove this once a new version of bulma-prefers-dark is released
+@import "/node_modules/bulma-prefers-dark/build/bulma-prefers-dark.sass";
+.modal-card-body { // remove this once https: //github.com/jloh/bulma-prefers-dark/pull/90 is merged and released
+  background-color: $background-dark;
 }

src/lib/Chat.svelte

@@ -395,14 +395,12 @@
     />
   </p>
   <p class="control" class:is-hidden={!recognition}>
-    <button class="button is-info is-light" class:is-pulse={recording} on:click|preventDefault={recordToggle}
+    <button class="button" class:is-pulse={recording} on:click|preventDefault={recordToggle}
       ><span class="greyscale">🎤</span></button
     >
   </p>
   <p class="control">
-    <button class="button is-link is-light" on:click|preventDefault={showSettings}
+    <button class="button" on:click|preventDefault={showSettings}><span class="greyscale">⚙️</span></button>
-      ><span class="greyscale">⚙️</span></button
-    >
   </p>
   <p class="control">
     <button class="button is-info" type="submit">Send</button>