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.underline—underline
markup.strikethrough—strikethrough
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—