Angular Material 19在iPhone浅色模式下文本显示为白色的问题求助

问题详情 #

桌面端、安卓手机（Chrome测试）显示正常，网站默认是浅色模式，但在iPhone的Chrome和Safari浏览器中，文本均显示为白色，与浅色背景冲突，深色模式则显示正常。

相关截图 #

• 浅色模式异常：
• 深色模式正常：

当前主题配置代码 #

@use '@angular/material' as mat;
html {
    height: 100%;
    color-scheme: light dark;
    @include mat.theme((
            color: mat.$azure-palette,
            typography: Roboto,
            density: 0));
}

body {
    height: 100vh;
    margin: 0;
    background-color: #eeeeee;
    //font-family: mat.get-theme-typography($my-theme);
}

body.dark-mode {
    color-scheme: dark;
    background-color: #222222;
    color: white;
}

解决方案 #

问题根源是iOS浏览器对color-scheme的处理逻辑不同于其他平台：当html标签设置color-scheme: light dark后，iOS会自动根据系统配色调整文本颜色，但浅色模式下未显式指定文本颜色，导致白色文本与浅色背景冲突。

修改方案1：显式指定浅色模式文本颜色 #

在body的基础样式中添加文本颜色声明：

body {
    height: 100vh;
    margin: 0;
    background-color: #eeeeee;
    color: #000; // 显式设置浅色模式文本为黑色
    //font-family: mat.get-theme-typography($my-theme);
}

修改方案2：拆分color-scheme到body层级 #

将color-scheme的设置从html移到body，避免全局层级的自动颜色调整：

html {
    height: 100%;
    @include mat.theme((
            color: mat.$azure-palette,
            typography: Roboto,
            density: 0));
}

body {
    height: 100vh;
    margin: 0;
    color-scheme: light; // 浅色模式单独指定
    background-color: #eeeeee;
    color: #000;
}

body.dark-mode {
    color-scheme: dark;
    background-color: #222222;
    color: white;
}

两种方案都能解决iOS浏览器的文本颜色异常问题，推荐方案2，因为它的颜色控制更精准，避免全局样式冲突。

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