在開發中，我們需要實作動态切換全局主題色，對于文字顔色或者背景都很好實作，但是頁面中經常會有很多小圖示，也需要根據主題色進行切換。
這篇文章主要介紹3種最常用的實作方法。
1、使用svg圖，通過更改path的顔色來實作
2、使用png圖，利用css3濾鏡filter
3、使用字型圖示
1、使用svg圖
需要把圖示全部換成由設計妹子給了SVG圖檔來顯示，不能通過img的方式引入，這是因為img的src引入外部svg圖檔，是無法修改svg内部path的顔色值的。
例如：
<svg t="1626954008234" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2002"
width="500" height="500">
<path fill="#333333"
d="M288.51831055 288.59741211A249.62475586 249.62475586 0 0 0 219.75927734 512c14.87109375-67.4934082 49.83398438-133.44433594 104.29541016-187.9453125C378.55566406 269.53393555 444.5065918 234.59082031 512 219.71972656c-78.50830078-14.79199219-162.75146484 8.12768555-223.48168945 68.87768555z"
p-id="2003"
></path>
</svg> 我們可以：
1、修改大小：在<svg> 标簽中修改width、height 屬性（預設機關是px）
2、修改顔色：在<path> 标簽中修改fill 屬性，如果沒有這個屬性，就新增
我們隻需要動态設定svg裡path路徑的顔色值，即可實作圖示跟随主題色變化。 使用css來進行修改如下：
<style>
svg{
width:200px;
height: 200px;
}
svg path{
fill:#f00;
}
</style> 2、使用Png圖
該方法存在一定的相容性，但是移動端基本完全相容，可以放心使用。利用png圖，比svg更簡單，它是利用了CSS3濾鏡filter中的drop-shadow(drop-shadow濾鏡可以給元素或圖檔非透明區域添加投影）。
用drop-shadow添加投影模糊度為0,再隐藏原圖檔。
<img src="./cion/test.png"/>
<style>
img {
width: 200px;
height: 200px;
position: relative;
left: -50px;
border-right: 100px solid transparent;
filter: drop-shadow(100px 0px 0 red);
}
</style> 備注說明：在Chrome浏覽器下(低版本)，如果一個元素的主體部分，無論以何種方式，隻要在頁面中不可見，其drop-shadow是不可見的；實體部分哪怕有1像素可見，則drop-shadow完全可見。
使用這裡使用border-right透明邊框來解決相容問題，如果不考慮Chrome低版本浏覽器，可以不使用該屬性(以上為例，不使用該屬性需要将left值設定為負的100)。
這裡利用定位将原圖檔移除，你需要父元素設定了overflow:hide；或者其他方式來隐藏原圖檔即可。
3、使用字型圖示
字型圖示，我們可以輕松的用css來控制字型的顔色，大小，陰影等！方式一使用的svg圖檔，由于是矢量圖檔，不會随着圖檔的伸縮而影響品質，是以我們可以通過工具将svg生成字型圖示，放到項目中使用。
你可以借助一個線上生成工具：https://icomoon.io/app/
網上也有很多字型圖示庫的網站，大家可以下載下傳使用。這裡以Font Awesome字型圖示庫為例：
首頁在html文檔中的 <head> 部分，引入 font-awesome.min.css 檔案。
<link rel="stylesheet" href="../css/font-awesome.min.css"> 在頁面中使用：
<i class="icon-camera-retro"></i>
<style>
i{
font-size: 40px;
color: #f00;
}
</style> ![CSS的僞元素和僞類的差別[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)