本主題的“主色調(diào)變換”以及“夜間模式”功能原理上均使用“CSS變量”來實現(xiàn)的。因此在進行二次開發(fā)時，對于自己新增或者重寫的樣式，建議也遵循這個規(guī)則來進行開發(fā)
主題默認(rèn)變量介紹
主題原則上使用了：主色調(diào)(primary)、基礎(chǔ)白色(white)、灰度0~灰度9(gray)來作為基調(diào)。在使用時，這些色調(diào)被主題自動生成了不同亮度、不同透明度的主色調(diào)、鄰近色調(diào)、半透明灰、半透明白等。這些顏色都是根據(jù)基調(diào)自動生成的，二次開發(fā)時只需使用這些顏色即可，無需掌握顏色的生成方法。
主色及附屬色
主色調(diào)(primary)在主題使用中，除了默認(rèn)的顏色外，還被自動生成了增亮的3個不同的等級和變暗的3個不同等級的顏色用來適應(yīng)不同場景的需要。同時還生成了不同的透明度進行使用，下面我們一一來認(rèn)識它們。
例如，當(dāng)主色調(diào)選取為?#20a0ff?時，主題自動生成了以下的顏色用在CSS樣式中：
:root {
--primary_light_3: #76c5ff; //主色調(diào)增亮3
--primary_light_2: #59b8ff; //主色調(diào)增亮2
--primary_light_1: #3dacff; //主色調(diào)增亮1
--primary_default: #20A0FF; //默認(rèn)主色調(diào)
--primary_dark_1: #0394ff; //主色調(diào)變暗1
--primary_dark_2: #0084e6; //主色調(diào)變暗2
--primary_dark_3: #0073c9; //主色調(diào)變暗3
--primary_opacity_0: rgba(32,160,255,0); //主色調(diào)完全透明
--primary_opacity_1: rgba(32,160,255,0.1); //主色調(diào)不透明度10%
--primary_opacity_2: rgba(32,160,255,0.2); //主色調(diào)不透明度20%
--primary_opacity_3: rgba(32,160,255,0.3); //主色調(diào)不透明度30%
--primary_opacity_4: rgba(32,160,255,0.4); //主色調(diào)不透明度40%
--primary_opacity_5: rgba(32,160,255,0.5); //主色調(diào)不透明度50%
--primary_opacity_6: rgba(32,160,255,0.6); //主色調(diào)不透明度60%
--primary_opacity_7: rgba(32,160,255,0.7); //主色調(diào)不透明度70%
--primary_opacity_8: rgba(32,160,255,0.8); //主色調(diào)不透明度80%
--primary_opacity_9: rgba(32,160,255,0.9); //主色調(diào)不透明度90%
}鄰近色及附屬色
鄰近色調(diào)(analogous)是由主色調(diào)(primary)根據(jù)色相偏移生成的，在主題中除了使用它本身以外，和主色調(diào)一樣，還生成了3個梯度的增亮顏色和3個梯度的變暗顏色。
R主題默認(rèn)的鄰近色是在主色調(diào)的Hue基礎(chǔ)上增加12°獲得的
暗色模式下鄰近色=主色
例如，當(dāng)主色調(diào)選取為?#20a0ff?時，主題自動生成的鄰近色為?#20baff，可在CSS中調(diào)用的變量有：
:root {
--analogous_light_3: #76d5ff; //鄰近色增亮3
--analogous_light_2: #59ccff; //鄰近色增亮2
--analogous_light_1: #3dc3ff; //鄰近色增亮1
--analogous_default: #20baff; //默認(rèn)鄰近色
--analogous_dark_1: #03b1ff; //鄰近色變暗1
--analogous_dark_2: #009fe6; //鄰近色變暗2
--analogous_dark_3: #008bc9; //鄰近色變暗3
}
基礎(chǔ)白色及附屬色
基礎(chǔ)白色(white)在主題中生成了不同的透明度進行使用。
例如，當(dāng)基礎(chǔ)白色選取為?#fff?時，可在CSS中調(diào)用的變量有：
:root {
--white_default: #FFFFFF; //基礎(chǔ)白色
--white_opacity_0: rgba(255,255,255,0); //基礎(chǔ)白色完全透明
--white_opacity_1: rgba(255,255,255,0.1); //基礎(chǔ)白色不透明度10%
--white_opacity_2: rgba(255,255,255,0.2); //基礎(chǔ)白色不透明度20%
--white_opacity_3: rgba(255,255,255,0.3); //基礎(chǔ)白色不透明度30%
--white_opacity_4: rgba(255,255,255,0.4); //基礎(chǔ)白色不透明度40%
--white_opacity_5: rgba(255,255,255,0.5); //基礎(chǔ)白色不透明度50%
--white_opacity_6: rgba(255,255,255,0.6); //基礎(chǔ)白色不透明度60%
--white_opacity_7: rgba(255,255,255,0.7); //基礎(chǔ)白色不透明度70%
--white_opacity_8: rgba(255,255,255,0.8); //基礎(chǔ)白色不透明度80%
--white_opacity_9: rgba(255,255,255,0.9); //基礎(chǔ)白色不透明度90%
}不同灰度及附屬色
本主題有灰度0~灰度9共10個灰度等級。其中：灰度0主要用于黑色顯示，并生成了不同的透明度進行使用；灰度1~灰度5用于不同等級的文字顏色；灰度6~灰度9用于邊框、背景等較淺的場景
例如，主題默認(rèn)可在CSS中調(diào)用的變量有：
:root {
--gray_0: #1F2D3D; //灰度0（最深）
--gray_1: #475669;
--gray_2: #657487;
--gray_3: #738192;
--gray_4: #8492A6;
--gray_5: #99A9BF;
--gray_6: #CAD1DB;
--gray_7: #D8E0EA;
--gray_8: #EFF2F7;
--gray_9: #F0F2F7; //灰度9（最淺）
--gray_opacity_0: rgba(31,45,61,0); //根據(jù)最深的灰度生成的不透明度0%
--gray_opacity_1: rgba(31,45,61,0.1); //根據(jù)最深的灰度生成的不透明度10%
--gray_opacity_2: rgba(31,45,61,0.2); //根據(jù)最深的灰度生成的不透明度20%
--gray_opacity_3: rgba(31,45,61,0.3); //根據(jù)最深的灰度生成的不透明度30%
--gray_opacity_4: rgba(31,45,61,0.4); //根據(jù)最深的灰度生成的不透明度40%
--gray_opacity_5: rgba(31,45,61,0.5); //根據(jù)最深的灰度生成的不透明度50%
--gray_opacity_6: rgba(31,45,61,0.6); //根據(jù)最深的灰度生成的不透明度60%
--gray_opacity_7: rgba(31,45,61,0.7); //根據(jù)最深的灰度生成的不透明度70%
--gray_opacity_8: rgba(31,45,61,0.8); //根據(jù)最深的灰度生成的不透明度80%
--gray_opacity_9: rgba(31,45,61,0.9); //根據(jù)最深的灰度生成的不透明度90%
}