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.activeBorder#20c080
  • activityBar.background#0a1510
  • activityBar.foreground#d0e0d8
  • activityBar.inactiveForeground#507060
  • activityBarBadge.background#20c080
  • activityBarBadge.foreground#071a12
  • badge.background#20c080
  • badge.foreground#071a12
  • button.background#20c080
  • button.foreground#071a12
  • button.hoverBackground#40d090
  • diffEditor.insertedTextBackground#20c08020
  • diffEditor.removedTextBackground#f0505020
  • dropdown.background#0f1a15
  • dropdown.border#172a22
  • dropdown.foreground#d0e0d8
  • editor.background#0f1a15
  • editor.findMatchBackground#1f3f3080
  • editor.findMatchHighlightBackground#1f3f3060
  • editor.findRangeHighlightBackground#1f3f3040
  • editor.foreground#d0e0d8
  • editor.hoverHighlightBackground#1f3f3060
  • editor.lineHighlightBackground#172a22
  • editor.selectionBackground#1f3f30
  • editor.wordHighlightBackground#1f3f3040
  • editor.wordHighlightStrongBackground#1f3f3060
  • editorBracketMatch.background#1f3f3060
  • editorBracketMatch.border#20c080
  • editorCursor.foreground#20c080
  • editorError.foreground#f05050
  • editorGroupHeader.tabsBackground#0a1510
  • editorHint.foreground#20c080
  • editorIndentGuide.activeBackground#1f3f30
  • editorIndentGuide.background#172a2260
  • editorInfo.foreground#50a0d0
  • editorLink.activeForeground#40d090
  • editorOverviewRuler.bracketMatchForeground#40c0c0
  • editorOverviewRuler.deletedForeground#f05050
  • editorOverviewRuler.errorForeground#f05050
  • editorOverviewRuler.findMatchForeground#20c080
  • editorOverviewRuler.modifiedForeground#d0c060
  • editorOverviewRuler.warningForeground#f0a050
  • editorWarning.foreground#f0a050
  • focusBorder#20c080
  • input.background#172a22
  • input.border#1f3f30
  • input.foreground#d0e0d8
  • input.placeholderForeground#507060
  • inputOption.activeBorder#20c080
  • list.activeSelectionBackground#1f3f30
  • list.activeSelectionForeground#b0f0d0
  • list.errorForeground#f05050
  • list.highlightForeground#40d090
  • list.hoverBackground#172a22
  • list.hoverForeground#b0f0d0
  • list.inactiveSelectionBackground#172a22
  • list.inactiveSelectionForeground#d0e0d8
  • list.warningForeground#f0a050
  • menu.background#0f1a15
  • menu.foreground#d0e0d8
  • menu.selectionBackground#1f3f30
  • menu.selectionForeground#b0f0d0
  • menu.separatorBackground#172a22
  • menubar.selectionBackground#172a22
  • menubar.selectionForeground#d0e0d8
  • merge.currentContentBackground#20c08020
  • merge.currentHeaderBackground#20c08040
  • merge.incomingContentBackground#50a0d020
  • merge.incomingHeaderBackground#50a0d040
  • panel.background#0f1a15
  • panel.border#172a22
  • panelTitle.activeBorder#20c080
  • panelTitle.activeForeground#b0f0d0
  • panelTitle.inactiveForeground#507060
  • progressBar.background#20c080
  • scrollbarSlider.activeBackground#20c08080
  • scrollbarSlider.background#1f3f3040
  • scrollbarSlider.hoverBackground#1f3f3080
  • sideBar.background#0f1a15
  • sideBar.border#172a22
  • sideBar.foreground#d0e0d8
  • sideBarSectionHeader.background#172a22
  • sideBarSectionHeader.foreground#d0e0d8
  • sideBarTitle.foreground#40d090
  • statusBar.background#0a1510
  • statusBar.border#172a22
  • statusBar.debuggingBackground#20c080
  • statusBar.debuggingForeground#071a12
  • statusBar.foreground#d0e0d8
  • statusBar.noFolderBackground#0a1510
  • statusBarItem.remoteBackground#20c080
  • statusBarItem.remoteForeground#071a12
  • tab.activeBackground#172a22
  • tab.activeBorderTop#20c080
  • tab.activeForeground#b0f0d0
  • tab.inactiveBackground#0f1a15
  • tab.inactiveForeground#507060
  • tab.unfocusedActiveBorderTop#107050
  • terminal.ansiBlack#0f1a15
  • terminal.ansiBlue#50a0d0
  • terminal.ansiBrightBlack#507060
  • terminal.ansiBrightBlue#70b0e0
  • terminal.ansiBrightCyan#60e0e0
  • terminal.ansiBrightGreen#40d090
  • terminal.ansiBrightMagenta#e070b0
  • terminal.ansiBrightRed#f07070
  • terminal.ansiBrightWhite#e0f0e8
  • terminal.ansiBrightYellow#e0d080
  • terminal.ansiCyan#40c0c0
  • terminal.ansiGreen#20c080
  • terminal.ansiMagenta#c050a0
  • terminal.ansiRed#f05050
  • terminal.ansiWhite#d0e0d8
  • terminal.ansiYellow#d0c060
  • terminal.background#0f1a15
  • terminal.foreground#d0e0d8
  • terminalCursor.background#0f1a15
  • terminalCursor.foreground#20c080
  • titleBar.activeBackground#0a1510
  • titleBar.activeForeground#d0e0d8
  • titleBar.inactiveBackground#0a1510
  • titleBar.inactiveForeground#507060

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#507060italic
string, constant.other.symbol#d0c060
constant.numeric, constant.language, constant.character, constant.escape#e0d080
variable, string constant.other.placeholder#d0e0d8
keyword, keyword.control, keyword.operator, storage.modifier#40d090bold
entity.name.function, entity.name.class, entity.name.type, entity.name.namespace, entity.name.tag#20c080bold
storage.type#c050a0bold
support.class, support.type, support.function, support.constant#50a0d0
keyword.operator#40c0c0
punctuation, meta.brace, meta.delimiter#80a090
support.type.property-name.json#40d090bold
markup.heading#20c080bold
markup.boldbold
markup.italicitalic
markup.underline.link#50a0d0
markup.list#d0c060
markup.quote#c050a0italic
comment.block.documentation#608070italic
string.regexp#40c0c0
tag.decorator.js, meta.tag.decorator, meta.decorator#c050a0italic
string.template, punctuation.definition.string.template#d0c060
variable.language, variable.other.constant#f07070italic
entity.name.section, entity.name.module#40e090bold
constant.other.color, support.constant.color#20c080
markup.table, markup.raw#90e080bold
variable.other.object.property, support.variable.property#70d0a0italic