VSCode和webstorm怎么設(shè)置綠色護(hù)眼背景? 綠豆沙背景色的設(shè)置方法
本文介紹了如何以管理員身份運(yùn)行VSCode并安裝 background插件,通過修改用戶設(shè)置來定制編輯器、側(cè)邊欄、活動(dòng)欄等區(qū)域的背景顏色和樣式。同時(shí),還展示了在WebStorm中設(shè)置背景圖片的方法,提供了詳細(xì)的步驟和代碼示例,幫助用戶打造個(gè)性化的開發(fā)環(huán)境。
vscode
以管理員身份運(yùn)行VS Code,安裝 background插件

打開 “文件-首選項(xiàng)-設(shè)置” 用戶設(shè)置 setting

在用戶設(shè)置中輸入以下代碼,修改完后按Ctrl+S保存,可以自由選擇輸入樣式
"workbench.colorCustomizations": {
"[Atom One Light]": {
"editor.background": "#b0dab6", //編輯器背景顏色
"sideBar.background": "#b0dab6", //側(cè)邊欄背景色。側(cè)邊欄是資源管理器和搜索等視圖的容器。
"sideBarSectionHeader.background": "#9acea1", //側(cè)邊欄節(jié)標(biāo)題的背景顏色
"focusBorder": "#9acea1", //焦點(diǎn)元素的整體邊框顏色。
"foreground": "#519657", //左側(cè)資源管理器文字顏色
"activityBar.background": "#b0dab6", //活動(dòng)欄背景色?;顒?dòng)欄顯示在最左側(cè)或最右側(cè),并允許在側(cè)邊欄的視圖間切換
"activityBar.foreground": "#519657", ///活動(dòng)欄項(xiàng)在活動(dòng)時(shí)的前景色。
"activityBarBadge.background": "#519657", //活動(dòng)通知徽章背景色。
"activityBarBadge.foreground": "#FFFFFF", //活動(dòng)欄項(xiàng)在活動(dòng)時(shí)的文字顏色。
"terminal.background": "#b0dab6", //終端顏色
"tab.inactiveBackground": "#b0dab6", //非活動(dòng)選項(xiàng)卡的背景色
"tab.activeBackground": "#9acea1", //活動(dòng)選項(xiàng)卡的背景色。
"tab.activeForeground": "#519657", //活動(dòng)組中活動(dòng)選項(xiàng)卡的文字顏色。
"tab.inactiveForeground": "#97b498", //活動(dòng)組中非活動(dòng)選項(xiàng)卡的文字顏色。
"tab.border": "#c8e6c9", //活動(dòng)組中非活動(dòng)選項(xiàng)卡的前景色。
"editor.lineHighlightBackground": "#9acea1", //光標(biāo)所在行高亮內(nèi)容的背景顏色
"editor.selectionBackground": "#9acea1", //編輯器所選內(nèi)容的顏色
"editorWidget.background": "#c8e6c9", //編輯器組件(如查找/替換)背景顏色
"editorHoverWidget.background": "#9acea1", //編輯器懸停提示的背景顏色
"editorHoverWidget.border": "#9acea1", //光標(biāo)懸停時(shí)編輯器的邊框顏色
"editorLineNumber.foreground": "#9acea1", //編輯器縮進(jìn)參考線的顏色
"editorWhitespace.foreground": "#9acea1", //編輯器中空白字符的顏色
"editorIndentGuide.background": "#c8e6c9", //編輯器縮進(jìn)參考線的顏色
"editorIndentGuide.activeBackground": "#9acea1", //編輯器活動(dòng)縮進(jìn)參考線的顏色。
"editorSuggestWidget.background": "#c8e6c9", //建議小組件的背景色
"editorSuggestWidget.border": "#9acea1", //建議小組件的邊框顏色
"editorSuggestWidget.foreground": "#338a3e", //建議小組件的邊框顏色
"editorSuggestWidget.highlightForeground": "#338a3e", //建議小組件中匹配內(nèi)容的高亮顏色。
"editorSuggestWidget.selectedBackground": "#9acea1", //建議小組件中匹配內(nèi)容的高亮顏色。
"editorLineNumber.activeForeground": "#519657", //編輯器活動(dòng)行號(hào)的顏色
"input.background": "#c8e6c9", //輸入框背景色。
"input.border": "#c8e6c9", //輸入框背景色。
"badge.background": "#519657", //Badge 背景色。
"statusBar.background": "#b0dab6", //工作區(qū)打開時(shí)狀態(tài)欄的背景色。狀態(tài)欄顯示在窗口底部。。
"statusBar.foreground": "#519657", //工作區(qū)打開時(shí)狀態(tài)欄的文字顏色。
"statusBarItem.hoverBackground": "#9acea1", //懸停時(shí)的狀態(tài)欄項(xiàng)背景色。
"statusBar.noFolderBackground": "#519657", //沒有打開文件夾時(shí)狀態(tài)欄的背景色
"statusBar.debuggingBackground": "#519657", //調(diào)試程序時(shí)狀態(tài)欄的背景色
"statusBar.debuggingForeground": "#00701a", //調(diào)試程序時(shí)狀態(tài)欄的文字顏色。
"debugToolBar.background": "#9acea1", //文字顏色
"editorGroupHeader.tabsBackground": "#c8e6c9", //啟用選項(xiàng)卡時(shí)編輯器組標(biāo)題的背景顏色。編輯器組是編輯器的容器。
"button.background": "#70af72", //按鈕背景色。
"button.foreground": "#FFFFFF", //按鈕文字顏色
"button.hoverBackground": "#519657", //按鈕在懸停時(shí)的背景顏色
"extensionButton.prominentBackground": "#70af72", //擴(kuò)展中突出操作的按鈕背景色(比如 安裝按鈕)
"extensionButton.prominentHoverBackground": "#70af72", //擴(kuò)展中突出操作的按鈕被懸停時(shí)的顏色(比如 安裝按鈕)。
"scrollbar.shadow": "#81c784", //表示視圖被滾動(dòng)的滾動(dòng)條陰影
"scrollbarSlider.background": "#81c784", //滾動(dòng)條滑塊背景色
"scrollbarSlider.hoverBackground": "#81c784", //滾動(dòng)條滑塊背景色
"scrollbarSlider.activeBackground": "#81c784", //滾動(dòng)條滑塊在被點(diǎn)擊時(shí)的背景色
"list.activeSelectionBackground": "#9acea1", //已選項(xiàng)在列表或樹活動(dòng)時(shí)的背景顏色。
"list.activeSelectionForeground": "#519657", //已選項(xiàng)在列表或樹活動(dòng)時(shí)的文字顏色?;顒?dòng)的列表或樹具有鍵盤焦點(diǎn),非活動(dòng)的沒有。
"list.inactiveSelectionBackground": "#9acea1", //已選項(xiàng)在列表或樹非活動(dòng)時(shí)的背景顏色?;顒?dòng)的列表或樹具有鍵盤焦點(diǎn),非活動(dòng)的沒有。
"list.inactiveSelectionForeground": "#519657", //已選項(xiàng)在列表或樹非活動(dòng)時(shí)的文字顏色。活動(dòng)的列表或樹具有鍵盤焦點(diǎn),非活動(dòng)的沒有。
"list.hoverBackground": "#9acea1", //已在列表或樹中搜索時(shí),其中匹配內(nèi)容的高亮顏色。
"list.highlightForeground": "#9acea1", //在列表或樹中搜索時(shí),其中匹配內(nèi)容的高亮顏色。
"gitDecoration.modifiedResourceForeground": "#00600f", //已修改資源的顏色。
"dropdown.background": "#c8e6c9", //下拉列表背景色。
"dropdown.border": "#9acea1", //下拉列表背景色。
"titleBar.activeBackground": "#b0dab6", //窗口處于活動(dòng)狀態(tài)時(shí)的標(biāo)題欄背景色。請(qǐng)注意,該顏色當(dāng)前僅在 macOS 上受支持。
"titleBar.activeForeground": "#519657", //窗口處于活動(dòng)狀態(tài)時(shí)的標(biāo)題欄前景色。請(qǐng)注意,該顏色當(dāng)前僅在 macOS 上受支持。
"titleBar.inactiveBackground": "#9acea1", //窗口處于活動(dòng)狀態(tài)時(shí)的標(biāo)題欄文字顏色。請(qǐng)注意,該顏色當(dāng)前僅在 macOS 上受支持。
"titleBar.inactiveForeground": "#519657" //窗口處于非活動(dòng)狀態(tài)時(shí)的標(biāo)題欄文字顏色。請(qǐng)注意,該顏色當(dāng)前僅在 macOS 上受支持
},
},效果如下

