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.activeBackground#606060
  • activityBar.activeBorder#2e2f30
  • activityBar.background#404244
  • activityBarBadge.background#ff8800
  • activityBarBadge.foreground#2e2f30
  • contrastActiveBorder#7f7f7f
  • contrastBorder#7f7f7f
  • dropdown.border#7f7f7f
  • editor.background#2e2f30
  • editor.findMatchBackground#8a7f2c
  • editor.findMatchHighlightBackground#8a402c78
  • editor.foreground#d6cf9a
  • editor.lineHighlightBackground#373737
  • editor.selectionBackground#1d545c
  • editorGroup.border#808284
  • editorGroupHeader.noTabsBackground#505254
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#808284
  • editorGutter.background#404244
  • editorIndentGuide.activeBackground#3daee9
  • editorIndentGuide.background#888888
  • editorLineNumber.activeForeground#d6c540
  • editorLineNumber.foreground#989694
  • editorOverviewRuler.background#222222
  • editorWhitespace.foreground#bec0c2
  • editorWidget.background#404244
  • editorWidget.resizeBorder#404244
  • focusBorder#00000000
  • foreground#eff0f1
  • input.background#505254
  • input.border#dddddd
  • input.foreground#eff0f1
  • list.activeSelectionBackground#454749
  • list.focusBackground#606060
  • list.highlightForeground#3daee9
  • list.hoverBackground#606060
  • list.inactiveSelectionBackground#454749
  • minimap.background#404244
  • panel.background#404244
  • panel.border#7f7f7f
  • panel.dropBorder#404244
  • panelTitle.activeBorder#ff8800
  • panelTitle.activeForeground#eff0f1
  • panelTitle.inactiveForeground#989694
  • peekView.border#dddddd
  • peekViewEditor.background#404244
  • peekViewEditor.matchHighlightBackground#00000000
  • peekViewEditor.matchHighlightBorder#aa9ad6
  • peekViewEditorGutter.background#505254
  • peekViewResult.background#454749
  • peekViewResult.fileForeground#eeeeee
  • peekViewResult.lineForeground#9e9c9a
  • peekViewResult.matchHighlightBackground#1d545c
  • peekViewResult.selectionBackground#606060
  • peekViewResult.selectionForeground#eff0f1
  • peekViewTitle.background#4a4c4e
  • peekViewTitleDescription.foreground#bbbbbb
  • peekViewTitleLabel.foreground#eff0f1
  • sideBar.background#2e2f30
  • sideBarSectionHeader.background#404244
  • statusBar.border#00000000
  • tab.activeBorder#ff8800
  • tab.activeBorderTop#ff8800
  • tab.activeForeground#eff0f1
  • tab.border#7f7f7f
  • tab.inactiveBackground#404244
  • tab.inactiveForeground#989694
  • terminal.ansiBrightBlue#4cb8f78c
  • terminal.foreground#cccccc
  • terminal.selectionBackground#eff0f1
  • titleBar.border#7f7f7f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#a8abb0
punctuation.definition.comment.begin.documentation, punctuation.definition.comment.end.documentation, punctuation.definition.comment.documentation, comment.block.documentation, comment.line.double-slash.documentation#65676a
storage.type.class.doxygen#66a334
invalid.illegal#660000
keyword.operator#d6cf9a
keyword, storage#45c6d6
meta.preprocessor, keyword.control.directive#ff6aad
storage.type, support.type#45c6d6
constant.language, support.constant, variable.language#ff8080
variable.other.property.static#9aa7d6
variable, support.variable#d6bb9a
entity.name.function, support.function#6da7b3bold
entity.name.type, entity.other.inherited-class, support.class#ff8080
entity.name.exception#660000
entity.name.sectionbold
constant.numeric, constant.character, constant#279add
string#d69545
constant.character.escape#aaaaaa
string.regexp#4B83CD
constant.other.symbol#AB6526
punctuation#aaaaaa
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#AAAAAA
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#91B3E0
entity.name.tag#4B83CD
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#91B3E0italic
constant.character.entity, punctuation.definition.entity#AB6526
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#7A3E9D
meta.property-name, support.type.property-name#AB6526
meta.property-value, meta.property-value constant.other, support.constant.property-value#448C27
keyword.other.importantbold
markup.changed#000000
markup.deleted#000000
markup.italicitalic
markup.error#660000
markup.inserted#000000
meta.link#4B83CD
markup.output, markup.raw#777777
markup.prompt#777777
markup.heading#AA3731
markup.boldbold
markup.traceback#660000
markup.underlineunderline
markup.quote#7A3E9D
markup.list#4B83CD
markup.bold, markup.italic#448C27
markup.inline.raw#AB6526
meta.diff.range, meta.diff.index, meta.separator#434343
meta.diff.header.from-file#434343
meta.diff.header.to-file#434343
Cute Theme by breadStick - VS Code Theme