Skip to main content
Coding Theme

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Loading...

colors

Workbench UI color keys from the theme JSON colors map.

  • activityBar.background#ffffff
  • activityBar.border#9f9f9f
  • activityBar.foreground#000000
  • activityBar.inactiveForeground#595959
  • activityBarBadge.background#0031a9
  • activityBarBadge.foreground#ffffff
  • badge.background#0031a9
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#000000
  • breadcrumb.background#ffffff
  • breadcrumb.focusForeground#000000
  • breadcrumb.foreground#595959
  • button.background#c4c4c4
  • button.foreground#000000
  • button.hoverBackground#9f9f9f
  • diffEditor.insertedLineBackground#d5d7ff20
  • diffEditor.insertedTextBackground#d5d7ff40
  • diffEditor.removedLineBackground#f4f09920
  • diffEditor.removedTextBackground#f4f09940
  • dropdown.background#f2f2f2
  • dropdown.border#9f9f9f
  • dropdown.foreground#000000
  • editor.background#ffffff
  • editor.findMatchBackground#f3d000
  • editor.findMatchHighlightBackground#bfc9ff99
  • editor.foreground#000000
  • editor.lineHighlightBackground#dae5ec
  • editor.selectionBackground#bdbdbd
  • editor.selectionForeground#000000
  • editor.wordHighlightBackground#c0deff99
  • editor.wordHighlightStrongBackground#c0deff99
  • editorBracketMatch.background#5fcfff
  • editorBracketMatch.border#5fcfff
  • editorCursor.foreground#0000ff
  • editorError.foreground#808000
  • editorGroupHeader.tabsBackground#dfdfdf
  • editorGroupHeader.tabsBorder#9f9f9f
  • editorHoverWidget.background#f2f2f2
  • editorHoverWidget.border#9f9f9f
  • editorIndentGuide.activeBackground1#595959
  • editorIndentGuide.background1#9f9f9f
  • editorInfo.foreground#0031a9
  • editorLineNumber.activeForeground#000000
  • editorLineNumber.foreground#595959
  • editorSuggestWidget.background#f2f2f2
  • editorSuggestWidget.border#9f9f9f
  • editorSuggestWidget.selectedBackground#c4c4c4
  • editorWarning.foreground#695500
  • editorWhitespace.foreground#9f9f9f
  • editorWidget.background#f2f2f2
  • editorWidget.border#9f9f9f
  • gitDecoration.addedResourceForeground#303099
  • gitDecoration.conflictingResourceForeground#624416
  • gitDecoration.deletedResourceForeground#553d00
  • gitDecoration.ignoredResourceForeground#595959
  • gitDecoration.modifiedResourceForeground#6f1343
  • gitDecoration.untrackedResourceForeground#005077
  • input.background#f2f2f2
  • input.border#9f9f9f
  • input.foreground#000000
  • input.placeholderForeground#595959
  • inputOption.activeBorder#0031a9
  • list.activeSelectionBackground#c4c4c4
  • list.activeSelectionForeground#000000
  • list.focusBackground#c4c4c4
  • list.focusForeground#000000
  • list.hoverBackground#b2e4dc
  • list.hoverForeground#000000
  • list.inactiveSelectionBackground#e0e0e0
  • list.inactiveSelectionForeground#000000
  • notificationLink.foreground#3548cf
  • notifications.background#f2f2f2
  • notifications.border#9f9f9f
  • notifications.foreground#000000
  • panel.background#f2f2f2
  • panel.border#9f9f9f
  • panelTitle.activeBorder#0031a9
  • panelTitle.activeForeground#000000
  • panelTitle.inactiveForeground#595959
  • peekView.border#9f9f9f
  • peekViewEditor.background#f2f2f2
  • peekViewResult.background#f2f2f2
  • peekViewTitle.background#e0e0e0
  • progressBar.background#0031a9
  • scrollbar.shadow#ffffff
  • scrollbarSlider.activeBackground#595959
  • scrollbarSlider.background#c4c4c4
  • scrollbarSlider.hoverBackground#9f9f9f
  • sideBar.background#f2f2f2
  • sideBar.border#9f9f9f
  • sideBar.foreground#000000
  • sideBarSectionHeader.background#e0e0e0
  • sideBarSectionHeader.foreground#000000
  • sideBarTitle.foreground#000000
  • statusBar.background#d0d6ff
  • statusBar.border#4f4f74
  • statusBar.debuggingBackground#d0b029
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#0f0f0f
  • statusBar.noFolderBackground#d0d6ff
  • tab.activeBackground#ffffff
  • tab.activeForeground#000000
  • tab.border#9f9f9f
  • tab.inactiveBackground#c2c2c2
  • tab.inactiveForeground#595959
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#0031a9
  • terminal.ansiBrightBlack#595959
  • terminal.ansiBrightBlue#3548cf
  • terminal.ansiBrightCyan#005f5f
  • terminal.ansiBrightGreen#00663f
  • terminal.ansiBrightMagenta#531ab6
  • terminal.ansiBrightRed#972500
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#973300
  • terminal.ansiCyan#005e8b
  • terminal.ansiGreen#006800
  • terminal.ansiMagenta#721045
  • terminal.ansiRed#a60000
  • terminal.ansiWhite#a6a6a6
  • terminal.ansiYellow#695500
  • terminal.background#ffffff
  • terminal.foreground#000000
  • titleBar.activeBackground#ffffff
  • titleBar.activeForeground#000000
  • titleBar.border#9f9f9f
  • titleBar.inactiveBackground#f2f2f2
  • titleBar.inactiveForeground#595959

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#77492f
string, string.quoted, string.template#3548cf
constant.numeric, constant.language, constant.character#000000
constant.other#003497
keyword, storage.type, storage.modifier#0000b0
keyword.control, keyword.operator.new#0000b0bold
variable, variable.other#005e8b
variable.parameter, variable.language#624416
entity.name.function, support.function#973300
entity.name.type, entity.name.class, support.type, support.class#005f5f
entity.name.tag#0000b0
entity.other.attribute-name#005e8b
support.constant, support.variable#695500
meta.preprocessor, entity.name.function.preprocessor#531ab6
invalid, invalid.illegal#000000
invalid.deprecated#000000
markup.heading#005f5fbold
markup.bold#000000bold
markup.italic#000000italic
markup.underline.link#3548cfunderline
markup.inline.raw, markup.fenced_code#005f5f
markup.quote#005077
punctuation.definition.list#000000
modus-t by 月波 清火 - VS Code Theme