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#f8f3f3
  • activityBar.background#f8f3f3
  • activityBar.border#ecdbdb
  • activityBar.foreground#b70000
  • activityBar.inactiveForeground#d2b8b8
  • activityBarBadge.background#eda0a0
  • activityBarBadge.foreground#5a0000
  • badge.background#e1c7c7
  • badge.foreground#b70000
  • button.background#e6cccc
  • button.border#00000000
  • button.foreground#b70000
  • button.hoverBackground#d27b7b77
  • button.secondaryBackground#ecdbdb
  • button.secondaryBorder#00000000
  • button.secondaryForeground#b32020
  • button.secondaryHoverBackground#d27b7b77
  • button.separator#d2b8b8
  • checkbox.border#ecdbdb
  • debugIcon.breakpointCurrentStackframeForeground#b32020
  • debugIcon.breakpointDisabledForeground#b32020
  • debugIcon.breakpointForeground#b32020
  • debugIcon.breakpointStackframeForeground#b32020
  • debugIcon.breakpointUnverifiedForeground#b32020
  • debugIcon.continueForeground#b32020
  • debugIcon.disconnectForeground#b32020
  • debugIcon.pauseForeground#b32020
  • debugIcon.restartForeground#b32020
  • debugIcon.startForeground#b32020
  • debugIcon.stepBackForeground#b32020
  • debugIcon.stepIntoForeground#b32020
  • debugIcon.stepOutForeground#b32020
  • debugIcon.stepOverForeground#b32020
  • debugIcon.stopForeground#b32020
  • debugToolBar.background#f8f3f3
  • descriptionForeground#b32020
  • diffEditor.insertedLineBackground#78ff5a00
  • dropdown.background#f8f3f3
  • dropdown.foreground#b32020
  • editor.background#f8f3f3
  • editor.findMatchBackground#f8f3f3
  • editor.findMatchBorder#b23643
  • editor.findMatchHighlightBackground#f8f3f37c
  • editor.findMatchHighlightBorder#d2b8b8
  • editor.foldBackground#f8f3f36e
  • editor.foreground#992630
  • editor.hoverHighlightBackground#e5d5d577
  • editor.inactiveSelectionBackground#d27b7b33
  • editor.lineHighlightBackground#f2e7e7
  • editor.placeholder.foreground#d9a29e
  • editor.selectionBackground#d27b7b77
  • editor.selectionHighlightBackground#d27b7b33
  • editor.selectionHighlightBorder#d27b7b77
  • editor.wordHighlightBackground#d2b8b8
  • editor.wordHighlightBorder#d2b8b8
  • editor.wordHighlightStrongBackground#d2b8b8d4
  • editorBracketHighlight.foreground1#94000f
  • editorBracketHighlight.foreground2#b91d32
  • editorBracketHighlight.foreground3#c25767
  • editorBracketHighlight.unexpectedBracket.foreground#9e0505
  • editorBracketMatch.background#f8f3f3
  • editorBracketMatch.border#d2b8b8
  • editorCursor.foreground#a21734
  • editorError.foreground#000000
  • editorGroup.border#ecdbdb
  • editorGroupHeader.tabsBackground#f8f3f3
  • editorGroupHeader.tabsBorder#ecdbdb
  • editorHoverWidget.statusBarBackground#f8f3f3
  • editorIndentGuide.activeBackground1#c28080
  • editorIndentGuide.background1#e2d9d9
  • editorInfo.foreground#c28f8f
  • editorLightBulb.foreground#b32020
  • editorLineNumber.activeForeground#d29999
  • editorLineNumber.foreground#e1c7c7
  • editorLink.activeForeground#b70000
  • editorMarkerNavigationError.headerBackground#000000
  • editorOverviewRuler.border#ecdbdb
  • editorOverviewRuler.errorForeground#000000
  • editorRuler.foreground#e2d9d9
  • editorSuggestWidget.foreground#c28080
  • editorSuggestWidget.highlightForeground#b70000
  • editorWarning.foreground#c28f8f
  • editorWhitespace.foreground#e1c7c7
  • editorWidget.background#f3eaea
  • editorWidget.border#e1c7c7
  • errorForeground#000000
  • focusBorder#f8f3f3
  • foreground#c36969
  • gitDecoration.addedResourceForeground#a00805
  • gitDecoration.conflictingResourceForeground#a00805
  • gitDecoration.deletedResourceForeground#c28080
  • gitDecoration.ignoredResourceForeground#d2baba
  • gitDecoration.modifiedResourceForeground#a00805
  • gitDecoration.submoduleResourceForeground#c28080
  • gitDecoration.untrackedResourceForeground#a00805
  • icon.foreground#c36969
  • input.background#f8f3f3
  • input.border#f8f3f3
  • input.foreground#b32020
  • keybindingLabel.background#f8f3f3
  • keybindingLabel.border#ecdbdb
  • keybindingLabel.bottomBorder#ecdbdb
  • keybindingLabel.foreground#b70000
  • list.activeSelectionBackground#e5b2b266
  • list.activeSelectionForeground#7a0014
  • list.errorForeground#000000
  • list.filterMatchBackground#e1c7c7
  • list.filterMatchBorder#f8f3f3
  • list.focusBackground#e5b2b266
  • list.focusForeground#7a0014
  • list.highlightForeground#8f0000
  • list.hoverBackground#d27b7b77
  • list.hoverForeground#b70000
  • list.inactiveSelectionBackground#f2e7e7
  • list.inactiveSelectionForeground#b70000
  • list.warningForeground#af6400
  • listFilterWidget.background#f8f3f3
  • listFilterWidget.noMatchesOutline#c02100
  • listFilterWidget.outline#d2b8b8
  • menu.background#f8f3f3
  • menu.foreground#b32020
  • menubar.selectionBackground#ecdbdb
  • minimap.errorHighlight#000000
  • minimapSlider.activeBackground#7a001421
  • minimapSlider.background#7a00140f
  • minimapSlider.hoverBackground#7a00140f
  • panel.border#ecdbdb
  • panelTitle.activeBorder#f8f3f3
  • panelTitle.activeForeground#b70000
  • panelTitle.inactiveForeground#c3a9a9
  • peekView.border#d5b2b2
  • peekViewEditor.background#f8f3f3
  • peekViewEditor.matchHighlightBackground#f8f3f3
  • peekViewEditor.matchHighlightBorder#d2b8b8
  • peekViewEditorGutter.background#f8f3f3
  • peekViewResult.background#f2e7e7
  • peekViewResult.fileForeground#8f0000
  • peekViewResult.lineForeground#d2b8b8
  • peekViewResult.matchHighlightBackground#eadddd
  • peekViewResult.selectionBackground#f8f3f3
  • peekViewResult.selectionForeground#b70000
  • peekViewTitle.background#f3eaea
  • pickerGroup.foreground#920000
  • problemsErrorIcon.foreground#000000
  • progressBar.background#b70000
  • sash.hoverBorder#eadddd
  • scrollbar.shadow#f4d7d7
  • scrollbarSlider.activeBackground#7a00140f
  • scrollbarSlider.background#7a00140f
  • scrollbarSlider.hoverBackground#7a00140f
  • selection.background#d5b2b2
  • settings.checkboxBorder#ecdbdb
  • settings.dropdownBorder#ecdbdb
  • settings.modifiedItemIndicator#d5b2b2
  • settings.textInputBorder#ecdbdb
  • sideBar.background#f8f3f3
  • sideBar.border#ecdbdb
  • sideBar.foreground#c28080
  • sideBarSectionHeader.background#f8f3f3
  • sideBarSectionHeader.border#ecdbdb
  • statusBar.background#f8f3f3
  • statusBar.border#ecdbdb
  • statusBar.debuggingBackground#f8f3f3
  • statusBar.debuggingBorder#ecdbdb
  • statusBar.debuggingForeground#b32020
  • statusBar.foreground#b32020
  • statusBar.noFolderBackground#f8f3f3
  • statusBar.noFolderBorder#ecdbdb
  • statusBar.noFolderForeground#b32020
  • statusBarItem.activeBackground#f8f3f3
  • statusBarItem.errorForeground#000000
  • statusBarItem.hoverBackground#f8f3f3
  • symbolIcon.arrayForeground#b32020
  • symbolIcon.booleanForeground#b32020
  • symbolIcon.classForeground#b32020
  • symbolIcon.colorForeground#b32020
  • symbolIcon.constantForeground#b32020
  • symbolIcon.constructorForeground#b32020
  • symbolIcon.enumeratorForeground#b32020
  • symbolIcon.enumeratorMemberForeground#b32020
  • symbolIcon.eventForeground#b32020
  • symbolIcon.fieldForeground#b32020
  • symbolIcon.fileForeground#b32020
  • symbolIcon.folderForeground#b32020
  • symbolIcon.functionForeground#b32020
  • symbolIcon.interfaceForeground#b32020
  • symbolIcon.keyForeground#b32020
  • symbolIcon.keywordForeground#b32020
  • symbolIcon.methodForeground#b32020
  • symbolIcon.moduleForeground#b32020
  • symbolIcon.namespaceForeground#b32020
  • symbolIcon.nullForeground#b32020
  • symbolIcon.numberForeground#b32020
  • symbolIcon.objectForeground#b32020
  • symbolIcon.operatorForeground#b32020
  • symbolIcon.packageForeground#b32020
  • symbolIcon.propertyForeground#b32020
  • symbolIcon.referenceForeground#b32020
  • symbolIcon.snippetForeground#b32020
  • symbolIcon.stringForeground#b32020
  • symbolIcon.structForeground#b32020
  • symbolIcon.textForeground#b32020
  • symbolIcon.typeParameterForeground#b32020
  • symbolIcon.unitForeground#b32020
  • symbolIcon.variableForeground#b32020
  • tab.activeBorder#a21734dd
  • tab.activeForeground#a21734dd
  • tab.border#f8f3f3
  • tab.hoverForeground#a21734dd
  • tab.inactiveBackground#f8f3f3
  • tab.inactiveForeground#d2b8b8dc
  • tab.unfocusedHoverForeground#a21734dd
  • terminal.ansiBlack#f8f3f3
  • terminal.ansiBlue#d5b2b2
  • terminal.ansiBrightBlack#e1c7c7
  • terminal.ansiBrightBlue#d5b2b2
  • terminal.ansiBrightCyan#af6161
  • terminal.ansiBrightGreen#c28080
  • terminal.ansiBrightMagenta#8f0000
  • terminal.ansiBrightRed#b23643
  • terminal.ansiBrightWhite#7a0014
  • terminal.ansiBrightYellow#b70000
  • terminal.ansiCyan#af6161
  • terminal.ansiGreen#c28080
  • terminal.ansiMagenta#8f0000
  • terminal.ansiRed#b23643
  • terminal.ansiWhite#6e0008
  • terminal.ansiYellow#b70000
  • terminal.background#f8f3f3
  • terminal.foreground#8f0000
  • terminalCommandDecoration.errorBackground#000000
  • terminalCursor.background#f8f3f3
  • terminalCursor.foreground#a21734
  • textLink.activeForeground#7a0014
  • textLink.foreground#7a0014
  • textPreformat.foreground#b32020
  • titleBar.activeBackground#f8f3f3
  • titleBar.activeForeground#b32020
  • titleBar.border#ecdbdb
  • titleBar.inactiveBackground#f8f3f3
  • toolbar.hoverBackground#f8f3f3
  • toolbar.hoverOutline#c36969
  • tree.indentGuidesStroke#e2d9d9
  • welcomePage.progress.foreground#b70000
  • window.activeBorder#ad0000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support.type.property-name.json, meta.object-literal.key#85000bcc
