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#181818
  • activityBar.border#2f2f2f
  • 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
  • badge.background#B55A26
  • badge.foreground#ebebeb
  • breadcrumb.activeSelectionForeground#ebebeb
  • breadcrumb.background#181818
  • breadcrumb.focusForeground#ebebeb
  • breadcrumb.foreground#e0e0e0
  • breadcrumbPicker.background#181818
  • button.background#8F3C0C
  • button.foreground#ebebeb
  • button.hoverBackground#B55A26
  • checkbox.background#8F3C0C
  • commandCenter.activeBackground#2f2f2f
  • commandCenter.activeBorder#878787
  • commandCenter.activeForeground#ebebeb
  • commandCenter.background#2f2f2f
  • commandCenter.border#2f2f2f
  • commandCenter.debuggingBackground#8F100C90
  • commandCenter.debuggingForeground#ebebeb
  • commandCenter.foreground#ebebeb
  • commandCenter.inactiveBackground#2f2f2f
  • commandCenter.inactiveBorder#2f2f2f
  • commandCenter.inactiveForeground#9f9f9f
  • diffEditor.insertedTextBackground#4AD34F20
  • diffEditor.removedTextBackground#D34F4A20
  • 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
  • editorGroup.border#2f2f2f
  • editorGroupHeader.tabsBackground#181818
  • editorGutter.addedBackground#4AD34F
  • editorGutter.background#1a1a1a
  • editorGutter.commentRangeForeground#707070
  • editorGutter.deletedBackground#D34F4A
  • editorGutter.modifiedBackground#D3C64A
  • editorIndentGuide.activeBackground#B0BEC5A4
  • editorInlayHint.background#38383800
  • editorInlayHint.foreground#4A93D3a0
  • editorLineNumber.activeForeground#ebebeb
  • editorLineNumber.foreground#707070
  • editorLink.activeForeground#B55A26
  • editorUnnecessaryCode.opacity#000000c0
  • editorWhitespace.foreground#414141
  • errorForeground#B52B26
  • focusBorder#B55A26
  • foreground#ebebeb
  • git.blame.editorDecorationForeground#7b6a60
  • gitDecoration.addedResourceForeground#4AD34F
  • gitDecoration.conflictingResourceForeground#B52B26
  • gitDecoration.deletedResourceForeground#D34F4A
  • gitDecoration.modifiedResourceForeground#D3C64A
  • gitDecoration.untrackedResourceForeground#26B52B
  • 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#263EB5
  • inputValidation.infoBorder#263EB5
  • inputValidation.infoForeground#ebebeb
  • inputValidation.warningBackground#B5A726
  • inputValidation.warningBorder#B5A726
  • inputValidation.warningForeground#ebebeb
  • keybindingLabel.background#D3794764
  • keybindingLabel.border#81818180
  • keybindingLabel.bottomBorder#41414190
  • keybindingLabel.foreground#e0e0e0
  • 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#B5A72660
  • merge.commonHeaderBackground#B5A72690
  • merge.currentContentBackground#26A2B560
  • merge.currentHeaderBackground#26A2B590
  • merge.incomingContentBackground#263EB560
  • merge.incomingHeaderBackground#263EB590
  • outputView.background#080808
  • panel.background#181818
  • panel.border#2f2f2f
  • panelSection.border#2f2f2f
  • 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
  • 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#2f2f2f
  • sideBar.foreground#ebebeb
  • sideBarSectionHeader.background#181818
  • sideBarSectionHeader.foreground#e0e0e0
  • sideBarTitle.background#181818
  • sideBarTitle.foreground#878787
  • sideBySideEditor.horizontalBorder#2f2f2f
  • sideBySideEditor.verticalBorder#2f2f2f
  • statusBar.background#1a1a1a
  • statusBar.border#2f2f2f
  • statusBar.debuggingBackground#8F100C
  • statusBar.foreground#e0e0e0
  • statusBar.noFolderBackground#717171
  • statusBarItem.remoteBackground#8F3C0C
  • statusBarItem.remoteForeground#D3C64A
  • tab.activeBackground#564a43
  • tab.activeForeground#ebebeb
  • tab.inactiveBackground#2f2f2f
  • tab.inactiveForeground#9f9f9f
  • terminal.ansiBlack#797979
  • terminal.ansiBlue#4A61D3
  • terminal.ansiBrightBlack#a0a0a0
  • terminal.ansiBrightBlue#0026E6
  • terminal.ansiBrightCyan#00C7E6
  • terminal.ansiBrightGreen#00E608
  • terminal.ansiBrightMagenta#E600C7
  • terminal.ansiBrightRed#E60800
  • terminal.ansiBrightWhite#fefefe
  • terminal.ansiBrightYellow#E6CF00
  • terminal.ansiCyan#4AC1D3
  • terminal.ansiGreen#4AD34F
  • terminal.ansiMagenta#D34AC1
  • terminal.ansiRed#D34F4A
  • terminal.ansiWhite#D7D7D7
  • terminal.ansiYellow#D3C64A
  • terminal.background#000000
  • terminal.foreground#F5F5F5
  • terminal.inactiveSelectionBackground#D3794732
  • terminal.selectionBackground#D3794764
  • textLink.activeForeground#D37947
  • textLink.foreground#B55A26
  • titleBar.activeBackground#181818
  • titleBar.activeForeground#e0e0e0
  • titleBar.border#2f2f2f
  • 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.modifierbold 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#B57E26
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.componentbold
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#B57E26
variable.other.env#B57E26
source.env#FFA014
markup.heading#D37947bold
markup.underlineunderline
markup.boldbold
markup.italicitalic
markup.underline.link#B55A26
markup.quote#B526A2
markup.list punctuation.definition.list.begin#B57E26bold
source.css entity.other.attribute-name.idbold
source.css entity.name.tag#B5A726bold
source.css support.function#B488E2
Springbok Theme by chrp - VS Code Theme