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#3d3836
  • activityBar.background#e1dcd9
  • activityBar.border#bbb1ac60
  • activityBar.foreground#0a1818
  • activityBarBadge.background#3d3836
  • activityBarBadge.foreground#ffffff
  • badge.background#ffffff30
  • badge.foreground#adadad
  • breadcrumb.activeSelectionForeground#3d3836
  • breadcrumb.background#e1dcd9
  • breadcrumb.focusForeground#0a1818
  • breadcrumb.foreground#807066
  • breadcrumbPicker.background#e1dcd9
  • button.background#a2938a50
  • button.foreground#000000
  • debugConsole.errorForeground#83161c
  • debugConsole.infoForeground#0a506d
  • debugConsole.warningForeground#885b09
  • debugToolBar.background#dbd5d1
  • diffEditor.insertedTextBackground#0a506d20
  • diffEditor.removedTextBackground#5e091620
  • dropdown.background#dbd5d1
  • dropdown.border#00000010
  • editor.background#e9e6e3
  • editor.findMatchBackground#ffffff
  • editor.findMatchBorder#3d3836
  • editor.findMatchHighlightBackground#ffffff50
  • editor.findMatchHighlightBorder#00000050
  • editor.findRangeHighlightBackground#885b0930
  • editor.foreground#1b1918
  • editor.lineHighlightBackground#1b191814
  • editor.lineHighlightBorder#ffffff00
  • editor.rangeHighlightBackground#0000000d
  • editor.selectionBackground#1b191814
  • editor.selectionHighlightBackground#e3b70920
  • editor.wordHighlightBackground#1b191815
  • editor.wordHighlightStrongBackground#1b191830
  • editorBracketHighlight.foreground1#0d5da4
  • editorBracketHighlight.foreground2#78561d
  • editorBracketHighlight.foreground3#5d2e7a
  • editorBracketHighlight.foreground4#547225
  • editorBracketHighlight.foreground5#2e6380
  • editorBracketHighlight.foreground6#934219
  • editorBracketHighlight.unexpectedBracket.foreground#9e0811
  • editorBracketMatch.background#f7f5f3
  • editorBracketMatch.border#7e650050
  • editorCursor.foreground#7e6500
  • editorError.foreground#83161c70
  • editorGroup.border#ffffff30
  • editorGroup.dropBackground#83161c80
  • editorGroup.focusedEmptyBorder#83161c
  • editorGroupHeader.border#bbb1ac61
  • editorGroupHeader.tabsBackground#e1dcd9
  • editorGutter.addedBackground#4c6b1d60
  • editorGutter.deletedBackground#83161c60
  • editorGutter.modifiedBackground#0a2b7360
  • editorHoverWidget.background#dbd5d1
  • editorHoverWidget.border#00000010
  • editorInfo.foreground#0a2b7370
  • editorInlayHint.foreground#63574fc0
  • editorLineNumber.activeForeground#807066
  • editorLineNumber.foreground#bdb3ae
  • editorLink.activeForeground#0a1818
  • editorMarkerNavigation.background#0a181805
  • editorOverviewRuler.border#dbd5d1
  • editorOverviewRuler.errorForeground#83161c40
  • editorOverviewRuler.findMatchForeground#3d383687
  • editorOverviewRuler.infoForeground#0a2b7340
  • editorOverviewRuler.warningForeground#885b0940
  • editorRuler.foreground#bdb3ae
  • editorSuggestWidget.background#dbd5d1
  • editorSuggestWidget.border#00000010
  • editorSuggestWidget.foreground#0a1818
  • editorSuggestWidget.highlightForeground#3d3836
  • editorSuggestWidget.selectedBackground#ffffff50
  • editorWarning.foreground#885b0970
  • editorWhitespace.foreground#0a181840
  • editorWidget.background#e1dcd9
  • editorWidget.border#bbb1ac60
  • editorWidget.resizeBorder#3d3836
  • extensionBadge.remoteForeground#0a1818
  • extensionButton.prominentBackground#4c6b1d90
  • extensionButton.prominentForeground#0a1818
  • extensionButton.prominentHoverBackground#4c6b1d
  • focusBorder#00000000
  • foreground#0a1818
  • gitDecoration.conflictingResourceForeground#885b0990
  • gitDecoration.deletedResourceForeground#83161c90
  • gitDecoration.ignoredResourceForeground#80706690
  • gitDecoration.modifiedResourceForeground#0a2b7390
  • gitDecoration.untrackedResourceForeground#4c6b1d90
  • input.background#d2cbc6
  • input.border#00000010
  • input.foreground#0a1818
  • input.placeholderForeground#0a181860
  • inputOption.activeBackground#0a181830
  • inputOption.activeBorder#0a181830
  • inputValidation.errorBorder#83161c
  • inputValidation.infoBorder#0a2b73
  • inputValidation.warningBorder#885b09
  • list.activeSelectionBackground#00000010
  • list.activeSelectionForeground#3d3836
  • list.dropBackground#83161c80
  • list.focusBackground#0a181820
  • list.focusForeground#0a1818
  • list.highlightForeground#3d3836
  • list.hoverBackground#0000000a
  • list.hoverForeground#000000
  • list.inactiveSelectionBackground#00000010
  • list.inactiveSelectionForeground#3d3836
  • listFilterWidget.background#ffffff30
  • listFilterWidget.noMatchesOutline#ffffff30
  • listFilterWidget.outline#ffffff30
  • menu.background#dbd5d1
  • menu.foreground#0a1818
  • menu.selectionBackground#ffffff50
  • menu.selectionBorder#ffffff30
  • menu.selectionForeground#3d3836
  • menu.separatorBackground#0a1818
  • menubar.selectionBackground#ffffff30
  • menubar.selectionBorder#ffffff30
  • menubar.selectionForeground#3d3836
  • notebook.focusedCellBorder#3d3836
  • notebook.inactiveFocusedCellBorder#3d383650
  • notificationLink.foreground#3d3836
  • notifications.background#dbd5d1
  • notifications.foreground#0a1818
  • panel.background#e1dcd9
  • panel.border#bbb1ac60
  • panelTitle.activeBorder#3d3836
  • panelTitle.activeForeground#000000
  • panelTitle.inactiveForeground#0a1818
  • peekView.border#ffffff30
  • peekViewEditor.background#ffffff00
  • peekViewEditor.matchHighlightBackground#a2938a50
  • peekViewEditorGutter.background#d2cbc6
  • peekViewResult.background#d2cbc6
  • peekViewResult.matchHighlightBackground#a2938a50
  • peekViewResult.selectionBackground#80706670
  • peekViewTitle.background#d2cbc6
  • peekViewTitleDescription.foreground#0a181860
  • pickerGroup.border#0000001a
  • pickerGroup.foreground#3d3836
  • progressBar.background#3d3836
  • quickInput.background#dbd5d1
  • quickInput.foreground#807066
  • sash.hoverBorder#3d383650
  • scrollbar.shadow#ffffff30
  • scrollbarSlider.activeBackground#3d3836
  • scrollbarSlider.background#0a181820
  • scrollbarSlider.hoverBackground#0a181810
  • selection.background#ffffff80
  • settings.checkboxBackground#e1dcd9
  • settings.checkboxForeground#0a1818
  • settings.dropdownBackground#e1dcd9
  • settings.dropdownForeground#0a1818
  • settings.headerForeground#3d3836
  • settings.modifiedItemIndicator#3d3836
  • settings.numberInputBackground#e1dcd9
  • settings.numberInputForeground#0a1818
  • settings.textInputBackground#e1dcd9
  • settings.textInputForeground#0a1818
  • sideBar.background#e1dcd9
  • sideBar.border#bbb1ac60
  • sideBar.foreground#807066
  • sideBarSectionHeader.background#e1dcd9
  • sideBarSectionHeader.border#bbb1ac60
  • sideBarTitle.foreground#0a1818
  • statusBar.background#e9e6e3
  • statusBar.border#bbb1ac60
  • statusBar.debuggingBackground#4a1c67
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#a2938a
  • statusBar.noFolderBackground#dbd5d1
  • statusBarItem.activeBackground#83161c80
  • statusBarItem.hoverBackground#adadad20
  • statusBarItem.remoteBackground#3d3836
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#00000010
  • tab.activeBorder#3d3836
  • tab.activeForeground#000000
  • tab.activeModifiedBorder#807066
  • tab.border#e1dcd9
  • tab.hoverBackground#0000000a
  • tab.inactiveBackground#e1dcd9
  • tab.inactiveForeground#807066
  • tab.inactiveModifiedBorder#aa676b
  • tab.unfocusedActiveBorder#adadad
  • tab.unfocusedActiveForeground#0a1818
  • tab.unfocusedActiveModifiedBorder#963f44
  • tab.unfocusedInactiveModifiedBorder#aa676b
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#6182b8
  • terminal.ansiBrightBlack#90a4ae
  • terminal.ansiBrightBlue#6182b8
  • terminal.ansiBrightCyan#39adb5
  • terminal.ansiBrightGreen#91b859
  • terminal.ansiBrightMagenta#9c3eda
  • terminal.ansiBrightRed#e53935
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#e2931d
  • terminal.ansiCyan#39adb5
  • terminal.ansiGreen#91b859
  • terminal.ansiMagenta#9c3eda
  • terminal.ansiRed#e53935
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#e2931d
  • terminal.background#e1dcd9
  • terminal.foreground#1b1918
  • terminal.selectionBackground#1b191826
  • terminalCursor.background#ffffff
  • terminalCursor.foreground#7e6500
  • textLink.activeForeground#0a1818
  • textLink.foreground#3d3836
  • titleBar.activeBackground#e1dcd9
  • titleBar.activeForeground#0a1818
  • titleBar.border#bbb1ac60
  • titleBar.inactiveBackground#e1dcd9
  • titleBar.inactiveForeground#807066
  • tree.indentGuidesStroke#bdb3ae
  • widget.shadow#ffffff30

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
markup.underline—underline
variable.parameter—italic
support.type.property-name.css#42575F—
constant.other.symbol, meta.tag, punctuation, template.expression.begin, template.expression.end, text.html.markdown beginning.punctuation.definition.list#726861—
markup.bold#93252Abold
markup.bold markup.italic, markup.italic markup.bold#93252Aitalic bold
constant.language, entity.name.section.group-title.ini, keyword, markup.heading, modifier, support.type.object, variable.language.this#325F77—
markup.italic, support.module, support.node, variable.parameter.function.language.special.self.python#93252Aitalic
constant.keyword, keyword.control, markup.quote#325F77italic
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#9B6E19—
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#983C1F—
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#93252A—
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#9A7C6A—
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#1D3F89—
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#791B28—
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#493687—
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#627F2F—
source.cs meta.preprocessor#A4968E—
comment, comment punctuation.definition.comment, punctuation.definition.comment, string.quoted.docstring#796961italic
token.info-token#316BCD—
token.warn-token#CD9731—
token.error-token#CD3131—
token.debug-token#800080—