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#132a24
  • activityBar.activeBorder#631821
  • activityBar.activeFocusBorder#6b1921
  • activityBar.background#132924
  • activityBar.border#132924
  • activityBar.foreground#768b85
  • activityBar.inactiveForeground#768b859f
  • activityBarBadge.background#731d27
  • activityBarBadge.foreground#e4c8cb
  • badge.background#90aca4
  • badge.foreground#132b24
  • breadcrumb.activeSelectionForeground#82a99e
  • breadcrumb.background#142e25
  • breadcrumb.focusForeground#82a99e
  • breadcrumb.foreground#709288
  • button.background#631821
  • button.foreground#c4b1b4
  • button.hoverBackground#6b1921
  • button.secondaryBackground#1e4137
  • button.secondaryForeground#8eb6aa
  • button.secondaryHoverBackground#24493e
  • checkbox.background#122823
  • checkbox.border#122823
  • checkbox.foreground#859590
  • debugExceptionWidget.background#631821
  • debugExceptionWidget.border#731d27
  • debugToolBar.background#631821
  • debugToolBar.border#731d27
  • diffEditor.border#334d46
  • diffEditor.insertedTextBackground#61731f1a
  • diffEditor.insertedTextBorder#61731f04
  • diffEditor.removedTextBackground#8e233c34
  • diffEditor.removedTextBorder#8e233c08
  • dropdown.background#122823
  • dropdown.border#122823
  • dropdown.foreground#859590
  • editor.background#142e25
  • editor.findMatchBackground#882517d1
  • editor.findMatchBorder#8825178f
  • editor.findMatchHighlightBackground#2c53ab70
  • editor.findMatchHighlightBorder#3154a370
  • editor.findRangeHighlightBackground#179b691e
  • editor.findRangeHighlightBorder#179b6906
  • editor.foldBackground#a4c4ba12
  • editor.foreground#7c8c87
  • editor.hoverHighlightBackground#23d9a63c
  • editor.inactiveSelectionBackground#179b6926
  • editor.lineHighlightBackground#102b21
  • editor.lineHighlightBorder#163127
  • editor.rangeHighlightBackground#179b6934
  • editor.rangeHighlightBorder#179b6908
  • editor.selectionBackground#179b6936
  • editor.selectionHighlightBackground#1b806142
  • editor.selectionHighlightBorder#1b806142
  • editor.wordHighlightBackground#28d97620
  • editor.wordHighlightBorder#26e4791e
  • editor.wordHighlightStrongBackground#28d97636
  • editor.wordHighlightStrongBorder#28d97620
  • editorBracketMatch.background#2ad37426
  • editorBracketMatch.border#4fbc743c
  • editorCodeLens.foreground#627b74
  • editorCursor.background#0f2a22
  • editorCursor.foreground#a4c4ba
  • editorError.background#B73A3400
  • editorError.border#ffffff00
  • editorError.foreground#b87668
  • editorGroup.border#365a4f
  • editorGroup.emptyBackground#142e25
  • editorGroupHeader.tabsBackground#132a24
  • editorGroupHeader.tabsBorder#132a24
  • editorGutter.addedBackground#436229
  • editorGutter.background#142e25
  • editorGutter.commentRangeForeground#731d27
  • editorGutter.deletedBackground#731d27
  • editorGutter.foldingControlForeground#731d27
  • editorGutter.modifiedBackground#1b5364
  • editorHoverWidget.background#132924
  • editorHoverWidget.border#173b30
  • editorHoverWidget.foreground#a4c4ba
  • editorIndentGuide.activeBackground#1c4539
  • editorIndentGuide.background#1d3b31
  • editorInfo.background#4490BF00
  • editorInfo.border#4490BF00
  • editorInfo.foreground#4988c0
  • editorLineNumber.activeForeground#631821
  • editorLineNumber.foreground#2b463e
  • editorLink.activeForeground#3d76a5
  • editorMarkerNavigation.background#132924
  • editorMarkerNavigationError.background#7b173d
  • editorMarkerNavigationInfo.background#1a4f68
  • editorMarkerNavigationWarning.background#714b17
  • editorOverviewRuler.background#00000000
  • editorOverviewRuler.border#7f7f7f30
  • editorRuler.foreground#1a3b31
  • editorSuggestWidget.background#132924
  • editorSuggestWidget.border#173b30
  • editorSuggestWidget.foreground#859590
  • editorSuggestWidget.highlightForeground#731d27
  • editorSuggestWidget.selectedBackground#133027
  • editorWarning.background#A9904000
  • editorWarning.border#ffffff00
  • editorWarning.foreground#9d8d47
  • editorWhitespace.foreground#179b693a
  • editorWidget.background#132924
  • editorWidget.foreground#859590
  • editorWidget.resizeBorder#631821
  • focusBorder#631821
  • foreground#859590
  • gitDecoration.addedResourceForeground#7f8f65
  • gitDecoration.conflictingResourceForeground#916da6
  • gitDecoration.deletedResourceForeground#87585d
  • gitDecoration.ignoredResourceForeground#607870
  • gitDecoration.modifiedResourceForeground#909161
  • gitDecoration.stageDeletedResourceForeground#82544b
  • gitDecoration.stageModifiedResourceForeground#947e53
  • gitDecoration.submoduleResourceForeground#637f91
  • gitDecoration.untrackedResourceForeground#5e8c74
  • icon.foreground#859590
  • input.background#122823
  • input.border#122823
  • input.foreground#859590
  • input.placeholderForeground#37564c
  • inputOption.activeBackground#631821d5
  • inputOption.activeBorder#6318216c
  • inputOption.activeForeground#d3b9bd
  • list.activeSelectionBackground#183329
  • list.activeSelectionForeground#9dc4b8
  • list.dropBackground#112e25
  • list.focusBackground#122d25
  • list.focusForeground#859590
  • list.highlightForeground#731d27
  • list.hoverBackground#142f25
  • list.hoverForeground#859590
  • list.inactiveSelectionBackground#163127
  • list.inactiveSelectionForeground#a4c4ba
  • listFilterWidget.background#122823
  • listFilterWidget.noMatchesOutline#631821
  • listFilterWidget.outline#1b362b
  • menu.background#132924
  • menu.border#1d322e
  • menu.foreground#69857b
  • menu.selectionBackground#162e28
  • menu.selectionBorder#162e28
  • menu.selectionForeground#769f90
  • menu.separatorBackground#1d322e
  • menubar.selectionBackground#98d5c40e
  • menubar.selectionBorder#98d5c42c
  • menubar.selectionForeground#547a6f
  • merge.commonContentBackground#2c4940e7
  • merge.commonHeaderBackground#324d45
  • merge.currentContentBackground#244133e5
  • merge.currentHeaderBackground#214b33
  • merge.incomingContentBackground#274651f3
  • merge.incomingHeaderBackground#204b5c
  • minimap.background#142e25
  • minimap.errorHighlight#b87668
  • minimap.findMatchHighlight#882517d1
  • minimap.selectionHighlight#179b6936
  • minimap.warningHighlight#9d8d47
  • minimapGutter.addedBackground#436229
  • minimapGutter.deletedBackground#731d27
  • minimapGutter.modifiedBackground#1b5364
  • minimapSlider.activeBackground#244e4369
  • minimapSlider.background#21443b42
  • minimapSlider.hoverBackground#244e4350
  • notificationCenter.border#182e2a
  • notificationCenterHeader.background#122823
  • notificationCenterHeader.foreground#7a928b
  • notifications.background#132924
  • notifications.border#123027
  • notifications.foreground#859590
  • notificationsErrorIcon.foreground#b4647e
  • notificationsInfoIcon.foreground#7497b6
  • notificationsWarningIcon.foreground#a98d0d
  • notificationToast.border#182e2a
  • panel.background#132b24
  • panel.border#132b24
  • panelSection.border#80808059
  • panelTitle.activeBorder#631821
  • panelTitle.activeForeground#a4c4ba
  • panelTitle.inactiveForeground#61756f
  • peekView.border#11362f
  • peekViewEditor.background#122823
  • peekViewEditor.matchHighlightBackground#deee1e1e
  • peekViewEditor.matchHighlightBorder#eed71e12
  • peekViewEditorGutter.background#132924
  • peekViewResult.background#122823
  • peekViewResult.fileForeground#6d8281
  • peekViewResult.lineForeground#7f9b9a
  • peekViewResult.matchHighlightBackground#15382e
  • peekViewResult.selectionBackground#13302a
  • peekViewResult.selectionForeground#8eadad
  • peekViewTitle.background#122823
  • peekViewTitleDescription.foreground#586f6e
  • peekViewTitleLabel.foreground#788e8d
  • pickerGroup.border#163127
  • pickerGroup.foreground#87223d
  • progressBar.background#631821
  • scrollbar.shadow#0b1f169d
  • scrollbarSlider.activeBackground#17332bcb
  • scrollbarSlider.background#17332b76
  • scrollbarSlider.hoverBackground#17332bad
  • selection.background#631821db
  • settings.focusedRowBackground#ffffff07
  • settings.headerForeground#859590
  • sideBar.background#132a24
  • sideBar.border#132a24
  • sideBar.dropBackground#112e25
  • sideBar.foreground#859590
  • sideBarSectionHeader.background#85959000
  • sideBarSectionHeader.border#85959000
  • sideBarSectionHeader.foreground#859590
  • sideBarTitle.foreground#859590
  • statusBar.background#122823
  • statusBar.border#122823
  • statusBar.debuggingBackground#2e201b
  • statusBar.debuggingForeground#905f22
  • statusBar.foreground#61756f
  • statusBar.noFolderBackground#27213d
  • statusBar.noFolderForeground#82379d
  • statusBarItem.activeBackground#FFFFFF25
  • statusBarItem.hoverBackground#61756f1a
  • statusBarItem.remoteBackground#142e25
  • statusBarItem.remoteForeground#649e89
  • tab.activeBackground#142e25
  • tab.activeBorder#122d2500
  • tab.activeBorderTop#631821
  • tab.activeForeground#9ec6ba
  • tab.border#142e25
  • tab.hoverBackground#142e25
  • tab.hoverBorder#12322800
  • tab.hoverForeground#9ec6ba
  • tab.inactiveBackground#132a24
  • tab.inactiveForeground#768b85
  • terminal.ansiBlack#2a473e
  • terminal.ansiBlue#5e86a3
  • terminal.ansiBrightBlack#405c53
  • terminal.ansiBrightBlue#6ba0c7
  • terminal.ansiBrightCyan#59a79f
  • terminal.ansiBrightGreen#5fa56d
  • terminal.ansiBrightMagenta#a070bc
  • terminal.ansiBrightRed#b0596c
  • terminal.ansiBrightWhite#a6c2bb
  • terminal.ansiBrightYellow#b4aa6e
  • terminal.ansiCyan#508c86
  • terminal.ansiGreen#50885b
  • terminal.ansiMagenta#9469ad
  • terminal.ansiRed#9b5363
  • terminal.ansiWhite#a1b4af
  • terminal.ansiYellow#968e5e
  • terminal.border#80808059
  • terminal.foreground#9aaba6
  • terminal.selectionBackground#90aca422
  • terminalCursor.background#731d27
  • terminalCursor.foreground#cfe0db
  • textLink.activeForeground#9e2845
  • textLink.foreground#8f2440
  • titleBar.activeBackground#132924
  • titleBar.activeForeground#648278
  • titleBar.border#132924
  • titleBar.inactiveBackground#152925
  • titleBar.inactiveForeground#637d74a1
  • tree.indentGuidesStroke#183329
  • walkThrough.embeddedEditorBackground#00000050
  • welcomePage.tileHoverBackground#98d5c40a
  • widget.shadow#040f0c72

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#869e97
comment, string.comment#44635aitalic
string#c2bb5f
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#c74c6f
meta.string.template#bd9055
meta#b8d1ca
constant.numeric#a26bd1
string.embedded.begin, string.embedded.end#a26bd1
string.embedded#8dac60
constant.language#a26bd1
constant.character, constant.other#a26bd1
variable.language#c74c6fitalic
variable.readwrite, variable.readwrite.other.block#6091c3
keyword, keyword.operator.logical, keyword.operator.constructor#c74c6f
keyword.operator#c74c6f
storage#c74c6fitalic
storage.type#4bacb0
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class#6091c3
meta.block.switch.c, variable.other.object#6091c3
variable.other.property, variable.other.block#b8d1ca
entity.other.inherited-class#5db075
entity.name.function, support.function#5db075
support.function#4bacb0
variable.parameter#c68c46italic
entity.name.function-call#b8d1ca
function.support.builtin, function.support.core#5db075
entity.name.tag, entity.name.tag.class.js, entity.name.tag.class.jsx#c74c6f
entity.name.tag.class, entity.name.tag.id#4bacb0
entity.other.attribute-name#5db075
support.constant#4bacb0
support.type, support.variable#4bacb0
support.dictionary.json#4bacb0
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass#6ac9c6
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass#8dac60
variable.css, variable.scss, variable.less, variable.sass#68bfb2
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string#cbb284
unit.css, unit.scss, unit.less, unit.sass#ae66c5
constant.numeric.css, constant.numeric.scss, constant.numeric.less, constant.numeric.sass#a26bd1
function.css, function.scss, function.less, function.sass#68bfb2
support.other.variable
invalid#b8d1ca
invalid.deprecated#b8d1ca
structure.dictionary.property-name.json#68bfb2
string.detected-link#6091c3
meta.diff, meta.diff.header#787d5b
markup.deleted#b56ea7
markup.inserted#cbb284
markup.changed#cbb284
constant.numeric.line-number.find-in-files - match#68bfb2A0
entity.name.filename.find-in-files#cbb284
markup.italic, markup.italic.markdownitalic
punctuation.definition.italic.markdown#466059
markup.underline.link.markdown#6091c3
markup.bold.markdownbold
punctuation.definition.bold.markdown#596a65
markup.heading.markdown#c74c6fbold
punctuation.definition.heading.markdown#596a65
markup.quote.markdown#80b450
meta.separator.markdown#b56ea7bold
markup.raw.inline.markdown, markup.raw.block.markdown#68bfb2
punctuation.definition.list_item.markdown#c6ded8bold
variable.other.jsdoc#628286
GG Djaja by bedeute - VS Code Theme