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.background#1c1f1d
  • activityBar.border#ffffff1a
  • activityBar.foreground#f5f5f5
  • activityBar.inactiveForeground#6b7370
  • activityBarBadge.background#4ade80
  • activityBarBadge.foreground#0f1e13
  • badge.background#4ade80
  • badge.foreground#0f1e13
  • breadcrumb.activeSelectionForeground#f5f5f5
  • breadcrumb.focusForeground#f5f5f5
  • breadcrumb.foreground#a3a3a3
  • breadcrumbPicker.background#1c1f1d
  • button.background#adb5b1
  • button.foreground#1c1f1d
  • button.hoverBackground#c4cbc7
  • button.secondaryBackground#ffffff15
  • button.secondaryForeground#f5f5f5
  • button.secondaryHoverBackground#ffffff25
  • contrastBorder#ffffff00
  • debugTokenExpression.boolean#c16457
  • debugTokenExpression.name#adb5b1
  • debugTokenExpression.number#7b6aa9
  • debugTokenExpression.string#eec785
  • debugTokenExpression.value#4ade80
  • debugToolBar.background#1c1f1d
  • diffEditor.insertedLineBackground#4ade8015
  • diffEditor.insertedTextBackground#4ade8020
  • diffEditor.removedLineBackground#c1645715
  • diffEditor.removedTextBackground#c1645720
  • dropdown.background#1c1f1d
  • dropdown.border#ffffff1a
  • dropdown.foreground#f5f5f5
  • dropdown.listBackground#1c1f1d
  • editor.background#262a28
  • editor.findMatchBackground#4ade8040
  • editor.findMatchHighlightBackground#4ade8025
  • editor.foreground#f5f5f5
  • editor.inactiveSelectionBackground#adb5b125
  • editor.lineHighlightBackground#2f343230
  • editor.rangeHighlightBackground#2f343250
  • editor.selectionBackground#adb5b140
  • editor.selectionHighlightBackground#adb5b120
  • editor.wordHighlightBackground#adb5b120
  • editor.wordHighlightStrongBackground#adb5b130
  • editorBracketHighlight.foreground1#adb5b1
  • editorBracketHighlight.foreground2#4ade80
  • editorBracketHighlight.foreground3#7b6aa9
  • editorBracketHighlight.foreground4#dba446
  • editorBracketMatch.background#ffffff15
  • editorBracketMatch.border#adb5b180
  • editorCursor.foreground#adb5b1
  • editorError.foreground#c16457
  • editorGroup.border#ffffff1a
  • editorGroupHeader.tabsBackground#1c1f1d
  • editorGutter.addedBackground#4ade80
  • editorGutter.background#262a28
  • editorGutter.deletedBackground#c16457
  • editorGutter.modifiedBackground#dba446
  • editorHint.foreground#4ade80
  • editorHoverWidget.background#1c1f1d
  • editorHoverWidget.border#ffffff1a
  • editorIndentGuide.activeBackground#ffffff25
  • editorIndentGuide.background#ffffff10
  • editorInfo.foreground#7b6aa9
  • editorLineNumber.activeForeground#adb5b1
  • editorLineNumber.foreground#6b7370
  • editorRuler.foreground#ffffff15
  • editorSuggestWidget.background#1c1f1d
  • editorSuggestWidget.border#ffffff1a
  • editorSuggestWidget.foreground#f5f5f5
  • editorSuggestWidget.highlightForeground#4ade80
  • editorSuggestWidget.selectedBackground#ffffff15
  • editorWarning.foreground#dba446
  • editorWhitespace.foreground#ffffff15
  • editorWidget.background#1c1f1d
  • editorWidget.border#ffffff1a
  • editorWidget.foreground#f5f5f5
  • focusBorder#adb5b180
  • gitDecoration.addedResourceForeground#4ade80
  • gitDecoration.conflictingResourceForeground#c16457
  • gitDecoration.deletedResourceForeground#c16457
  • gitDecoration.ignoredResourceForeground#6b7370
  • gitDecoration.modifiedResourceForeground#dba446
  • gitDecoration.untrackedResourceForeground#7b6aa9
  • input.background#ffffff15
  • input.border#ffffff1a
  • input.foreground#f5f5f5
  • input.placeholderForeground#6b7370
  • inputOption.activeBackground#adb5b140
  • inputOption.activeBorder#adb5b1
  • inputValidation.errorBackground#4b2c28
  • inputValidation.errorBorder#c16457
  • inputValidation.infoBackground#373148
  • inputValidation.infoBorder#7b6aa9
  • inputValidation.warningBackground#3f2c17
  • inputValidation.warningBorder#dba446
  • list.activeSelectionBackground#ffffff15
  • list.activeSelectionForeground#f5f5f5
  • list.errorForeground#c16457
  • list.focusBackground#ffffff15
  • list.highlightForeground#4ade80
  • list.hoverBackground#ffffff0a
  • list.hoverForeground#f5f5f5
  • list.inactiveSelectionBackground#ffffff10
  • list.inactiveSelectionForeground#f5f5f5
  • list.warningForeground#dba446
  • menu.background#1c1f1d
  • menu.foreground#f5f5f5
  • menu.selectionBackground#ffffff15
  • menu.selectionForeground#f5f5f5
  • menu.separatorBackground#ffffff1a
  • menubar.selectionBackground#ffffff15
  • menubar.selectionForeground#f5f5f5
  • merge.currentContentBackground#4ade8020
  • merge.currentHeaderBackground#4ade8040
  • merge.incomingContentBackground#7b6aa920
  • merge.incomingHeaderBackground#7b6aa940
  • minimap.background#262a28
  • minimap.findMatchHighlight#4ade80
  • minimap.selectionHighlight#adb5b140
  • minimapSlider.activeBackground#ffffff30
  • minimapSlider.background#ffffff10
  • minimapSlider.hoverBackground#ffffff20
  • notificationCenterHeader.background#1c1f1d
  • notificationCenterHeader.foreground#f5f5f5
  • notifications.background#1c1f1d
  • notifications.border#ffffff1a
  • notifications.foreground#f5f5f5
  • panel.background#1c1f1d
  • panel.border#ffffff1a
  • panelTitle.activeBorder#adb5b1
  • panelTitle.activeForeground#f5f5f5
  • panelTitle.inactiveForeground#6b7370
  • peekView.border#adb5b1
  • peekViewEditor.background#1c1f1d
  • peekViewEditorGutter.background#1c1f1d
  • peekViewResult.background#1c1f1d
  • peekViewResult.fileForeground#f5f5f5
  • peekViewResult.lineForeground#a3a3a3
  • peekViewResult.matchHighlightBackground#4ade8040
  • peekViewResult.selectionBackground#ffffff15
  • peekViewResult.selectionForeground#f5f5f5
  • peekViewTitle.background#1c1f1d
  • peekViewTitleDescription.foreground#a3a3a3
  • peekViewTitleLabel.foreground#f5f5f5
  • quickInput.background#1c1f1d
  • quickInput.foreground#f5f5f5
  • quickInputList.focusBackground#ffffff15
  • quickInputTitle.background#1c1f1d
  • scrollbar.shadow#00000040
  • scrollbarSlider.activeBackground#ffffff35
  • scrollbarSlider.background#ffffff15
  • scrollbarSlider.hoverBackground#ffffff25
  • settings.focusedRowBackground#ffffff0a
  • settings.headerForeground#f5f5f5
  • settings.modifiedItemIndicator#4ade80
  • sideBar.background#1c1f1d
  • sideBar.border#ffffff1a
  • sideBar.foreground#f5f5f5
  • sideBarSectionHeader.background#1c1f1d
  • sideBarSectionHeader.border#ffffff1a
  • sideBarSectionHeader.foreground#adb5b1
  • sideBarTitle.foreground#f5f5f5
  • statusBar.background#1c1f1d
  • statusBar.border#ffffff1a
  • statusBar.debuggingBackground#dba446
  • statusBar.debuggingForeground#1c1f1d
  • statusBar.foreground#a3a3a3
  • statusBar.noFolderBackground#262a28
  • statusBarItem.activeBackground#ffffff20
  • statusBarItem.hoverBackground#ffffff15
  • statusBarItem.remoteBackground#4ade80
  • statusBarItem.remoteForeground#0f1e13
  • tab.activeBackground#262a28
  • tab.activeBorderTop#adb5b1
  • tab.activeForeground#f5f5f5
  • tab.border#ffffff0a
  • tab.hoverBackground#2f343240
  • tab.inactiveBackground#1c1f1d
  • tab.inactiveForeground#a3a3a3
  • tab.unfocusedActiveBorderTop#6b7370
  • terminal.ansiBlack#1c1f1d
  • terminal.ansiBlue#7b6aa9
  • terminal.ansiBrightBlack#6b7370
  • terminal.ansiBrightBlue#a89fd0
  • terminal.ansiBrightCyan#c4cbc7
  • terminal.ansiBrightGreen#7eeaa3
  • terminal.ansiBrightMagenta#b5acd0
  • terminal.ansiBrightRed#e0857a
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#eec785
  • terminal.ansiCyan#adb5b1
  • terminal.ansiGreen#4ade80
  • terminal.ansiMagenta#9b8fbd
  • terminal.ansiRed#c16457
  • terminal.ansiWhite#f5f5f5
  • terminal.ansiYellow#dba446
  • terminal.background#1c1f1d
  • terminal.foreground#f5f5f5
  • terminalCursor.foreground#adb5b1
  • titleBar.activeBackground#1c1f1d
  • titleBar.activeForeground#f5f5f5
  • titleBar.border#ffffff1a
  • titleBar.inactiveBackground#1c1f1d
  • titleBar.inactiveForeground#6b7370
  • welcomePage.background#262a28
  • welcomePage.tileBackground#1c1f1d
  • welcomePage.tileBorder#ffffff1a
  • welcomePage.tileHoverBackground#2f3432
  • widget.shadow#00000040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6b7370italic
