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#413c3a
  • activityBar.background#e9e6e3
  • activityBar.border#bbb1ab60
  • activityBar.foreground#1b1918
  • activityBarBadge.background#413c3a
  • activityBarBadge.foreground#ffffff
  • badge.background#ffffff30
  • badge.foreground#adadad
  • breadcrumb.activeSelectionForeground#413c3a
  • breadcrumb.background#e9e6e3
  • breadcrumb.focusForeground#1b1918
  • breadcrumb.foreground#89786e
  • breadcrumbPicker.background#e1dcd9
  • button.background#a2938a50
  • button.foreground#000000
  • debugConsole.errorForeground#8c272f
  • debugConsole.infoForeground#155b65
  • debugConsole.warningForeground#694a12
  • debugToolBar.background#dbd5d1
  • diffEditor.insertedTextBackground#425a1220
  • diffEditor.removedTextBackground#8c272f20
  • dropdown.background#dbd5d1
  • dropdown.border#00000010
  • editor.background#e9e6e3
  • editor.findMatchBackground#ffffff
  • editor.findMatchBorder#413c3a
  • editor.findMatchHighlightBackground#ffffff50
  • editor.findMatchHighlightBorder#00000050
  • editor.findRangeHighlightBackground#694a1230
  • editor.foreground#1b1918
  • editor.lineHighlightBackground#1b191813
  • editor.lineHighlightBorder#ffffff00
  • editor.rangeHighlightBackground#0000000d
  • editor.selectionBackground#1b191814
  • editor.selectionHighlightBackground#51380b20
  • editor.wordHighlightBackground#1b191815
  • editor.wordHighlightStrongBackground#1b191830
  • editorBracketHighlight.foreground1#48a5b5
  • editorBracketHighlight.foreground2#bb8d3f
  • editorBracketHighlight.foreground3#c978a5
  • editorBracketHighlight.foreground4#85a259
  • editorBracketHighlight.foreground5#7295dd
  • editorBracketHighlight.foreground6#d27d5d
  • editorBracketHighlight.unexpectedBracket.foreground#72101d
  • editorBracketMatch.background#dbd5d1
  • editorBracketMatch.border#39270650
  • editorCursor.foreground#392706
  • editorError.foreground#8c272f70
  • editorGroup.border#ffffff30
  • editorGroup.dropBackground#8c272f80
  • editorGroup.focusedEmptyBorder#8c272f
  • editorGroupHeader.border#bbb1ab60
  • editorGroupHeader.tabsBackground#e9e6e3
  • editorGutter.addedBackground#425a1260
  • editorGutter.deletedBackground#8c272f60
  • editorGutter.modifiedBackground#2f4d8f60
  • editorHoverWidget.background#dbd5d1
  • editorHoverWidget.border#00000010
  • editorInfo.foreground#2f4d8f70
  • editorInlayHint.foreground#5a4e47c0
  • editorLineNumber.activeForeground#89786e
  • editorLineNumber.foreground#bbb1ab
  • editorLink.activeForeground#1b1918
  • editorMarkerNavigation.background#1b191805
  • editorOverviewRuler.border#dbd5d1
  • editorOverviewRuler.errorForeground#8c272f40
  • editorOverviewRuler.findMatchForeground#413c3a87
  • editorOverviewRuler.infoForeground#2f4d8f40
  • editorOverviewRuler.warningForeground#694a1240
  • editorRuler.foreground#bbb1ab
  • editorSuggestWidget.background#dbd5d1
  • editorSuggestWidget.border#00000010
  • editorSuggestWidget.foreground#1b1918
  • editorSuggestWidget.highlightForeground#413c3a
  • editorSuggestWidget.selectedBackground#ffffff50
  • editorWarning.foreground#694a1270
  • editorWhitespace.foreground#1b191840
  • editorWidget.background#e1dcd9
  • editorWidget.border#bbb1ab60
  • editorWidget.resizeBorder#413c3a
  • extensionBadge.remoteForeground#1b1918
  • extensionButton.prominentBackground#425a1290
  • extensionButton.prominentForeground#1b1918
  • extensionButton.prominentHoverBackground#425a12
  • focusBorder#413c3a
  • foreground#1b1918
  • gitDecoration.conflictingResourceForeground#694a1290
  • gitDecoration.deletedResourceForeground#8c272f90
  • gitDecoration.ignoredResourceForeground#89786e90
  • gitDecoration.modifiedResourceForeground#2f4d8f90
  • gitDecoration.untrackedResourceForeground#425a1290
  • input.background#d3cbc6
  • input.border#00000010
  • input.foreground#1b1918
  • input.placeholderForeground#1b191860
  • inputOption.activeBackground#1b191830
  • inputOption.activeBorder#1b191830
  • inputValidation.errorBorder#8c272f
  • inputValidation.infoBorder#2f4d8f
  • inputValidation.warningBorder#694a12
  • list.activeSelectionBackground#00000010
  • list.activeSelectionForeground#413c3a
  • list.dropBackground#8c272f80
  • list.focusBackground#1b191820
  • list.focusForeground#1b1918
  • list.highlightForeground#413c3a
  • list.hoverBackground#0000000a
  • list.hoverForeground#000000
  • list.inactiveSelectionBackground#00000010
  • list.inactiveSelectionForeground#413c3a
  • listFilterWidget.background#ffffff30
  • listFilterWidget.noMatchesOutline#ffffff30
  • listFilterWidget.outline#ffffff30
  • menu.background#dbd5d1
  • menu.foreground#1b1918
  • menu.selectionBackground#ffffff50
  • menu.selectionBorder#ffffff30
  • menu.selectionForeground#413c3a
  • menu.separatorBackground#1b1918
  • menubar.selectionBackground#ffffff30
  • menubar.selectionBorder#ffffff30
  • menubar.selectionForeground#413c3a
  • notebook.focusedCellBorder#413c3a
  • notebook.inactiveFocusedCellBorder#413c3a50
  • notificationLink.foreground#413c3a
  • notifications.background#dbd5d1
  • notifications.foreground#1b1918
  • panel.background#e9e6e3
  • panel.border#bbb1ab60
  • panelTitle.activeBorder#413c3a
  • panelTitle.activeForeground#000000
  • panelTitle.inactiveForeground#1b1918
  • peekView.border#ffffff30
  • peekViewEditor.background#ffffff00
  • peekViewEditor.matchHighlightBackground#a2938a50
  • peekViewEditorGutter.background#d3cbc6
  • peekViewResult.background#d3cbc6
  • peekViewResult.matchHighlightBackground#a2938a50
  • peekViewResult.selectionBackground#89786e70
  • peekViewTitle.background#d3cbc6
  • peekViewTitleDescription.foreground#1b191860
  • pickerGroup.border#0000001a
  • pickerGroup.foreground#413c3a
  • progressBar.background#413c3a
  • quickInput.background#dbd5d1
  • quickInput.foreground#89786e
  • sash.hoverBorder#413c3a50
  • scrollbar.shadow#ffffff30
  • scrollbarSlider.activeBackground#413c3a
  • scrollbarSlider.background#1b191820
  • scrollbarSlider.hoverBackground#1b191810
  • selection.background#ffffff80
  • settings.checkboxBackground#d3cbc6
  • settings.checkboxForeground#1b1918
  • settings.dropdownBackground#d3cbc6
  • settings.dropdownForeground#1b1918
  • settings.headerForeground#413c3a
  • settings.modifiedItemIndicator#413c3a
  • settings.numberInputBackground#d3cbc6
  • settings.numberInputForeground#1b1918
  • settings.textInputBackground#d3cbc6
  • settings.textInputForeground#1b1918
  • sideBar.background#e9e6e3
  • sideBar.border#bbb1ab60
  • sideBar.foreground#89786e
  • sideBarSectionHeader.background#e9e6e3
  • sideBarSectionHeader.border#bbb1ab60
  • sideBarTitle.foreground#1b1918
  • statusBar.background#e9e6e3
  • statusBar.border#bbb1ab60
  • statusBar.debuggingBackground#653b7f
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#a2938a
  • statusBar.noFolderBackground#dbd5d1
  • statusBarItem.activeBackground#8c272f80
  • statusBarItem.hoverBackground#adadad20
  • statusBarItem.remoteBackground#413c3a
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#00000010
  • tab.activeBorder#413c3a
  • tab.activeForeground#000000
  • tab.activeModifiedBorder#2f4d8f
  • tab.border#e9e6e3
  • tab.hoverBackground#0000000a
  • tab.inactiveBackground#e9e6e3
  • tab.inactiveForeground#89786e
  • tab.inactiveModifiedBorder#2f4d8f
  • tab.unfocusedActiveBorder#adadad
  • tab.unfocusedActiveForeground#1b1918
  • tab.unfocusedActiveModifiedBorder#2f4d8f
  • tab.unfocusedInactiveModifiedBorder#2f4d8f
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#2f4d8f
  • terminal.ansiBrightBlack#4a4a4a
  • terminal.ansiBrightBlue#1d3879
  • terminal.ansiBrightCyan#0e454d
  • terminal.ansiBrightGreen#31450c
  • terminal.ansiBrightMagenta#502769
  • terminal.ansiBrightRed#72101d
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#51380b
  • terminal.ansiCyan#155b65
  • terminal.ansiGreen#425a12
  • terminal.ansiMagenta#653b7f
  • terminal.ansiRed#8c272f
  • terminal.ansiWhite#d9d9d9
  • terminal.ansiYellow#694a12
  • terminal.background#e9e6e3
  • terminal.foreground#1b1918
  • terminal.selectionBackground#1b191826
  • terminalCursor.background#ffffff
  • terminalCursor.foreground#392706
  • textLink.activeForeground#1b1918
  • textLink.foreground#413c3a
  • titleBar.activeBackground#e9e6e3
  • titleBar.activeForeground#1b1918
  • titleBar.border#bbb1ab60
  • titleBar.inactiveBackground#e9e6e3
  • titleBar.inactiveForeground#89786e
  • tree.indentGuidesStroke#bbb1ab
  • widget.shadow#ffffff30

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
markup.underlineunderline
variable.parameteritalic
support.type.property-name.css#1d727f
constant.other.symbol, meta.tag, punctuation, template.expression.begin, template.expression.end, text.html.markdown beginning.punctuation.definition.list#71635b
markup.bold#a63f43bold
markup.bold markup.italic, markup.italic markup.bold#a63f43italic bold
constant.language, entity.name.section.group-title.ini, keyword, markup.heading, modifier, support.type.object, variable.language.this#288a99
markup.italic, support.module, support.node, variable.parameter.function.language.special.self.python#a63f43italic
constant.keyword, keyword.control, markup.quote#288a99italic
SXNested, constant.character.escape, markup.fenced_code.block, meta.definition.variable entity.name.function, meta.embedded, meta.function-call.arguments, meta.jsx.children, meta.template.expression, punctuation.definition.entity.html, source.cpp meta.block variable.other, source.cs entity.name.type.namespace, source.groovy.embedded, source.php meta.use support.class, source.php support.other.namespace, support.constant, support.variable, text.html constant.character.entity.named, variable#1b1918
constant.other.key, entity.name, entity.other, entity.other.attribute-name.class, meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, meta.use, source.cs meta.class.identifier storage.type, source.cs meta.method.return-type, source.cs storage.type, source.css entity.name.tag, support.class, support.type#694a12
constant.character.format.placeholder.other.python, constant.numeric, entity.other.attribute-name.id, keyword.other, meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#833616
constant.other.placeholder, entity.name.tag, keyword.other.definition.ini, markup.deleted, meta.block, meta.definition.method entity.name.function, meta.field.declaration entity.name.function, meta.link.reference, meta.object-literal.key, meta.object-literal.key string, meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, source.cs meta.method.identifier entity.name.function, source.python meta.member.access.python, support.type.property-name.json, text.html.markdown meta.link.inline, variable.object.property#a63f43
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#b46243
entity.name.function, meta.function entity.name.function, meta.function-call.arguments, meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, source.cs entity.name.function, source.cs meta.method-call meta.method, source.python meta.function-call.python, support.function#2f4d8f
constant.language.boolean, meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, punctuation.definition.quote#651d4a
entity.other.attribute-name, meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, meta.structure.dictionary.json support.type.property-name.json, storage.control, storage.modifier, storage.type#6858a2
markup.fenced_code.block.markdown punctuation.definition.markdown, markup.inline.raw.string.markdown, markup.inserted, meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, string#425a12
source.cs meta.preprocessor#a2938a
comment, comment punctuation.definition.comment, punctuation.definition.comment, string.quoted.docstring#89786eitalic
token.info-token#2f4d8f
token.warn-token#694a12
token.error-token#8c272f
token.debug-token#653b7f