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#B55A26
  • activityBar.background#fefefe
  • activityBar.border#F6E7DE
  • activityBar.dropBorder#B55A26
  • activityBar.foreground#383838
  • activityBar.inactiveForeground#707070
  • activityBarBadge.background#B55A26
  • activityBarBadge.foreground#ebebeb
  • activityBarTop.activeBorder#B55A26
  • activityBarTop.background#fefefe
  • activityBarTop.foreground#383838
  • activityBarTop.inactiveForeground#707070
  • activityErrorBadge.background#912723
  • activityErrorBadge.foreground#ebebeb
  • activityWarningBadge.background#918623
  • activityWarningBadge.foreground#ebebeb
  • badge.background#B55A26
  • badge.foreground#ebebeb
  • breadcrumb.activeSelectionForeground#383838
  • breadcrumb.background#fefefe
  • breadcrumb.focusForeground#383838
  • breadcrumb.foreground#2f2f2f
  • breadcrumbPicker.background#fefefe
  • button.background#8F3C0C
  • button.foreground#ebebeb
  • button.hoverBackground#B55A26
  • checkbox.background#8F3C0C
  • commandCenter.activeBackground#e0a88a
  • commandCenter.activeBorder#e0a88a
  • commandCenter.activeForeground#080808
  • commandCenter.background#F6E7DE
  • commandCenter.border#F6E7DE
  • commandCenter.debuggingBackground#8F100C90
  • commandCenter.debuggingForeground#ebebeb
  • commandCenter.foreground#383838
  • commandCenter.inactiveBackground#9f9f9f
  • commandCenter.inactiveBorder#9f9f9f
  • commandCenter.inactiveForeground#707070
  • diffEditor.insertedTextBackground#34BD3820
  • diffEditor.removedTextBackground#BD383420
  • editor.background#fefefe
  • editor.findMatchBackground#1d504241
  • editor.findMatchHighlightBackground#1e332d41
  • editor.foreground#707070
  • editor.hoverHighlightBackground#D9CAC296
  • editor.inactiveSelectionBackground#D9CAC232
  • editor.lineHighlightBackground#f0f0f0
  • editor.rangeHighlightBackground#21242321
  • editor.selectionBackground#D9CAC264
  • editor.selectionHighlightBackground#33383721
  • editor.symbolHighlightBackground#21242321
  • editor.wordHighlightBackground#F6E7DE16
  • editor.wordHighlightStrongBackground#F6E7DE32
  • editorBracketMatch.border#444
  • editorGroup.border#2f2f2f
  • editorGroupHeader.tabsBackground#fefefe
  • editorGutter.addedBackground#34BD38
  • editorGutter.background#D7D7D7
  • editorGutter.commentRangeForeground#9f9f9f
  • editorGutter.deletedBackground#BD3834
  • editorGutter.modifiedBackground#BDB034
  • editorIndentGuide.activeBackground#B0BEC5A4
  • editorInlayHint.background#38383800
  • editorInlayHint.foreground#347DBDa0
  • editorLineNumber.activeForeground#474747
  • editorLineNumber.foreground#9f9f9f
  • editorLink.activeForeground#D37947
  • editorUnnecessaryCode.opacity#000000c0
  • editorWhitespace.foreground#dfdfdf
  • errorForeground#912723
  • focusBorder#B55A26
  • foreground#383838
  • git.blame.editorDecorationForeground#9f9f9f
  • gitDecoration.addedResourceForeground#239127
  • gitDecoration.conflictingResourceForeground#6C0F0B
  • gitDecoration.deletedResourceForeground#912723
  • gitDecoration.modifiedResourceForeground#918623
  • gitDecoration.untrackedResourceForeground#0B6C0F
  • icon.foreground#383838
  • input.background#fefefe
  • input.border#D9CAC2
  • input.foreground#181818
  • inputOption.activeBackground#e0a88a
  • inputOption.activeBorder#e0a88a
  • inputOption.activeForeground#080808
  • inputOption.hoverBackground#D9CAC2
  • inputValidation.errorBackground#912723
  • inputValidation.errorBorder#912723
  • inputValidation.errorForeground#ebebeb
  • inputValidation.infoBackground#233691
  • inputValidation.infoBorder#233691
  • inputValidation.infoForeground#ebebeb
  • inputValidation.warningBackground#918623
  • inputValidation.warningBorder#918623
  • inputValidation.warningForeground#ebebeb
  • keybindingLabel.background#D9CAC264
  • keybindingLabel.border#81818180
  • keybindingLabel.bottomBorder#41414190
  • keybindingLabel.foreground#e0e0e0
  • list.activeSelectionBackground#F6E7DE
  • list.activeSelectionForeground#383838
  • list.dropBackground#D37947
  • list.filterMatchBackground#B55A26
  • list.focusBackground#F6E7DE
  • list.highlightForeground#B55A26
  • list.hoverBackground#D9CAC2
  • list.inactiveFocusBackground#D37947
  • list.inactiveSelectionBackground#F6E7DE
  • menu.background#fefefe
  • menu.foreground#2f2f2f
  • menu.selectionBackground#552407
  • menu.selectionForeground#383838
  • menu.separatorBackground#2f2f2f
  • merge.commonContentBackground#91862360
  • merge.commonHeaderBackground#91862390
  • merge.currentContentBackground#23839160
  • merge.currentHeaderBackground#23839190
  • merge.incomingContentBackground#23369160
  • merge.incomingHeaderBackground#23369190
  • outputView.background#fefefe
  • panel.background#fefefe
  • panel.border#F6E7DE
  • panelSection.border#F6E7DE
  • panelTitle.activeBorder#B55A26
  • panelTitle.activeForeground#383838
  • panelTitle.inactiveForeground#707070
  • peekView.border#8F3C0C
  • peekViewEditor.background#F3F3F3
  • peekViewEditor.matchHighlightBackground#D9CAC2
  • peekViewResult.background#fefefe
  • peekViewResult.matchHighlightBackground#1e332d31
  • peekViewResult.selectionBackground#D9CAC2
  • peekViewTitle.background#531412
  • pickerGroup.foreground#B55A26
  • progressBar.background#B55A26
  • quickInput.background#fefefe
  • quickInput.foreground#2f2f2f
  • scrollbar.shadow#55555533
  • scrollbarSlider.activeBackground#D3794763
  • scrollbarSlider.background#D9CAC233
  • scrollbarSlider.hoverBackground#D3794783
  • selection.background#D9CAC264
  • settings.modifiedItemIndicator#BDB034
  • sideBar.background#fefefe
  • sideBar.border#F6E7DE
  • sideBar.foreground#383838
  • sideBarSectionHeader.background#fefefe
  • sideBarSectionHeader.foreground#2f2f2f
  • sideBarTitle.background#fefefe
  • sideBarTitle.foreground#707070
  • sideBySideEditor.horizontalBorder#F6E7DE
  • sideBySideEditor.verticalBorder#F6E7DE
  • statusBar.background#1a1a1a
  • statusBar.border#2f2f2f
  • statusBar.debuggingBackground#8F100C
  • statusBar.foreground#e0e0e0
  • statusBar.noFolderBackground#717171
  • statusBarItem.remoteBackground#8F3C0C
  • statusBarItem.remoteForeground#BDB034
  • tab.activeBackground#F6E7DE
  • tab.activeForeground#383838
  • tab.inactiveBackground#ebebeb
  • tab.inactiveForeground#707070
  • terminal.ansiBlack#797979
  • terminal.ansiBlue#344BBD
  • terminal.ansiBrightBlack#a0a0a0
  • terminal.ansiBrightBlue#0422BA
  • terminal.ansiBrightCyan#04A2BA
  • terminal.ansiBrightGreen#04BA0A
  • terminal.ansiBrightMagenta#BA04A2
  • terminal.ansiBrightRed#BA0A04
  • terminal.ansiBrightWhite#fefefe
  • terminal.ansiBrightYellow#BAA804
  • terminal.ansiCyan#34ABBD
  • terminal.ansiGreen#34BD38
  • terminal.ansiMagenta#BD34AB
  • terminal.ansiRed#BD3834
  • terminal.ansiWhite#D7D7D7
  • terminal.ansiYellow#BDB034
  • terminal.background#000000
  • terminal.foreground#F5F5F5
  • terminal.inactiveSelectionBackground#D9CAC232
  • terminal.selectionBackground#D9CAC264
  • textLink.activeForeground#B55A26
  • textLink.foreground#D37947
  • titleBar.activeBackground#fefefe
  • titleBar.activeForeground#2f2f2f
  • titleBar.border#F6E7DE
  • titleBar.inactiveBackground#9f9f9f
  • titleBar.inactiveForeground#707070
  • toolbar.activeBackground#e0a88a
  • toolbar.hoverBackground#D9CAC2

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
constant.numeric, constant.numeric keyword.other.unit, constant.other.timestamp#BAA804
string#BA7104
constant.character.escape#ff6a14
punctuation.definition.template-expression#ff6a14
meta.template.expression#111100
string.regexp#C365CA
constant.character.escape.backslash.regexp#e5bde8
punctuation.definition.group.regexp, punctuation.definition.character-class.regexp#f0daf2
constant.language#BD3834
constant.other.color#000000
comment, comment.block#9f9f9f
comment.block.documentation#6A8759
storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc#6A8759bold underline
variable.other.jsdoc#629755italic
storage.type, storage.modifier#B55A26bold
storage.modifierbold italic
keyword, keyword.operator, keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python, keyword.control#B55A26
entity.other.attribute-name#6C630B
meta.object-literal.key#B57E26
entity.name.function.preprocessor#BD34ABbold
entity.name.type.classbold
entity.name.function#7634BDbold
variable.language#B55A26bold
variable.parameter#383838italic
variable.other.enummember#235E91bold italic
entity.name.variable, meta.definition.variable, variable.object.property#383838
meta.import variable.other.readwrite#383838
meta.import variable.other.readwrite.alias#383838
entity.name.type#347DBD
meta.definition.property#235E91
support.type.builtin, support.type.primitive, storage.type.built-in#347DBDbold
punctuation.definition.tag, entity.name.tag#918623
support.class.componentbold
meta.tag.attributes punctuation.section.embedded#111100
meta.jsx.children punctuation.section.embedded, meta.tag.attributes meta.jsx.children punctuation.section.embedded#ff6a14
support.type.property-name#B57E26
variable.other.env#B57E26
source.env#FFA014
markup.heading#D37947bold
markup.underlineunderline
markup.boldbold
markup.italicitalic
markup.underline.link#D37947
markup.quote#912383
markup.list punctuation.definition.list.begin#B57E26bold
source.css entity.other.attribute-name.idbold
source.css entity.name.tag#918623bold
source.css support.function#7634BD