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.background#151515
  • background#121212
  • button.background#3A8DFF
  • button.foreground#FFFFFF
  • button.hoverBackground#4D9AFF
  • descriptionForeground#A0A0A0
  • disabledForeground#6B6B6B
  • dropdown.background#1A1A1A
  • dropdown.border#2A2A2A
  • editor.background#121212
  • editor.findMatchBackground#FFD33A80
  • editor.findMatchHighlightBackground#FFD33A40
  • editor.focusedStackFrameHighlightBackground#3A8DFF20
  • editor.foreground#E0E0E0
  • editor.lineHighlightBackground#1E1E1E
  • editor.lineHighlightBorder#252525
  • editor.rangeHighlightBackground#3A8DFF10
  • editor.selectionBackground#3A8DFF40
  • editor.selectionHighlightBackground#3A8DFF20
  • editor.stackFrameHighlightBackground#FFD33A20
  • editor.wordHighlightBackground#3A8DFF10
  • editor.wordHighlightStrongBackground#3A8DFF20
  • editorBracketMatch.background#3A8DFF20
  • editorBracketMatch.border#3A8DFF
  • editorCursor.foreground#3A8DFF
  • editorIndentGuide.activeBackground#3A3A3A
  • editorIndentGuide.background#2A2A2A
  • editorRuler.foreground#2A2A2A
  • editorWhitespace.foreground#3A3A3A
  • editorWidget.background#1A1A1A
  • editorWidget.border#2A2A2A
  • errorForeground#FF6E76
  • focusBorder#3A8DFF80
  • foreground#E0E0E0
  • input.background#1A1A1A
  • input.border#2A2A2A
  • input.foreground#E0E0E0
  • list.activeSelectionBackground#2A2A2A
  • list.activeSelectionForeground#FFFFFF
  • list.hoverBackground#252525
  • selection.background#3A8DFF40
  • sideBar.background#151515
  • sideBar.border#252525
  • statusBar.background#0A0A0A
  • statusBar.foreground#D0D0D0
  • statusBarItem.activeBackground#3A3A3A
  • statusBarItem.hoverBackground#252525
  • statusBarItem.prominentBackground#0A0A0A
  • statusBarItem.prominentHoverBackground#151515
  • textBlockQuote.background#1A1A1A
  • textBlockQuote.border#3A3A3A
  • textCodeBlock.background#1A1A1A
  • textLink.activeForeground#6BACFF
  • textLink.foreground#3A8DFF
  • textPreformat.foreground#D4D4D4
  • textSeparator.foreground#3A3A3A
  • titleBar.activeBackground#0A0A0A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6B6B6Bitalic
string#A5D6A7
constant.numeric#ca775e
keyword, storage.type, storage.modifier#3A8DFF
entity.name.function, support.function, meta.function-call#82B1FF
entity.name.type, entity.name.class, support.type, support.class#ff933a
variable, variable.parameter, variable.other, meta.parameter#E0E0E0
constant#CE93D8
keyword.operator#80DEEA
punctuation#B0BEC5
entity.name.tag#80CBC4
entity.other.attribute-name#FFCC80
support.type.property-name.css#8fe6f1de
support.type.property-name.json#9CCC65
markup.heading#3A8DFFbold
markup.underline.link#82B1FF
markup.inserted#A5D6A7
markup.deleted#EF9A9A
keyword.control, keyword.other, storage#FF7043
invalid.illegal#FF5252underline italic
invalid.deprecated#FFAB91underline italic
text.html.markdown documentation, comment.block.documentation#90A4AEitalic
comment.line.todo, comment.line.fixme#FFD33Abold italic
IDMAJOR Dark Theme by IDMAJOR - VS Code Theme