variable.parameter.function#85000bcc
comment, punctuation.definition.comment#b59292aa
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.parameters, punctuation.definition.array#4c000598
none#a21734
keyword.operator#7a0014
keyword#b23643eeitalic
variable#85000bcc
entity.name.function, meta.require, support.function.any-method#b32020italic
support.class, entity.name.class, entity.name.type.class#8f0000italic
meta.class#3b0005
keyword.other.special-method#c28080
storage#b23643ee
support.function#b23643
string, constant.other.symbol, entity.other.inherited-class#4c0005ee
constant.numeric#6e0008
none#b32020
none#b32020
constant#6e0008
entity.name.tag#b57f7f
entity.other.attribute-name#b32020
entity.other.attribute-name.id, punctuation.definition.entity#c28080
meta.selector#b23643ee
none#b32020
markup.heading punctuation.definition.heading, entity.name.section#c28080
keyword.other.unit#b32020
markup.bold, punctuation.definition.bold#8f0000bold
markup.italic, punctuation.definition.italic#b23643eeitalic
markup.raw.inline#4c0005ee
string.other.link, punctuation.definition.string.end.markdown#b23643
meta.link#b32020
markup.list#b23643
markup.quote#b32020
meta.separator#a21734
markup.inserted#4c0005ee
markup.deleted#b23643
markup.changed#b23643ee
constant.other.color#b23643
string.regexp#b23643
constant.character.escape#b23643
punctuation.section.embedded, variable.interpolation#b23643ee
invalid.illegal#3b0005
invalid.broken#f8f3f3
invalid.deprecated#3b0005
invalid.unimplemented#3b0005
Tlapalli by ackzell - VS Code Theme