切换、自定义form表单主题颜色关键词：accent-color、prefers-color-scheme、:root、

关键词：accent-color、prefers-color-scheme、:root、var()

accent-color意为强调色，用于改变表单元素的主题颜色

目前支持的元素有：复选框<input type="checkbox">、 单选框<input type="radio"> 、区间按钮<input type="range"> 、进度条<progress>四个，这四个可以通过直接在全局设置accent-color来控制颜色。

我们可以通过配合css变量来一起使用

:root{
    --brand:red;
    accent-color:var(--brand);
 }

再加上媒体查询，根据设备的主题来定制

 :root{
      --brand:rgba(150,10,150);
      accent-color: var(--brand);
 }
 @media (prefers-color-scheme:dark) {
   :root{
     --brand:rgba(3,169,244,1);
   }
   body{
     background: #000;
     color: #fff;
   }
 }
 body{
   color-scheme: light dark;
 }

完整代码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
<title>accent-color demo</title>
<style type="text/css">

        *
        {
                margin: 0;
                padding: 0;
        }
    /* :root{
      accent-color: rgba(250,15,117);
    } */
    :root{
      --brand:rgba(150,10,150);
      accent-color: var(--brand);
    }
    @media (prefers-color-scheme:dark) {
      :root{
        --brand:rgba(3,169,244,1);
      }
      body{
        background: #000;
        color: #fff;
      }
    }
    body{
      color-scheme: light dark;
    }
    form{
      padding: 20px 20%;
    }
    fieldset{
      display: flex;
      flex-direction: column;
      padding: 20px;
      border: 1px solid var(--brand);
    }
    legend{
      font-weight: bold;
      font-size: 1.5em;
      color: var(--brand);
    }
    label{
      display: flex;
      justify-content: space-between;
      padding: 5px 0;
    }

	</style>
</head>
<body>
	<form action="">
    <fieldset>
      <legend>accent-color demo</legend>
      <label for="">
        strawberries
        <input type="checkbox" id="berrise_1" checked/>
      </label>
      <label for="">
        radio buttons
        <div>
          <input type="radio" name="accented-demo" checked />
          <input type="radio" name="accented-demo"  />
          <input type="radio" name="accented-demo"  />
        </div>
      </label>
      <label for="">
        buttons
        <div>
          <input type="text" name="accented-demo" value="asdf;ln" />
        </div>
      </label>
      <label for="">
        range slider
        <input type="range" name="" id="" />
      </label>
      <label for="">
        progress element
        <progress max="100" value="50">50%</progress>
      </label>
    </fieldset>
  </form>
</body>
</html>

参考：
developer.mozilla.org/zh-CN/docs/… mp.weixin.qq.com/s/Azf2eLdky…