Less var(:root) 处理正常模式和暗黑模式或其他多种样式

1. 创建样式文件
   在样式文件中定义好正常模式和暗黑模式中的css样式，并确认正常模式和暗黑模式在什么条件下进行调用。

   // theme.less
   .light-variable {
       --color: red;
       --background-color: red;
   }
   
   .dark-variable {
       --color: #fff;
       --background-color: #000;
   }
   
   :root { // 根样式，默认情况下调用的样式
       .light-variable;
   }
   
   // 方法一和方法二可混用
   // 方法一：
   // css媒体特性 使用媒体查询来判断用户是否将系统的主题设置为亮色或暗色。
   @media (prefers-color-scheme: dark) {
       :root {
           .dark-variable;
       }
   }
   @media (prefers-color-scheme: light) {
       :root {
           .dark-variable;
       }
   }
   
   // 方法二：
   // 判断文档根对象上是否存在 user-color-scheme 属性，其是否有值为 dark ，若有则执行 .dark-variable 里定义的样式
   [user-color-scheme='dark'] {
       .dark-variable
   }
   // 同上
   [user-color-scheme='light'] {
       .light-variable
   }
   

2. 引入样式文件，若使用了第二种方法，则需要在项目的根元素上给定一个自定义属性

   // APP.vue
   <script>
   	created() {
   		let model = 'lihgt';
   		if(model === 'dark') {
   			document
   			.querySelector(":root")
   			.documentElement.setAttribute('user-color-scheme', 'dark');
   		}else if(model === 'lihgt') {
   			// 因为在创建样式时使用了根元素默认调用 .light-variable; 则在此可省略正常模式判断
   			document
   			.querySelector(":root")
   			.documentElement.setAttribute('user-color-scheme', 'light');
   		}
   	}
   </script>
   
   <style lang="less">
   @import './theme.less';
   </style>