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#16161e
  • activityBar.foreground#c8d3f5
  • activityBar.inactiveForeground#545c7e
  • activityBarBadge.background#c099ff
  • activityBarBadge.foreground#1a1b26
  • badge.background#c099ff
  • badge.foreground#1a1b26
  • button.background#3e68d7
  • button.foreground#ffffff
  • debugIcon.breakpointForeground#ff757f
  • debugTokenExpression.boolean#ff966c
  • debugTokenExpression.error#ff757f
  • debugTokenExpression.name#65bcff
  • debugTokenExpression.number#ff966c
  • debugTokenExpression.string#c3e88d
  • debugTokenExpression.value#c8d3f5
  • debugToolBar.background#222436
  • dropdown.background#222436
  • editor.background#1a1b26
  • editor.findMatchBackground#3e68d7
  • editor.findMatchHighlightBackground#3e68d766
  • editor.focusedStackFrameHighlightBackground#c3e88d26
  • editor.foreground#c8d3f5
  • editor.lineHighlightBackground#1f2133
  • editor.selectionBackground#2d3f76
  • editor.stackFrameHighlightBackground#ffc77733
  • editor.wordHighlightBackground#2d3f7688
  • editorBracketMatch.background#2d3f76
  • editorBracketMatch.border#86e1fc
  • editorCursor.foreground#c8d3f5
  • editorError.foreground#ff757f
  • editorGroupHeader.tabsBackground#16161e
  • editorGutter.addedBackground#c3e88d
  • editorGutter.deletedBackground#ff757f
  • editorGutter.modifiedBackground#65bcff
  • editorHoverWidget.background#16161e
  • editorIndentGuide.activeBackground1#3b4261
  • editorIndentGuide.background1#25283b
  • editorInfo.foreground#65bcff
  • editorLineNumber.activeForeground#7a88cf
  • editorLineNumber.foreground#3b4261
  • editorSuggestWidget.background#16161e
  • editorSuggestWidget.selectedBackground#2d3f76
  • editorWarning.foreground#ffc777
  • editorWhitespace.foreground#3b4261
  • editorWidget.background#16161e
  • focusBorder#3e68d7
  • gitDecoration.deletedResourceForeground#ff757f
  • gitDecoration.modifiedResourceForeground#65bcff
  • gitDecoration.untrackedResourceForeground#c3e88d
  • input.background#222436
  • input.border#2f334d
  • input.foreground#c8d3f5
  • list.activeSelectionBackground#2d3f76
  • list.activeSelectionForeground#c8d3f5
  • list.highlightForeground#86e1fc
  • list.hoverBackground#222436
  • list.inactiveSelectionBackground#222436
  • panel.background#16161e
  • panel.border#222436
  • panelTitle.activeBorder#c099ff
  • peekView.border#3e68d7
  • peekViewEditor.background#16161e
  • peekViewResult.background#16161e
  • scrollbarSlider.background#3b426166
  • scrollbarSlider.hoverBackground#3b4261aa
  • sideBar.background#16161e
  • sideBar.foreground#c8d3f5
  • sideBarSectionHeader.background#16161e
  • sideBarTitle.foreground#7a88cf
  • statusBar.background#16161e
  • statusBar.debuggingBackground#c099ff
  • statusBar.debuggingForeground#1a1b26
  • statusBar.foreground#7a88cf
  • statusBar.noFolderBackground#16161e
  • tab.activeBackground#1a1b26
  • tab.activeBorderTop#c099ff
  • tab.activeForeground#c8d3f5
  • tab.border#16161e
  • tab.inactiveBackground#16161e
  • tab.inactiveForeground#545c7e
  • terminal.ansiBlack#1a1b26
  • terminal.ansiBlue#82aaff
  • terminal.ansiBrightBlack#545c7e
  • terminal.ansiBrightBlue#82aaff
  • terminal.ansiBrightCyan#86e1fc
  • terminal.ansiBrightGreen#c3e88d
  • terminal.ansiBrightMagenta#c099ff
  • terminal.ansiBrightRed#ff757f
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffc777
  • terminal.ansiCyan#86e1fc
  • terminal.ansiGreen#c3e88d
  • terminal.ansiMagenta#c099ff
  • terminal.ansiRed#ff757f
  • terminal.ansiWhite#c8d3f5
  • terminal.ansiYellow#ffc777
  • terminal.background#16161e
  • terminal.foreground#c8d3f5
  • titleBar.activeBackground#16161e
  • titleBar.activeForeground#c8d3f5
  • titleBar.inactiveBackground#16161e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.quoted.docstring#7a88cfitalic
keyword, storage, storage.type, storage.modifier, keyword.control, keyword.operator.word, keyword.operator.new, keyword.operator.expression#c099ff
entity.name.type, entity.name.class, entity.name.namespace, support.type, support.class, support.constant.builtin, entity.other.inherited-class, entity.name.section#65bcff
entity.name.function, support.function, meta.function-call, entity.name.label, markup.heading#82aaff
string, string.regexp, markup.inserted, markup.inline.raw#c3e88d
constant.numeric, constant.language, constant.character, constant.other, keyword.other.unit, markup.list#ff966c
variable.other.property, variable.other.member, meta.object-literal.key, support.type.property-name, constant.character.escape, keyword.other.documentation, entity.other.attribute-name.class#4fd6be
variable.language, entity.name.tag, markup.deleted, variable.other.declaration#ff757f
variable.parameter, entity.other.attribute-name, keyword.control.at-rule#ffc777
keyword.operator, punctuation, meta.brace, punctuation.definition.tag#86e1fc
meta.preprocessor, keyword.control.directive, punctuation.definition.directive#7a88cf
variable, source#c8d3f5
markup.italic#c8d3f5italic
markup.bold#c8d3f5bold
VHDL (GHDL) — Highlight, Debug, Signals by Arthur de Araújo Farias - VS Code Theme