Vs Code comes with dark cool is good to look, but the eyes will be tired after a long time, here imitate HBuilderX green soft theme to do this VS Code theme, the code is as follows.

Look at the final image first

Set the method

  • Windows: Ctrl + Shift + P
  • MacOS: Command + Shift + P
  • Select Open Settings (JSON) and copy the code in

The code block

{
    "window.zoomLevel": 1.// Window. zoom level
    "editor.tabSize": 2.// Workbench theme color
    "typescript.updateImportsOnFileMove.enabled": "always"."editor.formatOnSave": true.// Format when saving
    "breadcrumbs.enabled": false.// Open the vscode file path navigation
    // "tslint.autoFixOnSave": true, // # Fix the code in tsLint format every time you save it
    "eslint.autoFixOnSave": true.// # Fix the code in esLint format every time you save it
    // "prettier. Semi ": false,//prettier sets no semicolon at the end of the statement
    "prettier.singleQuote": true.// prettier Forcibly sets single quotes
    "vetur.format.defaultFormatter.js": "vscode-typescript".// # Let js in vue format the editor's ts format
    "window.enableMenuBarMnemonics": false."liveServer.settings.donotShowInfoMsg": true.// "workbench.colortheme ": "Winter is Coming (Light)", // window. Disable the menu bar input method and change the theme color
    // "workbench.colorTheme": "Visual Studio Light",
    "workbench.colorTheme": "Default Light+".// Code comment part color
     "editor.tokenColorCustomizations": {
            "comments": "#95a3ab"
        },
    "workbench.colorCustomizations": {
        "editorGroupHeader.tabsBackground": "#FFFAE8".// Where the title bar is not used
        "editorLineNumber.foreground": "#9F9371".// Code line number color
        "editor.lineHighlightBackground": "#E8DFC4".// The code is highlighted
        "editor.selectionBackground": "#BCD68D"."editor.background": "#FFFAE8"."editorIndentGuide.background": "#cecdc2".// The code aligns the line color
        // Set the title bar color
        "titleBar.activeBackground": "#fffef9"."titleBar.inactiveBackground": "#fffef9".// Lose focus when titlebar color
        // Active bar color
        //" activitybar. background": "#FFFAE8", // set the color icon to not show clearly
        "activityBar.background": "#539c5f".// The left-most active bar background color
        "activityBar.activeBorder": "#41A863".// There seems to be no use
        // TAB color Settings
        "tab.activeModifiedBorder": "#41A863"."tab.hoverBackground": "#daeace"."tab.border": "#fffae8"."tab.activeBackground": "#41A863"."tab.activeForeground": "#ffffff"."tab.inactiveBackground": "#fffae8"."tab.inactiveForeground": "#41A863".// Color Settings for the sidebar
        "sideBarSectionHeader.background": "#FFFAE8"."sideBar.background": "#FFFAE8"."sideBarSectionHeader.foreground": "#AB7E05"."sideBar.border": "#d8ca9e"."sideBar.foreground": "#46433c"."sideBarTitle.foreground": "#46433c".// The bottom status bar color is set
        "statusBar.background": "#fffdf4".// Scroll bar color
        "scrollbarSlider.background": "#cfb56a"."scrollbarSlider.hoverBackground": "#cfb56a"."scrollbarSlider.activeBackground": "#cfb56a".// Terminal window panel color Settings
        "panel.background": "#fffcf3"."panel.border": "#d8ca9e".// Pop-up window: option setting prompt window, source code completion window
        "editorWidget.background": "#BCD68D".// Pop-up small window background
        "editorSuggestWidget.selectedBackground": "#e8dfc4".// The code prompts to highlight the selected line
        "list.hoverBackground": "#e8dfc4".// The color of the mouse line
        "editorWidget.border": "#BCD68D".// Popup the border of the small window
        "list.activeSelectionBackground": "#41A863".// Highlight the sidebar
        "list.inactiveSelectionBackground": "#d8ca9e" // The sidebar selects the color not getting focus
       
    
    },
    "editor.fontSize": 18."files.autoSave":"afterDelay"."editor.wordWrap":"on",}Copy the code

SmartyPants

Editor. RangeHighlightBackground highlight range of background color, such as “Quick Open” and “find” function

SmartyPants converts ASCII punctuation characters into “smart” printed punctuation HTML entities. Such as:

graphic Parameter names role
1 activityBar.foreground Active bar foreground color (for example for ICONS)
2 activityBar.background Active bar background color
3 sideBarSectionHeader.background The background color of the sidebar section title
4 sideBar.foreground Sidebar foreground color
5 sideBar.background Sidebar background color
6 tab.inactiveForeground The foreground color of the non-active TAB in the active group
7 tab.inactiveBackground Background color for inactive tabs
8 tab.activeForeground The foreground color of the active TAB in the active group
9 tab.activeBackground Background color for the active TAB
10 editorLineNumber.foreground Editor line number color
11 editorGutter.background Background color for editor navigation lines, which include edge symbols and line numbers
12 editor.background Editor background color
13 editor.foreground Editor defaults to foreground color
14 editorCursor.foreground Editor cursor color
15 editor.lineHighlightBackground The background color of the highlighted text on the line where the cursor is located
16 editorBracketMatch.background Matches the background color of the parentheses
17 statusBar.background Standard status bar background color
17 statusBar.noFolderBackground Background color of the status bar when the folder is not open
17 statusBar.debuggingBackground Background color of the status bar when debugging the program
editor.findMatchBackground The color of the current search match
editor.findMatchHighlightBackground The colors of other search matches
editor.selectionBackground The color of the editor’s selection
editor.selectionHighlightBackground The color of the area that has the same content as the selected content
editor.rangeHighlightBackground Highlight the background color of the range, such as Quick Open and Find
You can customize the color according to the above parameter code.