Vue.js应用输入文本时浏览器标签主题色重置，如何固定主题色？

嘿，这个问题我之前做移动端项目时也踩过坑！主要是部分浏览器（尤其是移动端Chrome）会在输入框获得焦点时，自动把标签栏的主题色切换成和输入框相关的系统默认色，直接覆盖了你通过<meta name="theme-color">设置的值。下面给你几个靠谱的解决办法：

方法一：用JavaScript强制锁定主题色 #

这个方法兼容性最好，不管浏览器版本都能生效。核心思路是在输入框聚焦时，重新手动设置一遍主题色的meta标签，覆盖浏览器的自动修改。

步骤如下：

1. 先获取页面上的theme-color meta元素，并提前存好目标主题色：

const themeColorMeta = document.querySelector('meta[name="theme-color"]');
const targetThemeColor = "#HEXCOL"; // 替换成你的实际颜色代码

2. 给所有可输入元素绑定focus事件，每次聚焦时重置主题色：

// 监听input和textarea的聚焦事件
document.querySelectorAll('input, textarea').forEach(input => {
  input.addEventListener('focus', () => {
    themeColorMeta.setAttribute('content', targetThemeColor);
  });
});

方法二：用CSS的theme-color声明（现代浏览器适用） #

如果你的项目只需要支持较新版本的浏览器，可以试试用CSS层面的theme-color属性，它的优先级可能比meta标签更高，能阻止浏览器的自动修改。

在你的CSS文件里添加以下代码：

/* 浅色模式下的主题色 */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    theme-color: #HEXCOL; /* 替换成你的颜色 */
  }
}

/* 深色模式下的主题色（按需配置） */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    theme-color: #HEXCOL; /* 替换成你的深色模式颜色 */
  }
}

这个方法不需要写JS，代码更简洁，但要注意兼容性：目前Chrome 99+、Edge 99+、Firefox 113+等现代浏览器支持，旧版浏览器可能不生效。

额外小提示 #

有些情况下，浏览器的自动填充功能也可能间接导致主题色变化，你可以尝试给输入框添加autocomplete="off"属性试试，但这个不是核心解决方案，主要还是前面两种方法更可靠。

内容的提问来源于stack exchange，提问作者user12463073