單獨(dú)設(shè)置編輯器背景圖片
"background.customImages": [
"file:///C:/Users/Administrator/Desktop/ba.jpg"
],
"background.style": {
"content": "''",
"pointer-events": "none",
"background-position": "center",
"background-repeat": "no-repeat",
"background-size": "100%,100%",
"opacity": 0.4
},webstorm
打開-“文件-設(shè)置”-Background Image

選擇圖片路徑


效果如下

相關(guān)文章
VScode上安裝PlatformIO插件能成功安裝,嘗試卸載VScode并刪除插件,這些錯(cuò)誤仍然存在,下面我們就來看看這個(gè)問題的解決辦法2025-04-03
提升代碼搜索效率! VSCode里DeepSeek插件安裝與配置指南
今天我們將向大家介紹如何在Visual Studio Code中安裝并配置 DeepSeek 插件,幫助你更高效地進(jìn)行代碼搜索2025-04-07
提升你的編程效率! VSCode的初級(jí)使用教程超詳細(xì)版
VSCode是一款免費(fèi)且開源的代碼編輯器,因其強(qiáng)大的功能和良好的用戶體驗(yàn)而廣受歡迎,本文將詳細(xì)介紹 VSCode 的基本使用方法,并通過插圖幫助你更好地理解2025-04-03
今天我們來聊聊如何安裝和配置VS Code,讓它成為你編程路上的得力助手,這個(gè)過程其實(shí)很簡單,只要跟著我的步驟走,你絕對(duì)能搞定2025-04-03
DeepSeek怎么裝進(jìn)VSCode? 解放雙手實(shí)現(xiàn)自動(dòng)編程的教程
你有沒有想過,把最近特別火的AI編程助手DeepSeek裝進(jìn)VSCode會(huì)是什么體驗(yàn)?別說,我試了一下,真的爽到飛起2025-02-09
VSCode 1.97新升級(jí): AI主動(dòng)預(yù)測(cè)修改 提升開發(fā)者效率
軟公司已于2月7日正式推送了Visual Studio Code的1.97版本更新,此次更新的亮點(diǎn)在于,它深度整合了GitHub Copilot功能,旨在大幅提升開發(fā)者的編程效率2025-02-09
這些VSCode快捷鍵太好用! 分享14張gif演示動(dòng)圖
之前我們介紹過VS Code常用快捷鍵,單絲這次我們用gif演示的方法來介紹VS Code快捷鍵,更容易操作,方便收藏2024-12-25
vscode怎么配置latex? VSCode中LaTeX的配置和使用的教程
本篇教程是在Windows系統(tǒng)上,配置VSCode中的LaTeX的參考,其中的配置是我自己在日常編寫LaTeX過程中使用的可能實(shí)用的設(shè)置,參考了互聯(lián)網(wǎng)上的很多教程,不一一列出,請(qǐng)根據(jù)實(shí)2024-12-25
Vscode怎么實(shí)現(xiàn)遠(yuǎn)程調(diào)試項(xiàng)目? vscode遠(yuǎn)程調(diào)試go的配置教程
vscode的運(yùn)行環(huán)境是windows,想要遠(yuǎn)程調(diào)試代碼,該怎么操作呢?下面我們就來看看詳細(xì)的教程2024-12-25
vscode怎么設(shè)置默認(rèn)瀏覽器? vscode默認(rèn)打開的瀏覽器為Chrome的方法
vscode如何設(shè)置默認(rèn)打開的瀏覽器為Chrome?vscode設(shè)置默認(rèn)打開的瀏覽器為Chrome為什么不還是用其他瀏覽器打開,下面我們就來看看解決辦法2024-12-25




