VS Code 擴充推薦 - Material Icon Theme 主題

Posted on  Aug 26, 2023  in  VS Code , VS Code 擴充推薦  by  Amo Chen  ‐ 2 min read

Material Icon Theme 是 VS Code 擴充中著名的 VS Code 主題,擁有 4.9 顆星的評價, 1,900+ 萬個安裝數,是我個人正在使用的主題,也推薦給大家。

本文將介紹如何安裝與設定 Material Icon Theme 。

本文環境

Material Icon Theme

Material Icon Theme 支援超多種檔案/資料夾的圖示(Icon):

  1. 檔案類型,包含 HTML, CSS, JavaScript, XML, YAML, JSON, SVG 等等
  2. 程式語言,包含 TypeScript, Python, Go, Rust, Java, Scala 等等
  3. Framework 類型,包含 React, Vue, Next, Nuxt 等等

涵蓋率之廣,可說應有盡有,如果沒涵蓋到的話,也能夠自訂圖示。

material-icon-theme-demo.png

設定圖示飽和度(saturation)

安裝完 Material Icon Theme 之後,如果會覺得圖示色彩過於繽紛,可以選擇降低圖示的飽和度,視覺上看起來就會舒服很多,降低圖示飽和度可以用 Command Palette, 按下 Command + Shift + PCtrl + Shift + P ,然後輸入 change saturation 就可以設定介於 0 - 1 之間的值, 1 代表飽和度 100%, 建議可以改為 0.5 左右,感受會舒適一點(不改也可以,久了就會習慣)。

material-icon-theme-saturation.png

設定圖式灰階(grayscale)顯示

如果不想要圖示顯示色彩,可以開啟灰階模式,圖示會以灰色顯示,按下 Command + Shift + PCtrl + Shift + P 叫出 Command Palette 後,輸入 toggle grayscale ,選擇 ON 就可以了:

material-icon-theme-grayscale.png

material-icon-theme-grayscale-on.png

改變資料夾圖示/顏色

Material Icon Theme 預設會盡量將各種資料夾加上圖示,例如資料夾名稱為 Error 就會被替換為紅色資料夾,如果習慣用預設的資料夾圖示代表就好,可以叫出 Command Palette 後,輸入 change folder theme 後,選擇 Classic 就會變回 VS Code 預設的資料夾圖示:

material-icon-theme-change-folder-theme-classic.png

如果想改變資料夾顏色可以叫出 Command Palette 後,輸入 change folder color後進行選擇:

material-icon-theme-change-folder-color.png

總結

以上是個人覺得比較實用的設定, Material Icon Theme 頁面也有提供如何自訂圖示的說明,只是我用了一段時間倒沒發現自己有這個需要,有興趣的話可以查閱 Material Icon Theme 的官方頁面了解更多設定選項。

Enjoy!

References

Material Icon Theme - Visual Studio Marketplace

對抗久坐職業傷害

研究指出每天增加 2 小時坐著的時間,會增加大腸癌、心臟疾病、肺癌的風險,也造成肩頸、腰背疼痛等常見問題。

然而對抗這些問題,卻只需要工作時定期休息跟伸展身體即可!

你想輕鬆改變現狀嗎?試試看我們的 PomodoRoll 番茄鐘吧! PomodoRoll 番茄鐘會根據你所設定的專注時間,定期建議你 1 項辦公族適用的伸展運動,幫助你打敗久坐所帶來的傷害!

贊助我們的創作

看完這篇文章了嗎? 休息一下,喝杯咖啡吧!

如果你覺得 MyApollo 有讓你獲得實用的資訊,希望能看到更多的技術分享,邀請你贊助我們一杯咖啡,讓我們有更多的動力與精力繼續提供高品質的文章,感謝你的支持!