Add support for dark mode, fixes #30

2023-03-09 09:46:11 +01:00 · 2023-03-09 09:46:11 +01:00 · 47019dafb2
parent 31b6110a2f
commit 47019dafb2
4 changed files with 85 additions and 77 deletions
--- a/package-lock.json
+++ b/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",
-      "resolved": "https://registry.npmjs.org/@types/sass/-/sass-1.43.1.tgz",
-      "integrity": "sha512-BPdoIt1lfJ6B7rw35ncdwBZrAssjcwzI5LByIrYs+tpXlj/CAkuVdRsgZDdP4lq5EjyWzwxZCqAoFyHKFwp32g==",
+      "version": "1.45.0",
+      "resolved": "https://registry.npmjs.org/@types/sass/-/sass-1.45.0.tgz",
+      "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",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "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",
-        "concat-map": "0.0.1"
+        "balanced-match": "^1.0.0"
      }
    },
    "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",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "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": "^3.1.1",
-        "once": "^1.3.0",
-        "path-is-absolute": "^1.0.0"
+        "minimatch": "^5.0.1",
+        "once": "^1.3.0"
      },
      "engines": {
-        "node": "*"
+        "node": ">=12"
      },
      "funding": {
        "url": "https://github.com/sponsors/isaacs"
@ -995,15 +995,15 @@
      }
    },
    "node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "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": "^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",
-      "resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-3.0.4.tgz",
-      "integrity": "sha512-feIyBAA5cSIxq4vq6mwGvGQTHy/wBVQbs5b+/VvE21WN8X7nonAuSqwvZv0UDBowzRka3Rh4gmLPH8rPePz3/w==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/svelte-check/-/svelte-check-3.1.0.tgz",
+      "integrity": "sha512-aSdnsGtndfqtb0dmN5qm9Zjl7wGpqh3cWF35WVCcK96TmGn2NEar4M40QW6bvaPPu089mrkZdpeD3Yar2SERBg==",
      "dev": true,
      "dependencies": {
        "@jridgewell/trace-mapping": "^0.3.17",
--- a/package.json
+++ b/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",
--- a/src/app.scss
+++ b/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;
 }
--- a/src/lib/Chat.svelte
+++ b/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}
-      ><span class="greyscale">⚙️</span></button
-    >
+    <button class="button" on:click|preventDefault={showSettings}><span class="greyscale">⚙️</span></button>
  </p>
  <p class="control">
    <button class="button is-info" type="submit">Send</button>