🐛 Fix: attribute media not allowed on element meta in [name=theme-color]

🐛 Fix: support smooth migration from LoveIt to FixIt (#174 #182)

CHANGELOG.md

@@ -9,6 +9,8 @@ All notable changes to this project will be documented in this file.
 - :bug: Fix: add function doc2unix to unify new lines symbol between Windows and Unix/Mac OS
 - :bug: Fix: author display error in post and markdown file
 - :bug: Fix: use data attributes or class replace for custom attributes
+- :bug: Fix: attribute `media` not allowed on element meta in `[name=theme-color]`
+- :bug: Fix: support smooth migration from LoveIt to FixIt ([#174](https://github.com/hugo-fixit/FixIt/discussions/174) [#182](https://github.com/hugo-fixit/FixIt/issues/182))
 - :art: Style: change the default icons of some social links
 - :globe_with_meridians: Docs(i18n): update pt-br, de in i18n
 - :mag: Perf(SEO): enhance SEO performance

layouts/partials/head/meta.html

@@ -23,12 +23,12 @@
 <meta name="application-name" content="{{ .Site.Params.app.title | default .Site.Title }}">
 <meta name="apple-mobile-web-app-title" content="{{ .Site.Params.app.title | default .Site.Title }}">
 
-{{- with .Site.Params.app.themeColor.light -}}
-  <meta name="theme-color" media="(prefers-color-scheme: light)" content="{{ . }}">
-{{- end -}}
-
-{{- with .Site.Params.app.themeColor.dark -}}
-  <meta name="theme-color" media="(prefers-color-scheme: dark)" content="{{ . }}">
+{{- with .Site.Params.app.themeColor -}}
+  {{- $color := . -}}
+  {{- if ne (len $color) 2 -}}
+    {{- $color = dict "light" . "dark" . -}}
+  {{- end -}}
+  <meta name="theme-color" data-light="{{ $color.light }}" data-dark="{{ $color.dark }}" content="{{ $color.light }}">
 {{- end -}}
 
 {{- with .Site.Params.app.tileColor -}}

src/js/theme.js

@@ -62,6 +62,18 @@ class FixIt {
     window.objectFitImages && objectFitImages();
   }
 
+  initThemeColor() {
+    const $meta = document.querySelector('[name="theme-color"]');
+    if (!$meta) {
+      return;
+    }
+    this._themeColorOnSwitchTheme = this._themeColorOnSwitchTheme || (() => {
+      $meta.content = this.isDark ? $meta.dataset.dark : $meta.dataset.light;
+    });
+    this.switchThemeEventSet.add(this._themeColorOnSwitchTheme);
+    this._themeColorOnSwitchTheme();
+  }
+
   initSVGIcon() {
     this.util.forEach(document.querySelectorAll('[data-svg-src]'), ($icon) => {
       fetch($icon.getAttribute('data-svg-src'))
@@ -1075,6 +1087,7 @@ class FixIt {
         this.initMapbox();
         this.initPangu();
       }
+      this.initThemeColor();
       this.initSVGIcon();
       this.initMenu();
       this.initSwitchTheme();