最近項(xiàng)目中要求實(shí)現(xiàn)夜間模式，整理一下實(shí)現(xiàn)方法。
成都創(chuàng)新互聯(lián)公司是一家專業(yè)的成都網(wǎng)站建設(shè)公司，我們專注成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷、企業(yè)網(wǎng)站建設(shè)，外鏈，廣告投放為企業(yè)客戶提供一站式建站解決方案，能帶給客戶新的互聯(lián)網(wǎng)理念。從網(wǎng)站結(jié)構(gòu)的規(guī)劃UI設(shè)計(jì)到用戶體驗(yàn)提高，創(chuàng)新互聯(lián)力求做到盡善盡美。
ps. 我們的項(xiàng)目是混合開發(fā)，所以夜間模式要通過原生交互實(shí)現(xiàn)，如果直接是h5項(xiàng)目，則可省去原生交互這塊。
step1?原生交互方法
step2? 獲取模式方法
step3?實(shí)現(xiàn)方法
1、使用css大類區(qū)分
2、針對(duì)不同class類定義css屬性全局變量
3、全局引入樣式文件（main.js中引入）
4、頁面中可定義css私有變量（包含頁面中特殊的顏色屬性，不止涉及亮度更改的圖片）
變量定義規(guī)范：--（頁面名稱）-自定義
???建議將白天與夜間模式圖片區(qū)分兩個(gè)文件夾存儲(chǔ)
5、變量使用規(guī)范
總結(jié)：
1、注意css變量的使用的兼容性，例如安卓5的手機(jī)可能識(shí)別不了變量，解決方法：postcss可以試試看
2、如果項(xiàng)目中已使用less，可直接用less來實(shí)現(xiàn)，現(xiàn)未發(fā)現(xiàn)其兼容性問題（下一篇文章我會(huì)寫less實(shí)現(xiàn)夜間模式）
el-table-column并不是一個(gè)dom節(jié)點(diǎn)，所以infotext這個(gè)類究竟用在哪，需要看下el-table-column這個(gè)組件的實(shí)現(xiàn)才知道。
用了第三方組件的必然都會(huì)遇到你這樣的問題，我說下我的解決方法，不一定是好的。
一個(gè)vue文件可以寫多個(gè)style/style，加上socped代表本組件的樣式，不污染全局。如果需要覆蓋第三方組件樣式，則不能加scoped，因此需要另寫一個(gè)style.xxx-component{...}/style，這里用一個(gè)大類包裹防止污染全局。
接著，我用比較笨的方法(有好的方法請(qǐng)告知)，就是打開f12檢查究竟要覆蓋哪些樣式，然后寫在沒有加scoped的style里即可。
其實(shí)一些好的第三方UI庫都有提供自定義樣式的方法的，這樣實(shí)現(xiàn)起來才是最便捷的。
[img]前兩天在項(xiàng)目中遇到一個(gè)問題，需要手動(dòng)去修改引入的第三方組件的CSS樣式，我第一想法就是直接在組件上新增一個(gè)自定義的class去覆蓋原有的樣式，結(jié)果當(dāng)然是行不通的（不然我現(xiàn)在也不會(huì)在這里寫這篇）。
于是我查了一下，是因?yàn)槲以趘ue組件里面將設(shè)置成了局部樣式，局部樣式只在當(dāng)前組件生效，對(duì)引入的其他組件是無法起作用的。然后我試了一下，把 scoped 去掉就行了。
或者在組件里面寫多一份全局樣式
但是如果不在style里面寫 scoped ，直接寫成全局樣式，最后可能會(huì)面臨多個(gè)組件之間樣式污染的問題。如何使得局部樣式可以覆蓋到引入的第三方組件呢，我想到以前涉及過的一個(gè)名詞 樣式穿透 ，立刻實(shí)踐了一下，果然就成了。
樣式穿透 需要定義一個(gè)外層的style，通過 可以使得socped屬性下的的樣式穿透到全局， 外層 第三方組件 或者 外層 /deep/ 第三方組件 。 是 /deep/ 的別名，但是在sass之類的樣式預(yù)處理器之中無法正確解析。
vue只是一個(gè)js框架，和你引用css沒有太大的關(guān)系，和普通的js一樣的處理方式就好。
例如你可以新建一個(gè)link標(biāo)簽，然后插入到head標(biāo)簽下之類的。
重慶分公司
重慶分公司
