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#FFEB3B
  • activityBar.background#212121
  • activityBar.foreground#FFEB3B
  • activityBarBadge.background#FFB74D
  • activityBarBadge.foreground#1B1B1B
  • badge.background#FFEB3B
  • badge.foreground#1B1B1B
  • button.background#FFB74D
  • button.foreground#1B1B1B
  • button.hoverBackground#FFAB40
  • dropdown.background#252526
  • dropdown.border#555555
  • dropdown.foreground#D4D4D4
  • editor.background#1B1B1B
  • editor.findMatchBackground#FFB74D
  • editor.findMatchHighlightBackground#FFB74D88
  • editor.foreground#D4D4D4
  • editor.lineHighlightBackground#333333
  • editor.lineHighlightBorder#FFEB3B
  • editor.selectionBackground#4DD0E1
  • editor.selectionHighlightBackground#4DD0E1AA
  • editorBracketMatch.background#4DD0E155
  • editorBracketMatch.border#FFEB3B
  • editorCursor.foreground#FFEB3B
  • editorGroupHeader.tabsBackground#212121
  • editorIndentGuide.activeBackground#FFEB3B
  • editorIndentGuide.background#444444
  • editorLineNumber.activeForeground#FFEB3B
  • editorLineNumber.foreground#7B7B7B
  • editorWhitespace.foreground#555555
  • focusBorder#FFEB3B
  • gitDecoration.conflictingResourceForeground#FFB74D
  • gitDecoration.deletedResourceForeground#E57373
  • gitDecoration.modifiedResourceForeground#81C784
  • gitDecoration.untrackedResourceForeground#64B5F6
  • input.background#252526
  • input.border#555555
  • input.foreground#D4D4D4
  • input.placeholderForeground#777777
  • inputOption.activeBorder#FFEB3B
  • list.activeSelectionBackground#4DD0E1
  • list.activeSelectionForeground#1B1B1B
  • list.focusBackground#4DD0E1
  • list.highlightForeground#FFEB3B
  • list.hoverBackground#333333
  • minimap.background#1B1B1B
  • minimapSlider.activeBackground#999999CC
  • minimapSlider.background#55555566
  • minimapSlider.hoverBackground#77777799
  • panel.background#1B1B1B
  • panel.border#333333
  • panelTitle.activeBorder#FFEB3B
  • panelTitle.activeForeground#FFEB3B
  • panelTitle.inactiveForeground#A0A0A0
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#999999CC
  • scrollbarSlider.background#55555566
  • scrollbarSlider.hoverBackground#77777799
  • sideBar.background#252526
  • sideBar.foreground#D4D4D4
  • sideBarSectionHeader.background#212121
  • sideBarSectionHeader.foreground#FFEB3B
  • sideBarTitle.foreground#FFEB3B
  • statusBar.background#2C2C2C
  • statusBar.debuggingBackground#FFB74D
  • statusBar.foreground#FFEB3B
  • statusBar.noFolderBackground#2C2C2C
  • statusBarItem.hoverBackground#3A3A3A
  • tab.activeBackground#1B1B1B
  • tab.activeBorder#FFEB3B
  • tab.activeForeground#FFEB3B
  • tab.border#000000
  • tab.inactiveBackground#252526
  • tab.inactiveForeground#A0A0A0
  • terminal.ansiBlue#2196F3
  • terminal.ansiBrightBlue#64B5F6
  • terminal.ansiBrightCyan#80DEEA
  • terminal.ansiBrightGreen#A5D6A7
  • terminal.ansiBrightMagenta#CE93D8
  • terminal.ansiBrightRed#EF9A9A
  • terminal.ansiBrightYellow#FFF176
  • terminal.ansiCyan#4DD0E1
  • terminal.ansiGreen#81C784
  • terminal.ansiMagenta#BA68C8
  • terminal.ansiRed#E57373
  • terminal.ansiYellow#FFEB3B
  • terminal.background#1B1B1B
  • terminal.foreground#D4D4D4
  • titleBar.activeBackground#212121
  • titleBar.activeForeground#FFEB3B
  • titleBar.inactiveBackground#1B1B1B
  • titleBar.inactiveForeground#A0A0A0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A9955italic
string, string.quoted, string.template#FFB74D
keyword, storage.type, storage.modifier#FFEB3Bbold
keyword.operator, punctuation.accessor#D4D4D4
variable, variable.other#4DD0E1
variable.parameter#4DD0E1italic
entity.name.function, support.function#FFEB3B
meta.function-call#FFEB3B
entity.name.class, entity.name.type.class, support.class#4DD0E1bold
entity.name.type, support.type#FFB74D
entity.name.type.interface#FFB74Ditalic
constant.numeric#81C784
constant, constant.language, constant.character#81C784
constant.language.boolean#FFEB3Bbold
variable.other.property, support.variable.property#FFB74D
meta.object-literal.key#FFB74D
entity.name.tag, punctuation.definition.tag#2196F3
entity.other.attribute-name#4DD0E1italic
punctuation, meta.brace#D4D4D4
string.regexp#E57373
constant.character.escape#E57373
meta.decorator, punctuation.decorator#C792EA
invalid, invalid.illegal#F44747strikethrough
markup.heading, entity.name.section#FFEB3Bbold
markup.bold#FFEB3Bbold
markup.italic#FFEB3Bitalic
markup.underline.link#2196F3
markup.inline.raw, markup.fenced_code#FFB74D
support.type.property-name.json#FFEB3B
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFEB3B
support.type.property-name.css#FFB74D
support.constant.property-value.css#81C784