仅使用HTML实现网页跟随系统自动切换Light/Dark Mode的技术问询

嘿，这个需求有点意思！不过得先跟你说清楚：纯HTML本身没办法实现跟随系统深色/浅色模式的自动切换——毕竟HTML只管页面的结构，要控制元素的颜色、背景这些视觉表现，肯定离不开样式规则（也就是CSS）。不过如果是允许把CSS内嵌在HTML里的话，有个超简单的方案，刚好符合你要的「1-2行代码、无需第三方库、自动跟随系统、实时切换」的要求：

只需要在HTML的<head>里加一行内嵌样式：

<style>:root { color-scheme: light dark; }</style>

给你个完整的示例参考：

<!DOCTYPE html>
<html>
<head>
  <style>:root { color-scheme: light dark; }</style>
</head>
<body>
  <h1>这是测试标题</h1>
  <span>hello world</span>
  <input type="text" placeholder="试试输入内容">
</body>
</html>

这个color-scheme: light dark;规则会告诉浏览器：当前页面支持浅色和深色两种配色方案。浏览器会自动根据系统的深色/浅色偏好，给页面的文本、背景、表单元素（比如你提到的<input>）套用对应的默认样式，而且当用户在系统设置里切换主题时，页面会实时同步切换，完全不需要刷新，也不用加任何切换按钮。

要是你严格要求「完全不使用任何CSS」（连内嵌的style标签都不行），那确实没有办法实现这个需求，毕竟HTML本身没有控制样式的能力。但上面的方案几乎就是一行核心代码，完美匹配你的其他所有要求~

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