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#1f2019
  • activityBar.border#ffffff0f
  • activityBar.foreground#d2be9e
  • activityBar.inactiveForeground#6e6558
  • activityBarBadge.background#d04550
  • activityBarBadge.foreground#181916
  • badge.background#d04550
  • badge.foreground#181916
  • breadcrumb.activeSelectionForeground#ead6b4
  • breadcrumb.focusForeground#ead6b4
  • breadcrumb.foreground#9e9484
  • breadcrumbPicker.background#272a1f
  • button.background#6aaa44
  • button.foreground#181916
  • button.hoverBackground#7fbc55
  • button.secondaryBackground#272a1f
  • button.secondaryForeground#ead6b4
  • contrastBorder#00000000
  • dropdown.background#272a1f
  • dropdown.border#ffffff0f
  • dropdown.foreground#ead6b4
  • editor.background#181916
  • editor.documentHighlightBackground#31342a50
  • editor.findMatchBackground#c87838aa
  • editor.findMatchHighlightBackground#c8783855
  • editor.foreground#ead6b4
  • editor.inactiveSelectionBackground#31342a50
  • editor.lineHighlightBackground#31342a40
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#31342a50
  • editor.selectionBackground#46494080
  • editor.wordHighlightBackground#31342a50
  • editor.wordHighlightStrongBackground#46494070
  • editorBracketMatch.background#31342a50
  • editorBracketMatch.border#6e6558
  • editorCursor.background#181916
  • editorCursor.foreground#6e6558
  • editorError.foreground#d04550
  • editorGroupHeader.tabsBackground#1f2019
  • editorGutter.addedBackground#6aaa44
  • editorGutter.background#181916
  • editorGutter.deletedBackground#d04550
  • editorGutter.modifiedBackground#c87838
  • editorHint.foreground#2ea882
  • editorIndentGuide.activeBackground1#6e6558
  • editorIndentGuide.background1#31342a
  • editorInfo.foreground#4878ba
  • editorLineNumber.activeForeground#9e9484
  • editorLineNumber.foreground#6e6558
  • editorRuler.foreground#ffffff0f
  • editorWarning.foreground#c87838
  • editorWhitespace.foreground#46494050
  • focusBorder#6aaa44
  • gitDecoration.addedResourceForeground#6aaa44
  • gitDecoration.conflictingResourceForeground#b070d0
  • gitDecoration.deletedResourceForeground#d04550
  • gitDecoration.ignoredResourceForeground#6e6558
  • gitDecoration.modifiedResourceForeground#c87838
  • gitDecoration.untrackedResourceForeground#2ea882
  • input.background#272a1f
  • input.border#ffffff0f
  • input.foreground#ead6b4
  • input.placeholderForeground#6e6558
  • inputOption.activeBackground#6aaa4430
  • inputOption.activeBorder#6aaa44
  • list.activeSelectionBackground#27291f70
  • list.activeSelectionForeground#ead6b4
  • list.errorForeground#d04550
  • list.focusBackground#31342a70
  • list.focusForeground#ead6b4
  • list.highlightForeground#6aaa44
  • list.hoverBackground#27291f50
  • list.inactiveSelectionBackground#27291f70
  • list.warningForeground#c87838
  • merge.currentHeaderBackground#6aaa4440
  • merge.incomingHeaderBackground#4878ba40
  • notifications.background#272a1f
  • notifications.border#ffffff0f
  • notifications.foreground#ead6b4
  • notificationsErrorIcon.foreground#d04550
  • notificationsInfoIcon.foreground#4878ba
  • notificationsWarningIcon.foreground#c87838
  • panel.background#181916
  • panel.border#ffffff0f
  • panelTitle.activeBorder#6aaa44
  • panelTitle.activeForeground#ead6b4
  • panelTitle.inactiveForeground#6e6558
  • pickerGroup.border#ffffff0f
  • pickerGroup.foreground#9e9484
  • progressBar.background#6aaa44
  • quickInput.background#1f2019
  • quickInput.foreground#ead6b4
  • quickInputHighlightForeground#6aaa44
  • scrollbarSlider.activeBackground#6e6558
  • scrollbarSlider.background#46494050
  • scrollbarSlider.hoverBackground#46494080
  • selection.background#46494080
  • sideBar.background#1f2019
  • sideBar.border#ffffff0f
  • sideBar.foreground#d2be9e
  • sideBarSectionHeader.background#1f2019
  • sideBarSectionHeader.border#ffffff07
  • sideBarSectionHeader.foreground#9e9484
  • sideBarTitle.foreground#9e9484
  • statusBar.background#1f2019
  • statusBar.border#ffffff0f
  • statusBar.foreground#9e9484
  • statusBar.noFolderBackground#1f2019
  • statusBarItem.hoverBackground#31342a
  • statusBarItem.remoteBackground#2ea882
  • statusBarItem.remoteForeground#181916
  • tab.activeBackground#181916
  • tab.activeBorder#00000000
  • tab.activeBorderTop#00000000
  • tab.activeForeground#ead6b4
  • tab.border#ffffff07
  • tab.hoverBackground#272a1f
  • tab.inactiveBackground#1f2019
  • tab.inactiveForeground#6e6558
  • tab.unfocusedActiveBackground#181916
  • tab.unfocusedActiveForeground#9e9484
  • terminal.ansiBlack#181916
  • terminal.ansiBlue#4878ba
  • terminal.ansiBrightBlack#464940
  • terminal.ansiBrightBlue#4878ba
  • terminal.ansiBrightCyan#6aaa44
  • terminal.ansiBrightGreen#2ea882
  • terminal.ansiBrightMagenta#b070d0
  • terminal.ansiBrightRed#d04550
  • terminal.ansiBrightWhite#ead6b4
  • terminal.ansiBrightYellow#c87838
  • terminal.ansiCyan#6aaa44
  • terminal.ansiGreen#2ea882
  • terminal.ansiMagenta#b070d0
  • terminal.ansiRed#d04550
  • terminal.ansiWhite#d2be9e
  • terminal.ansiYellow#c87838
  • terminal.background#181916
  • terminal.foreground#ead6b4
  • terminal.selectionBackground#46494080
  • terminalCursor.background#181916
  • terminalCursor.foreground#ead6b4
  • titleBar.activeBackground#1f2019
  • titleBar.activeForeground#d2be9e
  • titleBar.border#ffffff0f
  • titleBar.inactiveBackground#1f2019
  • titleBar.inactiveForeground#6e6558
  • widget.shadow#00000060

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.quoted.docstring.multi#9e9484italic
keyword, keyword.control, keyword.operator.logical, keyword.other, storage, storage.type, storage.modifier, constant.language, variable.language.this, variable.language.self, keyword.operator.new, keyword.operator.delete, support.type.primitive#d04550
entity.name.function, entity.name.method, support.function, meta.function-call entity.name.function, variable.function#6aaa44
entity.name.type, entity.name.class, entity.name.namespace, support.class, support.type, entity.other.inherited-class, meta.return-type, entity.name.exception, entity.name.interface, entity.name.trait, entity.name.enum#2ea882
string, string.quoted, string.interpolated, constant.character, string.template, string.regexp#c87838
constant.numeric, constant.other.color, constant.other.unit#4878ba
keyword.operator, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.type, punctuation.definition.decorator, entity.name.function.decorator, meta.decorator, storage.type.annotation#b070d0
variable, variable.other, variable.other.readwrite, meta.definition.variable#ead6b4
variable.parameter, meta.function.parameter variable#ead6b4italic
punctuation, meta.brace, meta.bracket, punctuation.accessor, punctuation.separator, punctuation.terminator, punctuation.definition.block, punctuation.definition.binding-pattern#d2be9e
entity.name.tag, meta.tag.sgml#2ea882
entity.other.attribute-name#2ea882
support.type.property-name.css, meta.property-name#6aaa44
support.constant.property-value, meta.property-value support.constant#c87838
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#2ea882
markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown#6aaa44bold
markup.bold#d04550bold
markup.italic#c87838italic
markup.inline.raw, markup.raw.block#9e9484
markup.underline.link, string.other.link.title.markdown#4878ba
markup.quote#9e9484italic
punctuation.definition.list.begin.markdown#2ea882
support.type.property-name.json, meta.object-literal.key#6aaa44
invalid, invalid.illegal#d04550underline