精华内容
下载资源
问答
  • 10个漂亮的VSCode浅色(Light)主题

    千次阅读 2020-08-27 13:54:43
    由于大多数程序员会在白天花大部分时间编码,所以一个漂亮的浅色主题是必不可少的。 在本文中,我将为那些不想在黑暗主题中编码的人分享10个很棒的浅色主题,你现在就可以开始使用这些主题之一。 1. Atom One Light ...

    微信搜索【前端全栈开发者】关注这个脱发、摆摊、卖货、持续学习的程序员的公众号,第一时间阅读最新文章,会优先两天发表新文章。关注即可大礼包,送某网精品视频课程网盘资料,准能为你节省不少钱!

    为VS Code选择主题时,可以使用的数量几乎是无限的。我之前写过一篇文章,介绍了VS Code的漂亮主题。但是,有一位细心的读者提到,这些主题都是黑暗主题。

    在白天敲代码的时候,一般建议使用浅色(Light)的主题。由于大多数程序员会在白天花大部分时间编码,所以一个漂亮的浅色主题是必不可少的。

    在本文中,我将为那些不想在黑暗主题中编码的人分享10个很棒的浅色主题,你现在就可以开始使用这些主题之一。

    1. Atom One Light

    Atom One Light主题是安装次数最多的light主题,拥有超过300K的安装量,这是一个受欢迎的Light主题。该主题基于Atom的One Light主题,并且是市场上评价最高的Light主题之一。

    2. Github Light

    Github的Light主题看起来很干净。顾名思义,它是基于GitHub的外观和视觉创建的,所以看起来应该很熟悉。

    这个主题有两种形式:一个是纯白色背景,一个是灰色背景。随着近65K的安装,这是一个相当广泛使用的Light主题。

    我个人很喜欢灰色背景,看起来像这样:

    3. Brackets Light Pro

    Brackets Light Pro凭借其漂亮的颜色而成为引人注目的主题。就像Github Light主题一样,它的下载量接近65K,这使其成为安装频率更高的主题之一。

    总体来说,该主题的外观非常简洁,而且对眼睛来说真的很舒服。

    4. Hop Light

    根据其描述,Hop Light主题是具有友好颜色的主题。这个主题的真正优点是对比度——明亮,但又不会太亮。这个主题的鲜明对比使所有内容都易于阅读。

    5. Snazzy Light

    据笔者了解,这个主题的主要目标是在明亮的环境光条件下表现出清晰鲜明的色彩。这应该使主题适合的工作,例如,即使在强烈的阳光下处理工作。

    如果你喜欢在浅色主题中工作,那么Snazzy Light绝对适合你。

    6. Primer Light

    尽管这个主题只安装了9K多一点,但Primer Light是一个外观很棒的主题。这个主题是一个从Sublime Text移植的,因此,这个主题可能看起来很熟悉你,如果你以前用过Sublime Text。

    7. Monokai Light

    Monokai Light主题因其鲜艳的色彩而脱颖而出,这是Monokai配色方案的特点。这相当于Visual Studio Marketplace上的各种深色Monokai主题的浅色版。

    8. Bluloco Light

    Bluloco Light是一个奇特而又复杂的主题,在调色板中有各种各样的颜色。这个主题的特点是更全面地使用了语法范围和颜色的一致性,并充分考虑到美观、对比和可读性。

    这个主题最初是从美丽的One Light主题分叉出来的。随着90K安装,它是一个更受欢迎的Light主题。

    9. Blue Light

    Blue Light是一种大多数为蓝色的主题——正如你可以通过其名称来分辨的那样。这个主题的目标是尽可能的保持简单。例如,为了消除和避免干扰,只使用了几种颜色,无论是UI还是语法着色。除此之外,红色的颜色只用于错误。

    10. Solarized Light

    Solarized Light主题还有有一个暗色版本。这个主题的Light版有一个非常有特色的背景颜色,你要么爱要么恨。

    如果你不喜欢粗体的存储令牌(类型和修改器),那么你可以选择Solarized Light(无粗体)主题。这个主题去掉了所有的粗体风格。

    展开全文
  • vscode更换主题颜色(护眼色)

    千次阅读 2020-12-31 11:14:22
    刚开始学前端的时候用的是HBuilder,后来想用VScode发现主题颜色太丑了,试着下载了好几个也是不合心意,于是自己改!对于我这种经常长时间盯电脑的人来讲,当然是改成护眼色了! 首先将主题颜色设置成Atom One ...

    Microsoft在2015年4月30日Build 开发者大会上正式宣布了 Visual Studio Code 项目:一个运行于 Mac OS X、Windows和 Linux 之上的,针对于编写现代 Web 和云应用的跨平台源代码编辑器。
    该编辑器支持多种语言和文件格式的编写:如:F#、HandleBars、Markdown、Python、Java、PHP、Haxe、Ruby、Sass、Rust、PowerShell、Groovy、R、Makefile、HTML、JSON、TypeScript、Batch、Visual Basic、Swift、Less、SQL、XML、Lua、Go、C++、Ini、Razor、Clojure、C#、Objective-C、CSS、JavaScript、Perl、Coffee Script、Dockerfile。

    刚开始学前端的时候用的是HBuilder,后来想用VScode发现主题颜色太丑了,试着下载了好几个也是不合心意,于是自己改!对于我这种经常长时间盯电脑的人来讲,当然是改成护眼色了!

    1. 首先将主题颜色设置成Atom One Light,打开管理——颜色主题,没有的话下载安装一下。在这里插入图片描述
      在这里插入图片描述

    2. 然后打开设置,在右上角打开json文件,将以下代码全部替换进去,保存。
      在这里插入图片描述

    {
        "editor.fontSize": 16,
        "editor.mouseWheelZoom": true,
        "editor.tabSize": 2,
        "workbench.colorCustomizations": {
        	// 写在 Atom One Light  里面则只对该主题有效
            "[Atom One Light]": {
                "editor.background": "#c5f3cb",  
    	        "sideBar.background": "#b8e4be",
                "activityBar.background": "#9cce9c", 
                // 终端前景背景色
                "terminal.foreground" : "#141416",
                "terminal.background" : "#a0ecd9",
    
                "editor.selectionHighlightBorder": "#94767c00",
                "editor.selectionHighlightBackground": "#f3bf708c",
                "editorIndentGuide.activeBackground":"#9ba4af",
                "editorBracketMatch.background": "#ff8a05a9",
                "editorBracketMatch.border": "#ff0000",
                "tab.activeBackground": "#c0d9f070",
    
                "titleBar.activeBackground": "#839eb870"
    
            },
            "editorLineNumber.foreground": "#f19012",
        },
        "workbench.statusBar.feedback.visible": false,
        "workbench.colorTheme": "Atom One Light",
        "workbench.startupEditor": "newUntitledFile",
    }
    
    1. 效果如下图所示:
      在这里插入图片描述

    效果
    更多软件背景颜色设置:
    网红护眼色——豆沙绿
    Notepad++更改背景颜色(护眼色)

    展开全文
  • 棱镜 基于默认灯光主题的灯光主题推荐设置 "editor.scrollbar.verticalScrollbarSize" : 18 ,
  • VScode 浅灰色主题

    千次阅读 2020-11-09 10:20:43
    VScode 浅灰色主题 Github Light Theme - Gray 以前都喜欢用深色主题,就是黑色的...然后就找了找浅色主题,找到了这个Github Light Theme,分白色和浅灰色,我是喜欢用浅灰色的不刺眼,柔和舒服。推荐给大家! ...

    VScode 浅灰色主题

    Github Light Theme - Gray

    以前都喜欢用深色主题,就是黑色的感觉不伤眼,但是最近觉得看深色主题眼睛感觉更累,记忆力不集中的样子(个人感觉哈)。
    然后就找了找浅色主题,找到了这个Github Light Theme,分白色和浅灰色,我是喜欢用浅灰色的不刺眼,柔和舒服。推荐给大家!

    展开全文
  • 或者在设置--外观里面进行细致设置 vscode官网:https://marketplace.visualstudio.com/search?target=VSCode&category=Themes&sortBy=Installs,大家可以选择自己喜欢的主题 主题推荐 One Dark Pro: ...

    相关文章:


    VSCode 主题设置推荐,自定义配色方案,修改注释高亮颜色

    设置主题:

    个人比较忠爱vscode的界面,感觉比pycharm要更美观点,虽然两个都装了,但还是会习惯性打开vscode进行调试。下面是我使用的主题。

     

    或者在设置--外观里面进行细致设置

    vscode官网:https://marketplace.visualstudio.com/search?target=VSCode&category=Themes&sortBy=Installs,大家可以选择自己喜欢的主题

    主题推荐

    • One Dark Pro:

    https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme

    最新版本3.10.12 2021.4.10更新,下载量还是很多的,也很不错几面清新舒适

    ScreenShot

     

    • Palenight Theme

    https://marketplace.visualstudio.com/items?itemName=whizkydee.material-palenight-theme

    2.0.1最新更新版本2020.9.21,界面比较有个性。

     

    • Monokai Pro

    https://marketplace.visualstudio.com/items?itemName=monokai.theme-monokai-pro-vscode

    VersionLast Updated 
    1.1.192021/4/6
    • Dracula Official

    https://marketplace.visualstudio.com/items?itemName=dracula-theme.theme-dracula

    VersionLast Updated 
    2.22.32020/11/24

    暗紫色的色调是这个主题与其他主题与众不同的地方。我很喜欢!!

    • One Monokai Theme

    https://marketplace.visualstudio.com/items?itemName=azemoh.one-monokai

    多彩的主题! 很多颜色,无处不在

    VersionLast Updated 
    0.5.02020/10/16
    • Material Theme

    https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme

    VersionLast Updated 
    33.2.22021/3/15

    干净简约。

    • Panda Theme

    https://marketplace.visualstudio.com/items?itemName=tinkertrain.theme-panda

    VersionLast Updated 
    1.3.02018/6/30

    自定义配色方案

    首先进入安装vscode目录找到想要修改调整的主题,以我的文件路径为例:H:\VScode\Microsoft VS Code\resources\app\extensions,主题配置文件都位于resources/app/extensions目录中,以theme-开头的目录即为颜色主题配置:

     

    每个颜色主题配置目录包含以下文件:其中package.json我们可以用来配色方案。

    打开

    {"name":"theme-monokai","displayName":"%displayName%",
    "description":"%description%","version":"1.0.0",
    "publisher":"vscode",
    "license":"MIT","engines":{"vscode":"*"},
    "contributes":{"themes":[{"id":"Monokai","label":"%themeLabel%",
    "uiTheme":"vs-dark","path":"./themes/monokai-color-theme.json"}]},
    "repository":{"type":"git","url":"https://github.com/microsoft/vscode.git"}}
    参数名作用
    name主题ID,必需在VSCode中全局唯一,即所有主题的package.json中该值均不能重复
    contributes -> themes -> label主题名,“文件-首选项-颜色主题”的列表中显示该值
    contributes -> themes -> uiThemeVSCode整体的UI主题,vs为浅色主题
    contributes -> themes -> path定义配色方案的文件名,如为相对路径则相对于此文件

    再打开themes文件夹下monokai-color-theme.json进行配置。

    参数名作用
    colorsVSCode各个UI组件的颜色
    tokenColors语法高亮颜色

    colors节点的内容直接通过键值对参数描述,

    以下列举几个参数的作用:

    图示参数名作用
    2activityBar.background活动栏背景色
    1activityBar.foreground活动栏前景色(例如用于图标)
    12editor.background编辑器背景颜色
    13editor.foreground编辑器默认前景色
     editor.findMatchBackground当前搜索匹配项的颜色
     editor.findMatchHighlightBackground其他搜索匹配项的颜色
    15editor.lineHighlightBackground光标所在行高亮文本的背景颜色
     editor.selectionBackground编辑器所选内容的颜色
     editor.selectionHighlightBackground与所选内容具有相同内容的区域颜色
     editor.rangeHighlightBackground突出显示范围的背景颜色,例如 "Quick Open" 和“查找”功能
    16editorBracketMatch.background匹配括号的背景色
    14editorCursor.foreground编辑器光标颜色
    11editorGutter.background编辑器导航线的背景色,导航线包括边缘符号和行号
    10editorLineNumber.foreground编辑器行号颜色
    5sideBar.background侧边栏背景色
    4sideBar.foreground侧边栏前景色
    3sideBarSectionHeader.background侧边栏节标题的背景颜色
    17statusBar.background标准状态栏背景色
    17statusBar.noFolderBackground没有打开文件夹时状态栏的背景色
    17statusBar.debuggingBackground调试程序时状态栏的背景色
    9tab.activeBackground活动选项卡的背景色
    8tab.activeForeground活动组中活动选项卡的前景色
    7tab.inactiveBackground非活动选项卡的背景色
    6tab.inactiveForeground活动组中非活动选项卡的前景色

    tokenColors

    tokenColors使用一个对象数组描述各语法高亮颜色。每个对象有如下结构:

    {
        "name": "Comment",
        "scope": [
            "comment",
            "punctuation.definition.comment"
        ],
        "settings": {
            "background": "#ffffff",
            "fontStyle": "italic",
            "foreground": "#000000"
        }
    }
    参数名作用
    name规则描述,一段容易理解的描述性文字
    scope作用域,指定使用那些VSCode内部对象,其含义参看Scope Naming
    setting -> background背景色,可选
    setting -> fontStyle字体,可选,为bold、italic、underline
    setting -> foreground前景色,可选

    以下列举文末的配置文件中几个name所指定的参数的作用:

    参数名作用
    Character字符
    Class类名
    Comment注释
    Function函数名
    Keyword关键字
    Number数值
    Operator运算符
    Parameter函数参数
    Punctuation标点符号
    String字符串
    Type内置类型
    Variable变量名

    参考链接:https://blog.csdn.net/weixin_30755393/article/details/98661143 

    具体文件内容我就不贴了,改改颜色和高亮很简单的。

    颜色:网址提供:

    https://www.5tu.cn/colors/yansezhongwenming.html

    可以根据自己的喜好进行调整

    修改注释高亮颜色

    下面我们将进行选择时显示高亮和注释颜色修改,首先打开settings.json文件

    选择高亮:

    在setting.json中添加如下字段即可,颜色可以自定义修改【参考上面我提供的颜色网址

        "workbench.colorCustomizations": {
            "editor.selectionBackground": "#e46bc9",
            "editor.selectionHighlightBackground": "#a32c3c"
            },

    修改注释

    修改注释颜色,同样在setting.json中添加:

            "editor.tokenColorCustomizations": {
                "comments": "#3CB371"  //春天绿
            },

    效果图如下:选择时会高亮,注释我更喜欢淡紫色

     

     

    展开全文
  • 深色和浅色变种(TODO) 可选图标主题(TODO) 知道问题: 选项卡尚未经过MVP的真正测试。 (去做) 语法突出显示最少 本主题探讨的是减少语法高亮显示的数量并更多地关注代码的想法,而不是拥有编辑器的...
  • 纯黑样式,护眼,另外对java的做了单独优化,放在安装目录C:\Program Files\Microsoft VS Code\resources\app\extensions\theme-defaults\themes下面,覆盖即可
  • 紫水晶主题 一组紫色的浅色和深色主题 紫水晶黑暗 紫水晶灯 紫水晶深色(高对比度) 紫晶 已知的问题 如果发现任何问题或不一致之处,请在打开一个问题 没有任何
  • 拉森甘冰川 带有Rasengan配色方案的深色主题(浅蓝色,白色)。 查看以下视觉效果: 为这个主题加注星标: 源代码:
  • idea和 webstorm主题,一个浅色,一个深色。浅色的是Solarized Light (Alternate) ,深色的是Perfect VSCode 参考VSCode主题
  • VS代码的多色主题 在整个工作台上使用生成了Duotone主题! 灵感来自所做的工作以及Atom的双色调主题的创建。 特征 此扩展附带两个可以修改的基本主题: 彩暗 彩灯 创建自己的 同样,这些是基本主题。 您可以根据...
  • VScode主题色更换

    2021-07-29 16:01:35
    最新版VScode主题色更换,让你拥有属于自己的颜色
  • vscode主题生成器 这是一个预览版,它利用了v1.12中新的VS Code主题选项。 问题 新主题通常是与其他主题分叉的,并带有错误 .tmThemes过于冗长,难以维护 主题很难从头开始编写 解决方案 如果生成主题所需要做的...
  • 然后你就会发现你的vscode顶部出现了不"接受支持",惊不惊讶意不意外,这个东西是因为修改了一部分code代码,然后显示文件损坏,但是并不会影响软件的运行,但是我这个人有点强迫症不喜欢看到这几个字。 所以解决...
  • vscode侧边工具栏设置为白色浅色
  • 2020 必须收藏的vscode主题【清爽的前端配置 vue】

    万次阅读 多人点赞 2020-01-26 23:14:38
    Horla Light Them:浅色主题,非常好 学如逆水行舟,不进则退
  • 几个好看的vscode主题,必须记下来

    万次阅读 多人点赞 2019-03-12 23:40:37
    1.Horla Light Them:浅色主题,非常好 2.Monokai pro:暗色主题,这个还是不错的,图标也可以换 3.One Dark pro:这个是所有人都比较喜欢的一款暗色主题 4.Nebula Theme:暗色主题,我觉得这个主题女生会...
  • 学习一个新的软件,只会基本的操作怎么能满足一个富有个性的程序猿本猿捏 那必须得鼓捣起来呀,本着能自定义就绝不用默认的态度,我打算开始写今天这篇博客了~...主题推荐 Horla Light Them 浅色 One Dark pro Ayu Dark
  • 最近写代码太累,眼睛疲劳,修改写主题配色...启动vscode 把下面的代码放在配置中 "workbench.colorCustomizations": { "foreground": "#519657", "editor.background": "#c8e6c9", "editor.lineHighlig...
  • 我也喜欢浅色主题:) 这解决了我在默认的VS Code轻主题(个人首选项)中遇到的一些问题。 我发现了一个错误。我该怎么办? 首先检查textmate范围是否存在,某些语言具有糟糕的标记器。在VS Code中为该语言安装扩展名...
  • 温柔的主题 ...按照构建,其想法是制作主题,使其在中间更改时不会使深色或浅色主题迷反感。 同样,工作仍在进行中。灯光模式即将到来。黑暗模式是低落的果实。 演示版 Demo的目录来自。谢谢韦斯。
  • 有深色,无斜体的深色和浅色主题。 在大多数情况下,我都会使用深色主题,但是当我出席时,在某些较暗的投影仪上发现浅色主题很好。 有关最新更改,请参见 。 主题还支持斜体版本,其字体支持草书斜体字体。 ...
  • 我尝试一个主题。 距离我想要的地方还很遥远,但这只是一个开始。 内置 ; 颜色大部分来自Tailwind的整个调色板。 也许我可以尝试不同的字体/粗细样式? 例如,请参阅 背景 如果您感到好奇,这是我的“梦想主题”...
  • 解决问题的初衷,是本人在打代码疲劳的时候想换个主题颜色,平时习惯用深色,用浅色的时候想把背景调成护眼绿,没找到合适的插件,在网上找到更改背景色的代码,用着挺不错。 但是在更改回我的默认深色主题时,...
  • vscode 主题

    2019-11-07 14:05:01
    synthwave84 https://blog.csdn.net/qq_25260047/article/details/89816075 浅色主题 Night Owl 3.打字特效 https://blog.csdn.net/weixin_45461674/article/details/100547222
  • Nako Light (浅色主题) 调色板 光 该主题以鲜艳的对比色设计,突出了语法结构并将重点放在逻辑流运算符上。 黑暗的 深色变体极大地继承了浅色,但饱和度降低了,可以防止眼睛疲劳,同时保持鲜明的对比度。 推荐...
  • “workbench.iconTheme”: “vscode-icons”, “files.associations”: { “.cjson": “jsonc”, ".wxss”: “css”, “*.wxs”: “javascript” }, “emmet.includeLanguages”: { “wxml”: “html” }, “minapp-...
  • 1、打开右下角齿轮图标(设置) 2、选择颜色主题 “Color Theme” 3、上下键预览各种主题效果 推荐两种:浅色+(默认浅色) 深色+(默认深色),主题简洁,并且代码中变量的使用有颜色
  • 创建 What type of extension do you want to create?:New Color Theme Do you want to import or convert an ...:是否导入已经存在的主题文件 What's the name of your extension?:扩展插件的名字 What's the ...
  • 人类不应该过多地睁大眼睛,不建议在夜间设置浅色主题,反之亦然。 每当您有关于该项目的想法,想要添加的内容或发现错误时,随时可以提出问题或开始进行贡献! :smiling_face_with_halo: 安装 您可以简单地...

空空如也

空空如也

1 2 3 4 5 ... 9
收藏数 161
精华内容 64
关键字:

vscode浅色主题推荐