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#2f2f2f
  • activityBar.border#00000000
  • activityBar.dropBorder#B55A26
  • activityBar.foreground#ebebeb
  • activityBar.inactiveForeground#9f9f9f
  • activityBarBadge.background#B55A26
  • activityBarBadge.foreground#ebebeb
  • activityBarTop.activeBorder#B55A26
  • activityBarTop.background#181818
  • activityBarTop.foreground#ebebeb
  • activityBarTop.inactiveForeground#9f9f9f
  • activityErrorBadge.background#B52B26
  • activityErrorBadge.foreground#ebebeb
  • activityWarningBadge.background#B5A726
  • activityWarningBadge.foreground#ebebeb
  • agents.background#181818
  • agentsPanel.border#00000000
  • badge.background#B55A26
  • badge.foreground#ebebeb
  • breadcrumb.activeSelectionForeground#ebebeb
  • breadcrumb.background#080808
  • breadcrumb.focusForeground#ebebeb
  • breadcrumb.foreground#e0e0e0
  • breadcrumbPicker.background#181818
  • button.background#8F3C0C
  • button.foreground#ebebeb
  • button.hoverBackground#B55A26
  • checkbox.background#8F3C0C
  • commandCenter.activeBackground#474747
  • commandCenter.activeBorder#878787
  • commandCenter.activeForeground#ebebeb
  • commandCenter.background#181818
  • commandCenter.border#2f2f2f
  • commandCenter.debuggingBackground#8F100C90
  • commandCenter.foreground#ebebeb
  • commandCenter.inactiveBorder#2f2f2f
  • commandCenter.inactiveForeground#9f9f9f
  • diffEditor.insertedTextBackground#2EBD3320
  • diffEditor.removedTextBackground#D34F4A20
  • dropdown.background#2f2f2f
  • dropdown.foreground#e0e0e0
  • editor.background#080808
  • editor.findMatchBackground#1d5042
  • editor.findMatchHighlightBackground#1e332d
  • editor.foreground#e0e0e0
  • editor.hoverHighlightBackground#D3794796
  • editor.inactiveSelectionBackground#D3794732
  • editor.lineHighlightBackground#1d1d1d
  • editor.rangeHighlightBackground#212423
  • editor.selectionBackground#D3794764
  • editor.selectionHighlightBackground#333837
  • editor.symbolHighlightBackground#212423
  • editor.wordHighlightBackground#D3794716
  • editor.wordHighlightStrongBackground#D3794732
  • editorBracketMatch.border#eee
  • editorCursor.foreground#D37947
  • editorError.foreground#D34F4A
  • editorGhostText.foreground#7b6a60
  • editorGroup.border#2f2f2f
  • editorGroupHeader.tabsBackground#181818
  • editorGutter.addedBackground#2EBD33
  • editorGutter.background#1a1a1a
  • editorGutter.commentRangeForeground#707070
  • editorGutter.deletedBackground#D34F4A
  • editorGutter.modifiedBackground#D3C64A
  • editorIndentGuide.activeBackground#7b6a60
  • editorIndentGuide.activeBackground1#7b6a60
  • editorInfo.foreground#4A93D3
  • editorInlayHint.background#38383800
  • editorInlayHint.foreground#4A93D3a0
  • editorLineNumber.activeForeground#ebebeb
  • editorLineNumber.foreground#707070
  • editorLink.activeForeground#B55A26
  • editorUnnecessaryCode.opacity#000000c0
  • editorWarning.foreground#D3C64A
  • editorWhitespace.foreground#414141
  • errorForeground#B52B26
  • focusBorder#B55A26
  • foreground#ebebeb
  • git.blame.editorDecorationForeground#7b6a60
  • gitDecoration.addedResourceForeground#2EBD33
  • gitDecoration.conflictingResourceForeground#B52B26
  • gitDecoration.deletedResourceForeground#D34F4A
  • gitDecoration.modifiedResourceForeground#D3C64A
  • gitDecoration.untrackedResourceForeground#1D8B21
  • icon.foreground#ebebeb
  • input.background#2f2f2f
  • input.border#2f2f2f
  • input.foreground#e0e0e0
  • inputOption.activeBackground#B55A26
  • inputOption.activeBorder#B55A26
  • inputOption.activeForeground#fefefe
  • inputOption.hoverBackground#7b6a60
  • inputValidation.errorBackground#B52B26
  • inputValidation.errorBorder#B52B26
  • inputValidation.errorForeground#ebebeb
  • inputValidation.infoBackground#2B45CA
  • inputValidation.infoBorder#2B45CA
  • inputValidation.infoForeground#ebebeb
  • inputValidation.warningBackground#B5A726
  • inputValidation.warningBorder#B5A726
  • inputValidation.warningForeground#ebebeb
  • keybindingLabel.background#332c28
  • keybindingLabel.border#7b6a60
  • keybindingLabel.bottomBorder#564a43
  • keybindingLabel.foreground#D9CAC2
  • list.activeSelectionBackground#552407
  • list.activeSelectionForeground#ebebeb
  • list.dropBackground#D37947
  • list.filterMatchBackground#B55A26
  • list.focusBackground#552407
  • list.highlightForeground#B55A26
  • list.hoverBackground#332c28
  • list.inactiveFocusBackground#B55A26
  • list.inactiveSelectionBackground#552407
  • menu.background#181818
  • menu.foreground#e0e0e0
  • menu.selectionBackground#552407
  • menu.selectionForeground#ebebeb
  • menu.separatorBackground#2f2f2f
  • merge.commonContentBackground#8E810B60
  • merge.commonHeaderBackground#8E810B90
  • merge.currentContentBackground#26A2B560
  • merge.currentHeaderBackground#26A2B590
  • merge.incomingContentBackground#0D27A560
  • merge.incomingHeaderBackground#0D27A590
  • modernUI.shellBackground#2f2f2f
  • outputView.background#080808
  • panel.background#332c28
  • panel.border#2f2f2f
  • panelSection.border#00000000
  • panelTitle.activeBorder#B55A26
  • panelTitle.activeForeground#ebebeb
  • panelTitle.inactiveForeground#9f9f9f
  • peekView.border#8F3C0C
  • peekViewEditor.background#030303
  • peekViewEditor.matchHighlightBackground#14221e
  • peekViewResult.background#0F0F0F
  • peekViewResult.matchHighlightBackground#1e332d
  • peekViewResult.selectionBackground#8F3C0C
  • peekViewTitle.background#531412
  • peekViewTitleLabel.foreground#fefefe
  • pickerGroup.foreground#B55A26
  • progressBar.background#B55A26
  • quickInput.background#181818
  • quickInput.foreground#e0e0e0
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#D3794763
  • scrollbarSlider.background#D9CAC233
  • scrollbarSlider.hoverBackground#D3794783
  • selection.background#D3794764
  • settings.modifiedItemIndicator#D3C64A
  • sideBar.background#181818
  • sideBar.border#00000000
  • sideBar.foreground#ebebeb
  • sideBarSectionHeader.background#181818
  • sideBarSectionHeader.foreground#e0e0e0
  • sideBarTitle.background#181818
  • sideBarTitle.foreground#878787
  • sideBySideEditor.horizontalBorder#2f2f2f
  • sideBySideEditor.verticalBorder#2f2f2f
  • statusBar.background#2f2f2f
  • statusBar.border#00000000
  • statusBar.debuggingBackground#8F100C
  • statusBar.debuggingForeground#ebebeb
  • statusBar.foreground#e0e0e0
  • statusBar.noFolderBackground#878787
  • statusBarItem.remoteBackground#8F3C0C
  • statusBarItem.remoteForeground#D3C64A
  • surface.background#181818
  • surface.border#00000000
  • tab.activeBackground#552407
  • tab.activeForeground#ebebeb
  • tab.inactiveBackground#2f2f2f
  • tab.inactiveForeground#9f9f9f
  • terminal.ansiBlack#797979
  • terminal.ansiBlue#5F73D8
  • terminal.ansiBrightBlack#a0a0a0
  • terminal.ansiBrightBlue#002BFF
  • terminal.ansiBrightCyan#00C7E6
  • terminal.ansiBrightGreen#00B306
  • terminal.ansiBrightMagenta#E600C7
  • terminal.ansiBrightRed#E60800
  • terminal.ansiBrightWhite#fefefe
  • terminal.ansiBrightYellow#E6CF00
  • terminal.ansiCyan#4AC1D3
  • terminal.ansiGreen#2EBD33
  • terminal.ansiMagenta#D34AC1
  • terminal.ansiRed#D34F4A
  • terminal.ansiWhite#D7D7D7
  • terminal.ansiYellow#D3C64A
  • terminal.background#080808
  • terminal.foreground#ebebeb
  • terminal.inactiveSelectionBackground#D3794732
  • terminal.selectionBackground#D3794764
  • textBlockQuote.background#332c28
  • textBlockQuote.border#D37947
  • textCodeBlock.background#2f2f2f
  • textLink.activeForeground#D37947
  • textLink.foreground#B55A26
  • textPreformat.background#2f2f2f
  • textPreformat.foreground#D37947
  • textSeparator.foreground#7b6a60
  • titleBar.activeBackground#2f2f2f
  • titleBar.activeForeground#e0e0e0
  • titleBar.border#00000000
  • titleBar.inactiveBackground#2f2f2f
  • titleBar.inactiveForeground#9f9f9f
  • toolbar.activeBackground#B55A26
  • toolbar.hoverBackground#7b6a60

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
constant.numeric, constant.numeric keyword.other.unit, constant.other.timestamp#E6CF00—
string#E68A00—
constant.character.escape#ff6a14—
punctuation.definition.template-expression#ff6a14—
meta.template.expression#eeeeff—
string.regexp#C365CA—
constant.character.escape.backslash.regexp#e5bde8—
punctuation.definition.group.regexp, punctuation.definition.character-class.regexp#f0daf2—
constant.language#D34F4A—
constant.other.color#ffffff—
comment, comment.block#707070—
comment.block.documentation#6A8759—
storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc#6A8759bold underline
variable.other.jsdoc#629755italic
storage.type, storage.modifier#D37947bold
storage.modifier—bold italic
keyword, keyword.operator, keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python, keyword.control#D37947—
entity.other.attribute-name#D3C64A—
meta.object-literal.key#B57C26—
entity.name.function.preprocessor#D34AC1bold
entity.name.type.class#fefefebold
entity.name.function#B488E2bold
variable.language#D37947bold
variable.parameter#ebebebitalic
variable.other.enummember#4A93D3bold italic
entity.name.variable, meta.definition.variable, variable.object.property#ebebeb—
meta.import variable.other.readwrite#aaaabb—
meta.import variable.other.readwrite.alias#ddddee—
entity.name.type#88B8E2—
meta.definition.property#4A93D3—
support.type.builtin, support.type.primitive, storage.type.built-in#88B8E2bold
punctuation.definition.tag, entity.name.tag#B5A726—
support.class.component—bold
meta.tag.attributes punctuation.section.embedded#eeeeff—
meta.jsx.children punctuation.section.embedded, meta.tag.attributes meta.jsx.children punctuation.section.embedded#ff6a14—
support.type.property-name#B57C26—
variable.other.env#B57C26—
source.env#E68A00—
markup.heading#D37947bold
markup.underline—underline
markup.bold—bold
markup.italic—italic
markup.underline.link#B55A26—
markup.quote#B526A2—
markup.list punctuation.definition.list.begin#B57C26bold
source.css entity.other.attribute-name.id—bold
source.css entity.name.tag#B5A726bold
source.css support.function#B488E2—
Springbok Theme by chrp - VS Code Theme