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-09VSCode 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-25vscode怎么配置latex? VSCode中LaTeX的配置和使用的教程
本篇教程是在Windows系統(tǒng)上,配置VSCode中的LaTeX的參考,其中的配置是我自己在日常編寫LaTeX過程中使用的可能實(shí)用的設(shè)置,參考了互聯(lián)網(wǎng)上的很多教程,不一一列出,請(qǐng)根據(jù)實(shí)2024-12-25Vscode怎么實(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-25vscode怎么設(shè)置默認(rèn)瀏覽器? vscode默認(rèn)打開的瀏覽器為Chrome的方法
vscode如何設(shè)置默認(rèn)打開的瀏覽器為Chrome?vscode設(shè)置默認(rèn)打開的瀏覽器為Chrome為什么不還是用其他瀏覽器打開,下面我們就來看看解決辦法2024-12-25