如何在SSR中适配prefers-color-scheme，避免主题初始切换闪烁？

方案1：使用HTML原生媒体查询（推荐） #

直接在SSR渲染的HTML中添加两个<link>标签，通过media属性绑定系统主题偏好，浏览器会自动加载匹配当前主题的Favicon，完全无需JavaScript，从根源避免闪烁：

<!-- 深色主题Favicon -->
<link rel="icon" href="favicon.ico" media="(prefers-color-scheme: dark)">
<!-- 浅色主题及无偏好时的Favicon -->
<link rel="icon" href="light-favicon.ico" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)">

这个方案的优势是浏览器原生支持，SSR阶段直接输出静态标签即可，没有任何客户端延迟，完全不会出现主题切换闪烁。

方案2：结合用户自定义主题的SSR动态渲染 #

如果你的网站支持用户手动切换主题（而非仅依赖系统偏好），可以将用户的主题选择存储在Cookie中，SSR阶段读取Cookie值，动态渲染对应主题的Favicon：

在Angular的服务器端逻辑中（比如server.ts或服务器端组件），读取请求Cookie：

import { Request } from 'express';

function getActiveTheme(request: Request): 'dark' | 'light' {
  const themeCookie = request.cookies.theme;
  // 优先使用用户自定义主题，无则默认深色（可根据需求调整）
  return themeCookie === 'light' ? 'light' : 'dark';
}

然后在应用根组件的模板中动态绑定Favicon的href：

<link rel="icon" [href]="activeTheme === 'dark' ? 'favicon.ico' : 'light-favicon.ico'">

这种方式下，用户如果之前设置过主题，SSR会直接渲染正确的Favicon；首次访问无Cookie时，可结合方案1的媒体查询标签兜底，减少闪烁概率。

方案3：内联前置JavaScript（客户端优化） #

如果无法使用上述方案，可将主题检测逻辑内联在HTML头部最前端，让代码在DOM解析初期就执行，最大限度缩短闪烁时间：

<head>
  <script>
    const darkMatch = window.matchMedia('(prefers-color-scheme: dark)').matches;
    const favicon = document.createElement('link');
    favicon.rel = 'icon';
    favicon.href = darkMatch ? 'favicon.ico' : 'light-favicon.ico';
    document.head.appendChild(favicon);
    
    // 监听主题变化
    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
      favicon.href = e.matches ? 'favicon.ico' : 'light-favicon.ico';
    });
  </script>
  <!-- 其他头部资源 -->
</head>

相比原代码，这种方式避免了等待DOM加载完成再执行，而是直接在头部创建并插入Favicon标签，能大幅减少甚至消除闪烁现象。

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