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#191a1f
  • activityBar.foreground#bcbec8
  • activityBarBadge.background#0027b8
  • activityBarBadge.foreground#ffffff
  • button.background#0027b8
  • button.foreground#ffffff
  • button.hoverBackground#0033dd
  • dropdown.background#191a1f
  • dropdown.border#35373d
  • dropdown.foreground#bcbec8
  • editor.background#202227
  • editor.foreground#bcbec8
  • editor.inactiveSelectionBackground#132363aa
  • editor.lineHighlightBackground#35373d
  • editor.selectionBackground#132363
  • editorCursor.foreground#bcbec8
  • editorError.foreground#df281f
  • editorIndentGuide.activeBackground1#494d5b
  • editorIndentGuide.background1#35373d
  • editorInfo.foreground#494d5a
  • editorLineNumber.activeForeground#bcbec8
  • editorLineNumber.foreground#6a6f81
  • editorWarning.foreground#f57630
  • editorWhitespace.foreground#494d5b
  • gitDecoration.deletedResourceForeground#df4031
  • gitDecoration.ignoredResourceForeground#6a6f81
  • gitDecoration.modifiedResourceForeground#f2ba2a
  • gitDecoration.untrackedResourceForeground#8ee9b6
  • input.background#191a1f
  • input.border#35373d
  • input.foreground#bcbec8
  • input.placeholderForeground#6a6f81
  • list.activeSelectionBackground#0027b8
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#0027b8
  • list.hoverBackground#35373d
  • panel.background#191a1f
  • panel.border#35373d
  • panelTitle.activeForeground#bcbec8
  • panelTitle.inactiveForeground#6a6f81
  • sideBar.background#191a1f
  • sideBar.foreground#bcbec8
  • sideBarSectionHeader.background#202227
  • sideBarTitle.foreground#bcbec8
  • statusBar.background#191a1f
  • statusBar.foreground#6a6f81
  • statusBar.noFolderBackground#191a1f
  • tab.activeBackground#202227
  • tab.activeForeground#bcbec8
  • tab.border#191a1f
  • tab.inactiveBackground#191a1f
  • tab.inactiveForeground#6a6f81
  • terminal.ansiBlack#191a1f
  • terminal.ansiBlue#528bff
  • terminal.ansiBrightBlack#6a6f81
  • terminal.ansiBrightBlue#70a0ff
  • terminal.ansiBrightCyan#90d0f0
  • terminal.ansiBrightGreen#8ee9b6
  • terminal.ansiBrightMagenta#f09090
  • terminal.ansiBrightRed#eb7973
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#f2ba2a
  • terminal.ansiCyan#70c0e8
  • terminal.ansiGreen#8ee9b6
  • terminal.ansiMagenta#eb7973
  • terminal.ansiRed#df4031
  • terminal.ansiWhite#bcbec8
  • terminal.ansiYellow#f2ba2a
  • terminal.background#191a1f
  • terminal.foreground#bcbec8
  • titleBar.activeBackground#191a1f
  • titleBar.activeForeground#bcbec8
  • titleBar.inactiveBackground#191a1f
  • titleBar.inactiveForeground#6a6f81

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, punctuation.definition.comment#6a6f81
comment.block.documentation#6a6f81
string, string.quoted, string.quoted.double, string.quoted.single#8ee9b6
constant.character.escape#70c0e8
constant.numeric, constant.numeric.decimal, constant.numeric.hex, constant.numeric.binary#f2ba2a
constant.language.boolean, constant.language.nil#f2ba2a
constant.other.caps#f2ba2a
keyword, keyword.control, keyword.declaration, keyword.declaration.function, keyword.other, keyword.modifier#eb7973
keyword.operator.bitwise#eb7973
keyword.operator, keyword.operator.comparison, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.arrow#bcbec8
support.type.primitive, storage.type#528bff
entity.name.type, support.type.builtin#528bff
entity.name.function#fae4aa
entity.name.function.call, entity.name.function.method#fae4aa
support.function.builtin, support.function.crypto#8fb4ff
variable.other.property, meta.property.object#fae4aa
variable.other.local, variable.other.readwrite#bcbec8
variable.parameter#bcbec8
storage.type.annotation, entity.name.tag.annotation#70c0e8
punctuation, punctuation.separator, punctuation.terminator, punctuation.bracket, punctuation.accessor#bcbec8
meta.brace#bcbec8
Rumba Language by Xoifail - VS Code Theme