VSCode沙绿色主题设置

最新推荐文章于 2025-07-11 19:37:12 发布

ddO_O

最新推荐文章于 2025-07-11 19:37:12 发布

阅读量1.1w

点赞数 18

分类专栏： vscode 文章标签： vscose沙绿色主题

vscode 专栏收录该内容

2 篇文章

订阅专栏

作者此前用Sublime Text 3，现安装VSCode后想设置沙绿色主题。文章参考他人文章整理设置流程，先安装atom One Light Theme主题，再通过文件-首选项-设置-点击右上角花括号编辑setting.json内容，按需设置属性，还可利用颜色选取框设置颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前一直用sublime text3,最近装了vscode想设置一款同样的沙绿色主题，所以有了这篇文章
主要参看这篇文章进行设置：https://blog.youkuaiyun.com/Lean_on_Me/article/details/84552487
内容大同小异，只是我自己又按自己的风格整理了一遍，记录在此作为备份，也供大家参考。
鸣谢原优快云作者：“单身汉子敲键盘”
在这里插入图片描述

整体效果：

在这里插入图片描述
设置流程：

1.安装 atom One Light Theme主题

在这里插入图片描述

2.设置属性

文件 -》首选项 -》设置 -》点击右上角花括号
在这里插入图片描述
编辑setting.json内容

如下图鼠标放到key上面会有具体的该属性的功能说明，按需设置即可

同上当value为rgb颜色时也可以鼠标悬浮出现颜色选取框设置合适的即可。
在这里插入图片描述
附自己的设置

{
    "workbench.colorTheme": "Atom One Light",
    "editor.fontSize": 16 ,
    "editor.mouseWheelZoom": true,
    "editor.tabSize": 2,
    "workbench.colorCustomizations": {
        "[Atom One Light]": {
            "editor.background": "#C7EDCC",   
	    "sideBar.background": "#bdddc3",
        "activityBar.background": "#f6f8f6", 
        },
    },
}

{
    "editor.fontSize": 16,
    "editor.mouseWheelZoom": true,
    "editor.tabSize": 2,
    "workbench.colorCustomizations": {
    	// 写在 Atom One Light  里面则只对该主题有效
        "[Atom One Light]": {
            "editor.background": "#c5f3cb",  
	        "sideBar.background": "#d9f1d1",
            "activityBar.background": "#ddeedd", 
            // 终端前景背景色
            "terminal.foreground" : "#2033e2",
            "terminal.background" : "#c3eebb"
        },
        "editorLineNumber.foreground": "#da8d28",
    },
    "workbench.statusBar.feedback.visible": false,
    "workbench.colorTheme": "Atom One Light",
}