string, string.quoted, string.template#eec785
constant.numeric, constant.language.boolean, constant.language.null, constant.language.undefined#9b8fbd
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, storage.type, storage.modifier#c16457
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison#adb5b1
entity.name.function, support.function, meta.function-call#4ade80
entity.name.type, entity.name.class, support.class, support.type#dba446
entity.name.tag, support.tag#c16457
entity.other.attribute-name#dba446
variable, variable.other, variable.language#f5f5f5
variable.parameter#adb5b1italic
variable.other.property, support.variable.property#a3d9c0
punctuation, meta.brace#a3a3a3
constant.other.placeholder, string.interpolated#7eeaa3
meta.object-literal.key#adb5b1
entity.other.inherited-class#4ade80italic
entity.name.namespace, entity.name.module#dba446
support.constant, constant.other#9b8fbd
meta.decorator, entity.name.decorator#7b6aa9
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#c16457
support.type.primitive#4ade80
entity.name.type.interface, entity.name.type.alias#dba446
markup.heading#4ade80bold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.fenced_code#eec785
markup.underline.link#7b6aa9
markup.quote#6b7370italic
markup.list#c16457
meta.diff.header#7b6aa9
markup.deleted#c16457
markup.inserted#4ade80
markup.changed#dba446
invalid, invalid.illegal#c16457strikethrough
invalid.deprecated#dba446strikethrough
meta.embedded, source.groovy.embedded#f5f5f5
support.type.property-name.css, support.type.property-name.json#adb5b1
support.constant.property-value.css#f5f5f5
constant.other.color.rgb-value.hex.css#9b8fbd
support.constant.color.w3c-standard-color-name.css#dba446
entity.other.keyframe-offset.css#9b8fbd
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#6b7370
entity.name.tag.html#c16457
support.class.component.tsx, support.class.component.jsx#dba446
punctuation.section.embedded#adb5b1
Velvet Markdown by Lev.com - VS Code Theme