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#ec775c
  • activityBar.background#2d343d
  • activityBar.border#515a64
  • activityBar.foreground#becad5
  • activityBar.inactiveForeground#87929c
  • activityBarBadge.background#316dca
  • activityBarBadge.foreground#dee9f5
  • badge.background#316dca
  • badge.foreground#dee9f5
  • breadcrumb.activeSelectionForeground#87929c
  • breadcrumb.focusForeground#becad5
  • breadcrumb.foreground#87929c
  • breadcrumbPicker.background#38404a
  • button.background#347d39
  • button.foreground#ffffff
  • button.hoverBackground#46954a
  • button.secondaryBackground#49525c
  • button.secondaryForeground#becad5
  • button.secondaryHoverBackground#515a64
  • checkbox.background#38404a
  • checkbox.border#515a64
  • debugConsole.errorForeground#ef9d95
  • debugConsole.infoForeground#87929c
  • debugConsole.sourceForeground#d0ad65
  • debugConsole.warningForeground#bc944e
  • debugConsoleInputIcon.foreground#a98fd2
  • debugIcon.breakpointForeground#e5534b
  • debugTokenExpression.boolean#84bd84
  • debugTokenExpression.error#ef9d95
  • debugTokenExpression.name#7eb6ee
  • debugTokenExpression.number#84bd84
  • debugTokenExpression.string#a1cff4
  • debugTokenExpression.value#a1cff4
  • debugToolBar.background#38404a
  • descriptionForeground#87929c
  • diffEditor.insertedLineBackground#437a4526
  • diffEditor.insertedTextBackground#6da56e4d
  • diffEditor.removedLineBackground#a85d5526
  • diffEditor.removedTextBackground#d6867e4d
  • disabledForeground#e9d7dc80
  • dropdown.background#38404a
  • dropdown.border#515a64
  • dropdown.foreground#becad5
  • dropdown.listBackground#38404a
  • editor.background#2d343d
  • editor.findMatchBackground#966600
  • editor.findMatchHighlightBackground#e3c67b80
  • editor.focusedStackFrameHighlightBackground#46954a66
  • editor.foldBackground#737c871a
  • editor.foreground#becad5
  • editor.lineHighlightBackground#737c871a
  • editor.linkedEditingBackground#539bf512
  • editor.selectionHighlightBackground#6da56e40
  • editor.stackFrameHighlightBackground#ae7c1466
  • editor.wordHighlightBackground#737c8780
  • editor.wordHighlightBorder#737c8799
  • editor.wordHighlightStrongBackground#737c874d
  • editor.wordHighlightStrongBorder#737c8799
  • editorBracketHighlight.foreground1#7eb6ee
  • editorBracketHighlight.foreground2#84bd84
  • editorBracketHighlight.foreground3#d0ad65
  • editorBracketHighlight.foreground4#ef9d95
  • editorBracketHighlight.foreground5#e79dc2
  • editorBracketHighlight.foreground6#d9c0f2
  • editorBracketHighlight.unexpectedBracket.foreground#87929c
  • editorBracketMatch.background#6da56e40
  • editorBracketMatch.border#6da56e99
  • editorCursor.foreground#539bf5
  • editorGroup.border#515a64
  • editorGroupHeader.tabsBackground#262d37
  • editorGroupHeader.tabsBorder#515a64
  • editorGutter.addedBackground#46954a66
  • editorGutter.deletedBackground#e5534b66
  • editorGutter.modifiedBackground#ae7c1466
  • editorHoverWidget.border#5d4e52
  • editorIndentGuide.activeBackground#becad53d
  • editorIndentGuide.background#becad51f
  • editorInlayHint.background#87929c33
  • editorInlayHint.foreground#87929c
  • editorInlayHint.paramBackground#87929c33
  • editorInlayHint.paramForeground#87929c
  • editorInlayHint.typeBackground#87929c33
  • editorInlayHint.typeForeground#87929c
  • editorLineNumber.activeForeground#becad5
  • editorLineNumber.foreground#737c87
  • editorOverviewRuler.border#1c2128
  • editorWhitespace.foreground#626b76
  • editorWidget.background#38404a
  • errorForeground#e5534b
  • focusBorder#316dca
  • foreground#becad5
  • gitDecoration.addedResourceForeground#57ab5a
  • gitDecoration.conflictingResourceForeground#cc6b2c
  • gitDecoration.deletedResourceForeground#e5534b
  • gitDecoration.ignoredResourceForeground#737c87
  • gitDecoration.modifiedResourceForeground#c69026
  • gitDecoration.submoduleResourceForeground#87929c
  • gitDecoration.untrackedResourceForeground#57ab5a
  • icon.foreground#87929c
  • input.background#2d343d
  • input.border#515a64
  • input.foreground#becad5
  • input.placeholderForeground#737c87
  • keybindingLabel.foreground#becad5
  • list.activeSelectionBackground#737c8766
  • list.activeSelectionForeground#becad5
  • list.focusBackground#4184e426
  • list.focusForeground#becad5
  • list.highlightForeground#539bf5
  • list.hoverBackground#737c871a
  • list.hoverForeground#becad5
  • list.inactiveFocusBackground#4184e426
  • list.inactiveSelectionBackground#737c8766
  • list.inactiveSelectionForeground#becad5
  • minimapSlider.activeBackground#87929c47
  • minimapSlider.background#87929c33
  • minimapSlider.hoverBackground#87929c3d
  • notificationCenterHeader.background#38404a
  • notificationCenterHeader.foreground#87929c
  • notifications.background#38404a
  • notifications.border#515a64
  • notifications.foreground#becad5
  • notificationsErrorIcon.foreground#e5534b
  • notificationsInfoIcon.foreground#539bf5
  • notificationsWarningIcon.foreground#c69026
  • panel.background#262d37
  • panel.border#515a64
  • panelInput.border#515a64
  • panelTitle.activeBorder#ec775c
  • panelTitle.activeForeground#becad5
  • panelTitle.inactiveForeground#87929c
  • peekViewEditor.background#737c871a
  • peekViewEditor.matchHighlightBackground#ae7c1466
  • peekViewResult.background#2d343d
  • peekViewResult.matchHighlightBackground#ae7c1466
  • pickerGroup.border#515a64
  • pickerGroup.foreground#87929c
  • progressBar.background#316dca
  • quickInput.background#38404a
  • quickInput.foreground#becad5
  • scrollbar.shadow#626b7633
  • scrollbarSlider.activeBackground#87929c47
  • scrollbarSlider.background#87929c33
  • scrollbarSlider.hoverBackground#87929c3d
  • settings.headerForeground#becad5
  • settings.modifiedItemIndicator#ae7c1466
  • sideBar.background#262d37
  • sideBar.border#515a64
  • sideBar.foreground#becad5
  • sideBarSectionHeader.background#262d37
  • sideBarSectionHeader.border#515a64
  • sideBarSectionHeader.foreground#becad5
  • sideBarTitle.foreground#becad5
  • statusBar.background#2d343d
  • statusBar.border#515a64
  • statusBar.debuggingBackground#c93c37
  • statusBar.debuggingForeground#dee9f5
  • statusBar.focusBorder#316dca80
  • statusBar.foreground#87929c
  • statusBar.noFolderBackground#2d343d
  • statusBarItem.activeBackground#becad51f
  • statusBarItem.focusBorder#316dca
  • statusBarItem.hoverBackground#becad514
  • statusBarItem.prominentBackground#737c8766
  • statusBarItem.remoteBackground#515a64
  • statusBarItem.remoteForeground#becad5
  • symbolIcon.arrayForeground#ce8c60
  • symbolIcon.booleanForeground#6f9cd7
  • symbolIcon.classForeground#ce8c60
  • symbolIcon.colorForeground#7eb6ee
  • symbolIcon.constantForeground#bdeebd#9dd69b#84bd84#6da56e#59905a#437a45#38673a#2e5631#244527#18321c
  • symbolIcon.constructorForeground#d9c0f2
  • symbolIcon.enumeratorForeground#ce8c60
  • symbolIcon.enumeratorMemberForeground#6f9cd7
  • symbolIcon.eventForeground#737c87
  • symbolIcon.fieldForeground#ce8c60
  • symbolIcon.fileForeground#bc944e
  • symbolIcon.folderForeground#bc944e
  • symbolIcon.functionForeground#a98fd2
  • symbolIcon.interfaceForeground#ce8c60
  • symbolIcon.keyForeground#6f9cd7
  • symbolIcon.keywordForeground#d6867e
  • symbolIcon.methodForeground#a98fd2
  • symbolIcon.moduleForeground#d6867e
  • symbolIcon.namespaceForeground#d6867e
  • symbolIcon.nullForeground#6f9cd7
  • symbolIcon.numberForeground#6da56e
  • symbolIcon.objectForeground#ce8c60
  • symbolIcon.operatorForeground#7eb6ee
  • symbolIcon.packageForeground#ce8c60
  • symbolIcon.propertyForeground#ce8c60
  • symbolIcon.referenceForeground#6f9cd7
  • symbolIcon.snippetForeground#6f9cd7
  • symbolIcon.stringForeground#7eb6ee
  • symbolIcon.structForeground#ce8c60
  • symbolIcon.textForeground#7eb6ee
  • symbolIcon.typeParameterForeground#7eb6ee
  • symbolIcon.unitForeground#6f9cd7
  • symbolIcon.variableForeground#ce8c60
  • tab.activeBackground#2d343d
  • tab.activeBorder#2d343d
  • tab.activeBorderTop#ec775c
  • tab.activeForeground#becad5
  • tab.border#515a64
  • tab.hoverBackground#2d343d
  • tab.inactiveBackground#262d37
  • tab.inactiveForeground#87929c
  • tab.unfocusedActiveBorder#2d343d
  • tab.unfocusedActiveBorderTop#515a64
  • tab.unfocusedHoverBackground#737c871a
  • terminal.ansiBlack#626b76
  • terminal.ansiBlue#6f9cd7
  • terminal.ansiBrightBlack#737c87
  • terminal.ansiBrightBlue#7eb6ee
  • terminal.ansiBrightCyan#74d0d7
  • terminal.ansiBrightGreen#84bd84
  • terminal.ansiBrightMagenta#d9c0f2
  • terminal.ansiBrightRed#ef9d95
  • terminal.ansiBrightWhite#dee9f5
  • terminal.ansiBrightYellow#d0ad65
  • terminal.ansiCyan#5fc1c9
  • terminal.ansiGreen#6da56e
  • terminal.ansiMagenta#a98fd2
  • terminal.ansiRed#d6867e
  • terminal.ansiWhite#a2acb7
  • terminal.ansiYellow#bc944e
  • terminal.foreground#becad5
  • textBlockQuote.background#262d37
  • textBlockQuote.border#515a64
  • textCodeBlock.background#737c8766
  • textLink.activeForeground#539bf5
  • textLink.foreground#539bf5
  • textPreformat.background#737c8766
  • textPreformat.foreground#87929c
  • textSeparator.foreground#434b56
  • titleBar.activeBackground#2d343d
  • titleBar.activeForeground#87929c
  • titleBar.border#515a64
  • titleBar.inactiveBackground#262d37
  • titleBar.inactiveForeground#87929c
  • tree.indentGuidesStroke#434b56
  • welcomePage.buttonBackground#434b56
  • welcomePage.buttonHoverBackground#515a64

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#87929c
constant.other.placeholder, constant.character#d6867e
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language, entity#7eb6ee
entity.name, meta.export.default, meta.definition.variable#e5a573
variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression#becad5
entity.name.function#d9c0f2
entity.name.tag, support.class.component#9dd69b
keyword#d6867e
storage, storage.type#d6867e
storage.modifier.package, storage.modifier.import, storage.type.java#becad5
string, string punctuation.section.embedded source#a1cff4
support#7eb6ee
meta.property-name#7eb6ee
variable#e5a573
variable.other#becad5
invalid.broken#ef9d95italic
invalid.deprecated#ef9d95italic
invalid.illegal#ef9d95italic
invalid.unimplemented#ef9d95italic
carriage-return#dee9f5italic underline
message.error#ef9d95
string variable#7eb6ee
source.regexp, string.regexp#a1cff4
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#a1cff4
string.regexp constant.character.escape#9dd69bbold
support.constant#7eb6ee
support.variable#7eb6ee
support.type.property-name.json#9dd69b
meta.module-reference#7eb6ee
punctuation.definition.list.begin.markdown#e5a573
markup.heading, markup.heading entity.name#7eb6eebold
markup.quote#9dd69b
markup.italic#becad5italic
markup.bold#becad5bold
markup.underlineunderline
markup.strikethroughstrikethrough
markup.inline.raw#7eb6ee
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#ef9d95
punctuation.section.embedded#d6867e
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#9dd69b
markup.changed, punctuation.definition.changed#e5a573
markup.ignored, markup.untracked#38404a
meta.diff.range#d9c0f2bold
meta.diff.header#7eb6ee
meta.separator#7eb6eebold
meta.output#7eb6ee
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#87929c
brackethighlighter.unmatched#ef9d95
constant.other.reference.link, string.other.link#a1cff4