SOURCE

let themeObj = {
  '--fontColor': '#ff0000',
  '--backgroundStyle': '#ddd'
}
function changeTheme(){
  for(let key in themeObj){
    // document.documentElement.style.setProperty(key, themeObj[key]);    				
    document.body.style.setProperty(key, themeObj[key]);
  }
}

<div class="text">CSS3变量测试 :root var()</div>
<div>var() 函数可以代替元素中任何属性中的值的任何部分。var() 函数不能作为属性名、选择器或者其他除了属性值之外的值。（这样做通常会产生无效的语法或者一个没有关联到变量的值。）</div>
<div>:root 是一个伪类，表示文档根元素，非 IE 及 ie8 及以上浏览器都支持，在: root 中声明相当于全局属性，只要当前页面引用了: root segment 所在文件，都可以使用 var() 来引用</div>


<button onclick="changeTheme()">点击测试更换主题</button>

body {
  /*头部背景颜色  父级菜单颜色*/
  --headerColor: #202d3d;
  /*子集菜单颜色*/
  --sonMenuColor: #2C3E50;
  /*子集菜单选中颜色*/
  --openSonMenuColor: #21598f;
  /*子菜单选中字体颜色*/
  --openSonFontColor: #fff;
  /*字体颜色*/
  --fontColor: #fff;
  /*整体背景颜色  or  图片*/
  --backgroundStyle: #2C3E50;
  /*view背景颜色*/
  --viewBackgroundStyle: rgba(255, 255, 255, 1);
  /*选中子菜单自字体颜色*/
  --openSonFontColor: #fff;
  /*菜单悬浮时*/
  --userBackgroundStyle: #2C3E50;
  --userFontColor: #fff;
}
body{
}
.text{
  color: var(--fontColor);
  background: var(--backgroundStyle);
}