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#0D0D0D
  • activityBar.border#2a2a2a
  • activityBar.foreground#4D4DFF
  • activityBarBadge.background#FF0000
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FF0000
  • badge.foreground#FFFFFF
  • button.background#4D4DFF
  • button.foreground#FFFFFF
  • button.hoverBackground#3D3DDD
  • debugIcon.breakpointForeground#FF0000
  • debugToolBar.background#151515
  • dropdown.background#151515
  • dropdown.border#4D4DFF
  • dropdown.foreground#FFFFFF
  • editor.background#0D0D0D
  • editor.findMatchBackground#FFFF0066
  • editor.findMatchHighlightBackground#FFFF0040
  • editor.foreground#FFFFFF
  • editor.lineHighlightBackground#151520
  • editor.selectionBackground#FFFF0066
  • editor.wordHighlightBackground#4D4DFF30
  • editorBracketMatch.background#4D4DFF30
  • editorBracketMatch.border#4D4DFF
  • editorCursor.foreground#00FF00
  • editorGroupHeader.tabsBackground#0D0D0D
  • editorGutter.background#0D0D0D
  • editorIndentGuide.activeBackground1#4D4DFF
  • editorIndentGuide.background1#2a2a2a
  • editorLineNumber.activeForeground#4D4DFF
  • editorLineNumber.foreground#555555
  • editorSuggestWidget.background#111111
  • editorSuggestWidget.border#2a2a2a
  • editorSuggestWidget.highlightForeground#00FF00
  • editorSuggestWidget.selectedBackground#3a3a5a
  • editorWidget.background#111111
  • editorWidget.border#2a2a2a
  • focusBorder#4D4DFF
  • gitDecoration.conflictingResourceForeground#FFFF00
  • gitDecoration.deletedResourceForeground#FF0000
  • gitDecoration.modifiedResourceForeground#FFA500
  • gitDecoration.untrackedResourceForeground#00FF00
  • input.background#151515
  • input.border#4D4DFF
  • input.foreground#FFFFFF
  • input.placeholderForeground#666666
  • inputOption.activeBorder#00FF00
  • list.activeSelectionBackground#3a3a5a
  • list.activeSelectionForeground#FFFFFF
  • list.highlightForeground#00FF00
  • list.hoverBackground#202040
  • list.inactiveSelectionBackground#2a2a4a
  • minimap.background#0D0D0D
  • minimapSlider.activeBackground#00FF0050
  • minimapSlider.background#4D4DFF30
  • minimapSlider.hoverBackground#4D4DFF50
  • panel.background#0D0D0D
  • panel.border#2a2a2a
  • panelTitle.activeBorder#4D4DFF
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#808080
  • peekView.border#4D4DFF
  • peekViewEditor.background#111111
  • peekViewResult.background#151515
  • peekViewTitle.background#151515
  • peekViewTitleLabel.foreground#FFA500
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#00FF0080
  • scrollbarSlider.background#4D4DFF50
  • scrollbarSlider.hoverBackground#4D4DFF80
  • sideBar.background#111111
  • sideBar.border#2a2a2a
  • sideBar.foreground#CCCCCC
  • sideBarSectionHeader.background#151515
  • sideBarSectionHeader.foreground#FFA500
  • sideBarTitle.foreground#4D4DFF
  • statusBar.background#0D0D0D
  • statusBar.border#2a2a2a
  • statusBar.debuggingBackground#FF0000
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#4D4DFF
  • statusBarItem.hoverBackground#2a2a4a
  • tab.activeBackground#1a1a3a
  • tab.activeBorderTop#4D4DFF
  • tab.activeForeground#FFFFFF
  • tab.border#2a2a2a
  • tab.inactiveBackground#0D0D0D
  • tab.inactiveForeground#808080
  • terminal.ansiBlack#0D0D0D
  • terminal.ansiBlue#4D4DFF
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#7D7DFF
  • terminal.ansiBrightCyan#66FFFF
  • terminal.ansiBrightGreen#66FF66
  • terminal.ansiBrightMagenta#FF66FF
  • terminal.ansiBrightRed#FF6666
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFCC66
  • terminal.ansiCyan#00FFFF
  • terminal.ansiGreen#00FF00
  • terminal.ansiMagenta#FF00FF
  • terminal.ansiRed#FF0000
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#FFA500
  • terminal.background#0D0D0D
  • terminal.foreground#FFFFFF
  • titleBar.activeBackground#0D0D0D
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#080808
  • titleBar.inactiveForeground#808080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#666666italic
keyword, storage.type, storage.modifier, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.sizeof, keyword.operator.typeof#4D4DFF
string, string.quoted, string.template, punctuation.definition.string#FF0000
entity.name.function, support.function, meta.function-call, variable.function#FFA500
constant.numeric, constant.language.boolean, constant.language.null, constant.language.undefined#00FF00
variable, variable.other, variable.parameter#FFFFFF
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class#FFA500
keyword.operator, punctuation.accessor#00FF00
punctuation.bracket, punctuation.separator, punctuation.terminator, meta.brace#AAAAAA
constant, constant.other, variable.other.constant#00FF00
entity.name.tag, support.type.property-name, meta.object-literal.key#4D4DFF
entity.name.tag.html, entity.name.tag.xml#FF0000
entity.other.attribute-name#FFA500
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#4D4DFF
support.type.property-name.css#FFA500
support.constant.property-value.css, support.constant.color.css#00FF00
string.regexp#FF0000
constant.character.escape#00FF00
heading.1.markdown, heading.2.markdown, heading.3.markdown, punctuation.definition.heading.markdown#4D4DFFbold
markup.bold#FFA500bold
markup.italic#FF0000italic
markup.underline.link#4D4DFF
markup.inline.raw, markup.fenced_code.block#00FF00
support.type.property-name.json#4D4DFF
string.quoted.double.json#FF0000
invalid, invalid.illegal#FF0000underline
invalid.deprecated#FFA500strikethrough
Monkey Island Theme - Revenge's LeChuck Edition by fidelp27 - VS Code Theme