Skip to main content
Coding Theme

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.activeBorder#3DD186
  • activityBarBadge.background#3DD186
  • activityBarBadge.foreground#0D1626
  • activityBarTop.activeBorder#3DD186
  • breadcrumb.activeSelectionForeground#3DD186
  • button.background#33B76F
  • button.foreground#0D1626
  • button.hoverBackground#3DD186
  • chat.avatarForeground#3DD186
  • chat.slashCommandForeground#3DD186
  • commandCenter.activeBorder#3DD18680
  • diffEditor.insertedTextBackground#3DD18622
  • diffEditor.removedTextBackground#EF535022
  • editor.findMatchBorder#3DD186
  • editor.lineHighlightBackground#3DD1860A
  • editor.lineHighlightBorder#3DD18633
  • editorBracketMatch.background#3DD1861A
  • editorBracketMatch.border#3DD186
  • editorGutter.addedBackground#88ac6744
  • editorGutter.deletedBackground#ef535044
  • editorGutter.modifiedBackground#3DD18688
  • editorSuggestWidget.highlightForeground#3DD186
  • editorWidget.border#3DD186
  • editorWidget.resizeBorder#3DD186
  • extensionButton.background#3DD18614
  • extensionButton.foreground#3DD186
  • extensionButton.hoverBackground#3DD18633
  • extensionButton.prominentBackground#3DD18614
  • extensionButton.prominentForeground#3DD186
  • extensionButton.prominentHoverBackground#3DD18633
  • extensionButton.separator#3DD18633
  • list.activeSelectionForeground#3DD186
  • list.activeSelectionIconForeground#3DD186
  • list.highlightForeground#3DD186
  • list.inactiveSelectionForeground#3DD186
  • list.inactiveSelectionIconForeground#3DD186
  • menu.selectionForeground#3DD186
  • menubar.selectionForeground#3DD186
  • notebook.inactiveFocusedCellBorder#3DD18680
  • notificationLink.foreground#3DD186
  • panelTitle.activeBorder#3DD186
  • pickerGroup.foreground#3DD186
  • progressBar.background#3DD186
  • sash.hoverBorder#3DD18680
  • scrollbarSlider.activeBackground#3DD18680
  • selection.background#3DD18655
  • settings.modifiedItemIndicator#3DD186
  • statusBar.debuggingBackground#2DAE68
  • statusBar.debuggingForeground#3DD186
  • statusBarItem.remoteBackground#3DD18614
  • statusBarItem.remoteForeground#3DD186
  • statusBarItem.remoteHoverBackground#3DD186
  • statusBarItem.remoteHoverForeground#0D1626
  • tab.activeBorder#3DD186
  • tab.activeBorderTop#3DD18600
  • tab.activeModifiedBorder#3DD18600
  • tab.unfocusedActiveBorder#3DD186
  • tab.unfocusedActiveBorderTop#3DD18600
  • terminal.ansiBlue#4EC9B0
  • terminal.ansiBrightBlack#6C7A90
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiCyan#7FDBCA
  • terminal.ansiGreen#3DD186
  • terminal.ansiMagenta#C792EA
  • terminal.ansiRed#EF5350
  • terminal.ansiWhite#DCE4F2
  • terminal.ansiYellow#C8B63C
  • textLink.foreground#3DD186
  • toolbar.activeBackground#3DD18626

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6C7A90italic
string, punctuation.definition.string#9CCC65
constant.numeric, constant.language, constant.character.escape#E3D563
keyword.control, storage.type, storage.modifier, keyword.operator.new#92A7B4italic
variable.other.readwrite#C9D4E0
variable.other.constant#DCE4F2
variable.language.this, variable.language.super#82AAFFitalic
entity.name.function, support.function, meta.function-call#3DD186
entity.name.type, entity.name.class, entity.name.struct, support.type, support.class#4EC9B0
support.variable.dom, support.variable.object.process, support.variable.object.node#CE9178
entity.name.tag#7A8A99
entity.other.attribute-name#bef1e7
variable.parameter#DCE4F2italic
variable, meta.definition.variable#DCE4F2
invalid, invalid.illegal#EF5350bold
Lucid Green by mintstream - VS Code Theme