Ui: restore semi-legacy browser support (#17061)

assets/js/colors.js

@@ -48,7 +48,8 @@ function updateCssColors() {
 }
 
 // update colors on theme change
-window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", updateCssColors);
+const darkModeMatcher = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)");
+darkModeMatcher?.addEventListener("change", updateCssColors);
 updateCssColors();
 
 export const dimColor = (color) => {

assets/js/mixins/formatter.js

@@ -164,13 +164,17 @@ export default {
       return tomorrow.toDateString() === date.toDateString();
     },
     weekdayPrefix: function (date) {
-      const rtf = new Intl.RelativeTimeFormat(this.$i18n?.locale, { numeric: "auto" });
-
       if (this.isToday(date)) {
-        return ""; //rtf.formatToParts(0, "day")[0].value;
+        return "";
       }
       if (this.isTomorrow(date)) {
-        return rtf.formatToParts(1, "day")[0].value;
+        try {
+          const rtf = new Intl.RelativeTimeFormat(this.$i18n?.locale, { numeric: "auto" });
+          return rtf.formatToParts(1, "day")[0].value;
+        } catch (e) {
+          console.warn("weekdayPrefix: Intl.RelativeTimeFormat not supported", e);
+          return "tomorrow";
+        }
       }
       return new Intl.DateTimeFormat(this.$i18n?.locale, {
         weekday: "short",
@@ -288,12 +292,17 @@ export default {
         second: 1000,
       };
 
-      const rtf = new Intl.RelativeTimeFormat(this.$i18n?.locale, { numeric: "auto" });
-
       // "Math.abs" accounts for both "past" & "future" scenarios
       for (var u in units)
-        if (Math.abs(elapsed) > units[u] || u == "second")
-          return rtf.format(Math.round(elapsed / units[u]), u);
+        if (Math.abs(elapsed) > units[u] || u == "second") {
+          try {
+            const rtf = new Intl.RelativeTimeFormat(this.$i18n?.locale, { numeric: "auto" });
+            return rtf.format(Math.round(elapsed / units[u]), u);
+          } catch (e) {
+            console.warn("fmtTimeAgo: Intl.RelativeTimeFormat not supported", e);
+            return `${elapsed} ${u}s ago`;
+          }
+        }
     },
     fmtSocOption: function (soc, rangePerSoc, distanceUnit, heating) {
       let result = heating ? this.fmtTemperature(soc) : `${this.fmtPercentage(soc)}`;

vite.config.js

@@ -25,6 +25,7 @@ export default defineConfig({
   plugins: [
     legacy({
       targets: ["defaults", "iOS >= 14"],
+      modernPolyfills: ["es.promise.all-settled"],
     }),
     vuePlugin({
       template: {