使用custom properties定义颜色。
(You将需要比本示例更多的颜色）

body {
    --main-bg-color: yellow;
    --main-fg-color: black;
}

然后在暗模式样式表中覆盖它们：

@media (prefers-color-scheme: dark) {
    body {
        --main-bg-color: black;
        --main-fg-color: yellow;
    }
}

然后，如果您希望用户能够切换到您自己的UI以及使用他们的系统范围选择，请使用类再次定义它们：

body.lightMode {
    --main-bg-color: yellow;
    --main-fg-color: black;
}

body.darkMode {
    --main-bg-color: black;
    --main-fg-color: yellow;
}

然后在需要颜色名称时使用这些变量：

h1 {
    color: --main-bg-color;
}

如果希望UI更改样式，请执行以下操作：

function eventHandler() {
    const b = document.body;
    if (b.classList.contains("darkMode")) {
         b.classList.remove("darkMode");
         b.classList.add("lightMode");
    } else {
         b.classList.remove("lightMode");
         b.classList.add("darkMode");
    }
};

我想你可能有一个标题，其中列出了一个开关按钮，以切换黑暗和光明模式。标题应该因此显示在您的网站的每一个路线。
假设您的切换按钮如下所示：
于飞：

<button> (click)="changeAmbientColor()" </button>

JS：

changeAmbientColor(event: any){
    let a = document.getElementsByTagName("body")
    if(a[0].style.backgroundColor == "Gray"){
      a[0].style.backgroundColor="white"
    } else {
      a[0].style.backgroundColor="gray"
    }
  }

我只写了你可能需要的最低限度。