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#080c10
  • activityBar.foreground#d9e1e8
  • activityBar.inactiveForeground#4a5a68
  • activityBarBadge.background#39bae6
  • activityBarBadge.foreground#0f1419
  • badge.background#39bae6
  • badge.foreground#0f1419
  • breadcrumb.activeSelectionForeground#d9e1e8
  • breadcrumb.focusForeground#b8c5d0
  • breadcrumb.foreground#4a5a68
  • button.background#39bae6
  • button.foreground#0f1419
  • button.hoverBackground#59c2ff
  • diffEditor.insertedTextBackground#7fd96233
  • diffEditor.removedTextBackground#f0717833
  • dropdown.background#151c24
  • dropdown.foreground#d9e1e8
  • editor.background#0f1419
  • editor.findMatchBackground#2d5a4a
  • editor.findMatchHighlightBackground#39bae640
  • editor.findRangeHighlightBackground#1f3a4a40
  • editor.foreground#d9e1e8
  • editor.lineHighlightBackground#151c24
  • editor.lineHighlightBorder#151c2400
  • editor.selectionBackground#1f3a4a
  • editor.selectionHighlightBackground#1f3a4a66
  • editor.wordHighlightBackground#1a303c80
  • editor.wordHighlightStrongBackground#39bae640
  • editorBracketHighlight.foreground1#39bae6
  • editorBracketHighlight.foreground2#d2a6ff
  • editorBracketHighlight.foreground3#7fd962
  • editorBracketHighlight.foreground4#ffb454
  • editorBracketHighlight.foreground5#f07178
  • editorBracketHighlight.foreground6#59c2ff
  • editorBracketMatch.background#39bae620
  • editorBracketMatch.border#39bae6
  • editorBracketPairGuide.activeBackground1#39bae680
  • editorBracketPairGuide.activeBackground2#d2a6ff80
  • editorBracketPairGuide.activeBackground3#7fd96280
  • editorBracketPairGuide.activeBackground4#ffb45480
  • editorBracketPairGuide.activeBackground5#f0717880
  • editorBracketPairGuide.activeBackground6#59c2ff80
  • editorCursor.foreground#39bae6
  • editorError.foreground#f07178
  • editorGroupHeader.tabsBackground#0a0f14
  • editorGutter.addedBackground#7fd962
  • editorGutter.deletedBackground#f07178
  • editorGutter.modifiedBackground#39bae6
  • editorIndentGuide.activeBackground1#4a5a68
  • editorIndentGuide.background1#1e2a35
  • editorInfo.foreground#39bae6
  • editorLineNumber.activeForeground#b8c5d0
  • editorLineNumber.foreground#4a5a68
  • editorRuler.foreground#1e2a35
  • editorWarning.foreground#ffb454
  • editorWhitespace.foreground#1e2a35
  • gitDecoration.conflictingResourceForeground#f07178
  • gitDecoration.deletedResourceForeground#f07178
  • gitDecoration.ignoredResourceForeground#4a5a68
  • gitDecoration.modifiedResourceForeground#ffb454
  • gitDecoration.untrackedResourceForeground#7fd962
  • input.background#151c24
  • input.border#1e2a35
  • input.foreground#d9e1e8
  • input.placeholderForeground#4a5a68
  • list.activeSelectionBackground#1a303c
  • list.activeSelectionForeground#d9e1e8
  • list.errorForeground#f07178
  • list.focusBackground#1a303c
  • list.highlightForeground#39bae6
  • list.hoverBackground#151c24
  • list.inactiveSelectionBackground#151c24
  • list.inactiveSelectionForeground#b8c5d0
  • list.warningForeground#ffb454
  • minimap.errorHighlight#f07178
  • minimap.findMatchHighlight#ffb454
  • minimap.selectionHighlight#1f3a4a
  • minimap.warningHighlight#ffb454
  • panel.background#0a0f14
  • panel.border#1a2530
  • panelTitle.activeForeground#d9e1e8
  • panelTitle.inactiveForeground#4a5a68
  • peekView.border#39bae6
  • peekViewEditor.background#0a0f14
  • peekViewResult.background#080c10
  • peekViewTitle.background#0f1419
  • scrollbarSlider.activeBackground#4a5a68cc
  • scrollbarSlider.background#4a5a6866
  • scrollbarSlider.hoverBackground#4a5a6899
  • sideBar.background#0a0f14
  • sideBar.border#1a2530
  • sideBar.foreground#b8c5d0
  • sideBarSectionHeader.background#0f1419
  • sideBarSectionHeader.border#1a2530
  • sideBarSectionHeader.foreground#b8c5d0
  • sideBarTitle.foreground#b8c5d0
  • statusBar.background#080c10
  • statusBar.border#1a2530
  • statusBar.debuggingBackground#ffb454
  • statusBar.debuggingForeground#0f1419
  • statusBar.foreground#b8c5d0
  • statusBar.noFolderBackground#080c10
  • statusBarItem.remoteBackground#59c2ff
  • tab.activeBackground#0f1419
  • tab.activeBorderTop#39bae6
  • tab.activeForeground#d9e1e8
  • tab.border#1a2530
  • tab.inactiveBackground#0a0f14
  • tab.inactiveForeground#4a5a68
  • terminal.ansiBlack#0f1419
  • terminal.ansiBlue#59c2ff
  • terminal.ansiBrightBlack#4a5a68
  • terminal.ansiBrightBlue#59c2ff
  • terminal.ansiBrightCyan#39bae6
  • terminal.ansiBrightGreen#7fd962
  • terminal.ansiBrightMagenta#d2a6ff
  • terminal.ansiBrightRed#f07178
  • terminal.ansiBrightWhite#d9e1e8
  • terminal.ansiBrightYellow#ffb454
  • terminal.ansiCyan#39bae6
  • terminal.ansiGreen#7fd962
  • terminal.ansiMagenta#d2a6ff
  • terminal.ansiRed#f07178
  • terminal.ansiWhite#b8c5d0
  • terminal.ansiYellow#ffb454
  • terminal.background#0f1419
  • terminal.foreground#d9e1e8
  • terminal.selectionBackground#1f3a4a
  • terminalCursor.foreground#39bae6
  • titleBar.activeBackground#0a0f14
  • titleBar.activeForeground#b8c5d0
  • titleBar.inactiveBackground#0a0f14
  • titleBar.inactiveForeground#4a5a68

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5c6b78italic
keyword, storage.type, storage.modifier#ff8f40
keyword.control#ff8f40
string, constant.other.placeholder#7fd962
constant.numeric#ffb454
entity.name.function, meta.function-call, support.function#59c2ff
variable, entity.name.variable#d9e1e8
entity.name.type, entity.name.class, support.type, support.class#39bae6
constant, entity.name.constant, variable.other.constant#ffb454
entity.name.tag#39bae6
entity.other.attribute-name#ffb454
string.quoted, meta.attribute-value#7fd962
entity.name.type.class, meta.class#39bae6
entity.name.function.method, meta.method#59c2ff
variable.other.property, meta.property, support.type.property-name#b8c5d0
keyword.control.import, keyword.control.export, keyword.control.from#ff8f40
punctuation.decorator, meta.decorator, entity.name.function.decorator#d2a6ff
string.template#7fd962
meta.template.expression, punctuation.definition.template-expression#39bae6
string.regexp#95e6cb
keyword.operator#f29668
support.type.property-name.json#39bae6
markup.heading, entity.name.section.markdown#39bae6bold
markup.bold#ffb454bold
markup.italic#d2a6ffitalic
markup.underline.link, string.other.link#59c2ff
markup.inline.raw, markup.fenced_code#7fd962