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#C94C4C
  • activityBar.background#1A1A2E
  • activityBar.foreground#C94C4C
  • activityBarBadge.background#C94C4C
  • activityBarBadge.foreground#FFFFFF
  • badge.background#C94C4C
  • badge.foreground#FFFFFF
  • button.background#722F37
  • button.foreground#FFFFFF
  • button.hoverBackground#8B3A42
  • editor.background#1A1A2E
  • editor.foreground#E0E0E0
  • editor.lineHighlightBackground#252545
  • editor.selectionBackground#2E5932
  • editor.selectionHighlightBackground#3D2B2B
  • editorBracketMatch.background#2E4A2E
  • editorBracketMatch.border#4CAF50
  • editorCursor.foreground#C94C4C
  • editorLineNumber.activeForeground#C94C4C
  • editorLineNumber.foreground#4CAF50
  • focusBorder#4CAF50
  • inputOption.activeBorder#C94C4C
  • list.activeSelectionBackground#2E5932
  • list.activeSelectionForeground#FFFFFF
  • list.hoverBackground#3D2B2B
  • panel.background#16162A
  • panelTitle.activeBorder#C94C4C
  • panelTitle.activeForeground#C94C4C
  • sideBar.background#16162A
  • sideBar.foreground#E0E0E0
  • sideBarTitle.foreground#C94C4C
  • statusBar.background#1A1A2E
  • statusBar.debuggingBackground#3D2020
  • statusBar.foreground#888888
  • tab.activeBackground#1A1A2E
  • tab.activeBorder#C94C4C
  • tab.activeForeground#C94C4C
  • tab.inactiveBackground#16162A
  • tab.inactiveForeground#888888
  • terminal.ansiGreen#4CAF50
  • terminal.ansiRed#C94C4C
  • terminal.foreground#E0E0E0
  • titleBar.activeBackground#1A1A2E
  • titleBar.activeForeground#C94C4C
  • titleBar.inactiveBackground#16162A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A6A8Aitalic
keyword, storage.type, storage.modifier#C94C4Cbold
keyword.control, keyword.operator.new#E57373
string, string.quoted#81C784
constant.numeric#C94C4C
constant, constant.language#E57373
entity.name.function, support.function, meta.function-call#66BB6A
entity.name.class, entity.name.type.class, support.class#4CAF50bold
entity.name.type, support.type#66BB6A
variable, variable.other#BDBDBD
variable.parameter#BCAAA4
variable.other.property, meta.object-literal.key#81C784
keyword.operator#C94C4C
punctuation#9E9E9E
punctuation.definition.block, meta.brace#4CAF50
entity.name.tag#C94C4C
entity.other.attribute-name#81C784
meta.decorator, punctuation.decorator#E57373
keyword.control.import, keyword.control.export, keyword.control.from#C94C4C
string.regexp#66BB6A
markup.heading, entity.name.section#C94C4Cbold
markup.bold#E57373bold
markup.italic#81C784italic
markup.underline.link#66BB6A
Good-Night-Christmas by jae - VS Code Theme