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#1a1112
  • activityBar.border#322829
  • activityBar.foreground#796e6f
  • activityBar.inactiveForeground#564b4c
  • activityBarBadge.background#316dca
  • activityBarBadge.foreground#8e8183
  • badge.background#316dca
  • badge.foreground#8e8183
  • breadcrumb.activeSelectionForeground#564b4c
  • breadcrumb.focusForeground#796e6f
  • breadcrumb.foreground#564b4c
  • breadcrumbPicker.background#22181a
  • button.background#347d39
  • button.foreground#ffffff
  • button.hoverBackground#46954a
  • button.secondaryBackground#2d2324
  • button.secondaryForeground#796e6f
  • button.secondaryHoverBackground#322829
  • checkbox.background#22181a
  • checkbox.border#322829
  • debugConsole.errorForeground#cf8a71
  • debugConsole.infoForeground#564b4c
  • debugConsole.sourceForeground#a99b55
  • debugConsole.warningForeground#988540
  • debugConsoleInputIcon.foreground#a373b6
  • debugIcon.breakpointForeground#e5534b
  • debugTokenExpression.boolean#55a97e
  • debugTokenExpression.error#cf8a71
  • debugTokenExpression.name#7d98d1
  • debugTokenExpression.number#55a97e
  • debugTokenExpression.string#97b0d6
  • debugTokenExpression.value#97b0d6
  • debugToolBar.background#22181a
  • descriptionForeground#564b4c
  • diffEditor.insertedLineBackground#256b4a26
  • diffEditor.insertedTextBackground#44936b4d
  • diffEditor.removedLineBackground#9e482426
  • diffEditor.removedTextBackground#c370514d
  • disabledForeground#867a7c80
  • dropdown.background#22181a
  • dropdown.border#322829
  • dropdown.foreground#796e6f
  • dropdown.listBackground#22181a
  • editor.background#1a1112
  • editor.findMatchBackground#966600
  • editor.findMatchHighlightBackground#b7b26e80
  • editor.focusedStackFrameHighlightBackground#46954a66
  • editor.foldBackground#483e3f1a
  • editor.foreground#796e6f
  • editor.lineHighlightBackground#483e3f1a
  • editor.linkedEditingBackground#539bf512
  • editor.selectionHighlightBackground#44936b40
  • editor.stackFrameHighlightBackground#ae7c1466
  • editor.wordHighlightBackground#483e3f80
  • editor.wordHighlightBorder#483e3f99
  • editor.wordHighlightStrongBackground#483e3f4d
  • editor.wordHighlightStrongBorder#483e3f99
  • editorBracketHighlight.foreground1#7d98d1
  • editorBracketHighlight.foreground2#55a97e
  • editorBracketHighlight.foreground3#a99b55
  • editorBracketHighlight.foreground4#cf8a71
  • editorBracketHighlight.foreground5#d58398
  • editorBracketHighlight.foreground6#c5a4ca
  • editorBracketHighlight.unexpectedBracket.foreground#564b4c
  • editorBracketMatch.background#44936b40
  • editorBracketMatch.border#44936b99
  • editorCursor.foreground#539bf5
  • editorGroup.border#322829
  • editorGroupHeader.tabsBackground#160d0e
  • editorGroupHeader.tabsBorder#322829
  • editorGutter.addedBackground#46954a66
  • editorGutter.deletedBackground#e5534b66
  • editorGutter.modifiedBackground#ae7c1466
  • editorHoverWidget.border#2e2425
  • editorIndentGuide.activeBackground#796e6f3d
  • editorIndentGuide.background#796e6f1f
  • editorInlayHint.background#564b4c33
  • editorInlayHint.foreground#564b4c
  • editorInlayHint.paramBackground#564b4c33
  • editorInlayHint.paramForeground#564b4c
  • editorInlayHint.typeBackground#564b4c33
  • editorInlayHint.typeForeground#564b4c
  • editorLineNumber.activeForeground#796e6f
  • editorLineNumber.foreground#483e3f
  • editorOverviewRuler.border#1c2128
  • editorWhitespace.foreground#3d3334
  • editorWidget.background#22181a
  • errorForeground#e5534b
  • focusBorder#316dca
  • foreground#796e6f
  • gitDecoration.addedResourceForeground#57ab5a
  • gitDecoration.conflictingResourceForeground#cc6b2c
  • gitDecoration.deletedResourceForeground#e5534b
  • gitDecoration.ignoredResourceForeground#483e3f
  • gitDecoration.modifiedResourceForeground#c69026
  • gitDecoration.submoduleResourceForeground#564b4c
  • gitDecoration.untrackedResourceForeground#57ab5a
  • icon.foreground#564b4c
  • input.background#1a1112
  • input.border#322829
  • input.foreground#796e6f
  • input.placeholderForeground#483e3f
  • keybindingLabel.foreground#796e6f
  • list.activeSelectionBackground#483e3f66
  • list.activeSelectionForeground#796e6f
  • list.focusBackground#4184e426
  • list.focusForeground#796e6f
  • list.highlightForeground#539bf5
  • list.hoverBackground#483e3f1a
  • list.hoverForeground#796e6f
  • list.inactiveFocusBackground#4184e426
  • list.inactiveSelectionBackground#483e3f66
  • list.inactiveSelectionForeground#796e6f
  • minimapSlider.activeBackground#564b4c47
  • minimapSlider.background#564b4c33
  • minimapSlider.hoverBackground#564b4c3d
  • notificationCenterHeader.background#22181a
  • notificationCenterHeader.foreground#564b4c
  • notifications.background#22181a
  • notifications.border#322829
  • notifications.foreground#796e6f
  • notificationsErrorIcon.foreground#e5534b
  • notificationsInfoIcon.foreground#539bf5
  • notificationsWarningIcon.foreground#c69026
  • panel.background#160d0e
  • panel.border#322829
  • panelInput.border#322829
  • panelTitle.activeBorder#ec775c
  • panelTitle.activeForeground#796e6f
  • panelTitle.inactiveForeground#564b4c
  • peekViewEditor.background#483e3f1a
  • peekViewEditor.matchHighlightBackground#ae7c1466
  • peekViewResult.background#1a1112
  • peekViewResult.matchHighlightBackground#ae7c1466
  • pickerGroup.border#322829
  • pickerGroup.foreground#564b4c
  • progressBar.background#316dca
  • quickInput.background#22181a
  • quickInput.foreground#796e6f
  • scrollbar.shadow#3d333433
  • scrollbarSlider.activeBackground#564b4c47
  • scrollbarSlider.background#564b4c33
  • scrollbarSlider.hoverBackground#564b4c3d
  • settings.headerForeground#796e6f
  • settings.modifiedItemIndicator#ae7c1466
  • sideBar.background#160d0e
  • sideBar.border#322829
  • sideBar.foreground#796e6f
  • sideBarSectionHeader.background#160d0e
  • sideBarSectionHeader.border#322829
  • sideBarSectionHeader.foreground#796e6f
  • sideBarTitle.foreground#796e6f
  • statusBar.background#1a1112
  • statusBar.border#322829
  • statusBar.debuggingBackground#c93c37
  • statusBar.debuggingForeground#8e8183
  • statusBar.focusBorder#316dca80
  • statusBar.foreground#564b4c
  • statusBar.noFolderBackground#1a1112
  • statusBarItem.activeBackground#796e6f1f
  • statusBarItem.focusBorder#316dca
  • statusBarItem.hoverBackground#796e6f14
  • statusBarItem.prominentBackground#483e3f66
  • statusBarItem.remoteBackground#322829
  • statusBarItem.remoteForeground#796e6f
  • symbolIcon.arrayForeground#af7d40
  • symbolIcon.booleanForeground#6c81c5
  • symbolIcon.classForeground#af7d40
  • symbolIcon.colorForeground#7d98d1
  • symbolIcon.constantForeground#99d0b1#75bd95#55a97e#44936b#35805b#256b4a#1f5a3f#1a4b34#133c2a#0b2b1e
  • symbolIcon.constructorForeground#c5a4ca
  • symbolIcon.enumeratorForeground#af7d40
  • symbolIcon.enumeratorMemberForeground#6c81c5
  • symbolIcon.eventForeground#483e3f
  • symbolIcon.fieldForeground#af7d40
  • symbolIcon.fileForeground#988540
  • symbolIcon.folderForeground#988540
  • symbolIcon.functionForeground#a373b6
  • symbolIcon.interfaceForeground#af7d40
  • symbolIcon.keyForeground#6c81c5
  • symbolIcon.keywordForeground#c37051
  • symbolIcon.methodForeground#a373b6
  • symbolIcon.moduleForeground#c37051
  • symbolIcon.namespaceForeground#c37051
  • symbolIcon.nullForeground#6c81c5
  • symbolIcon.numberForeground#44936b
  • symbolIcon.objectForeground#af7d40
  • symbolIcon.operatorForeground#7d98d1
  • symbolIcon.packageForeground#af7d40
  • symbolIcon.propertyForeground#af7d40
  • symbolIcon.referenceForeground#6c81c5
  • symbolIcon.snippetForeground#6c81c5
  • symbolIcon.stringForeground#7d98d1
  • symbolIcon.structForeground#af7d40
  • symbolIcon.textForeground#7d98d1
  • symbolIcon.typeParameterForeground#7d98d1
  • symbolIcon.unitForeground#6c81c5
  • symbolIcon.variableForeground#af7d40
  • tab.activeBackground#1a1112
  • tab.activeBorder#1a1112
  • tab.activeBorderTop#ec775c
  • tab.activeForeground#796e6f
  • tab.border#322829
  • tab.hoverBackground#1a1112
  • tab.inactiveBackground#160d0e
  • tab.inactiveForeground#564b4c
  • tab.unfocusedActiveBorder#1a1112
  • tab.unfocusedActiveBorderTop#322829
  • tab.unfocusedHoverBackground#483e3f1a
  • terminal.ansiBlack#3d3334
  • terminal.ansiBlue#6c81c5
  • terminal.ansiBrightBlack#483e3f
  • terminal.ansiBrightBlue#7d98d1
  • terminal.ansiBrightCyan#6ab2c5
  • terminal.ansiBrightGreen#55a97e
  • terminal.ansiBrightMagenta#c5a4ca
  • terminal.ansiBrightRed#cf8a71
  • terminal.ansiBrightWhite#8e8183
  • terminal.ansiBrightYellow#a99b55
  • terminal.ansiCyan#59a5b9
  • terminal.ansiGreen#44936b
  • terminal.ansiMagenta#a373b6
  • terminal.ansiRed#c37051
  • terminal.ansiWhite#675b5c
  • terminal.ansiYellow#988540
  • terminal.foreground#796e6f
  • textBlockQuote.background#160d0e
  • textBlockQuote.border#322829
  • textCodeBlock.background#483e3f66
  • textLink.activeForeground#539bf5
  • textLink.foreground#539bf5
  • textPreformat.background#483e3f66
  • textPreformat.foreground#564b4c
  • textSeparator.foreground#291f21
  • titleBar.activeBackground#1a1112
  • titleBar.activeForeground#564b4c
  • titleBar.border#322829
  • titleBar.inactiveBackground#160d0e
  • titleBar.inactiveForeground#564b4c
  • tree.indentGuidesStroke#291f21
  • welcomePage.buttonBackground#291f21
  • welcomePage.buttonHoverBackground#322829

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#564b4c
constant.other.placeholder, constant.character#c37051
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language, entity#7d98d1
entity.name, meta.export.default, meta.definition.variable#c19454
variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression#796e6f
entity.name.function#c5a4ca
entity.name.tag, support.class.component#75bd95
keyword#c37051
storage, storage.type#c37051
storage.modifier.package, storage.modifier.import, storage.type.java#796e6f
string, string punctuation.section.embedded source#97b0d6
support#7d98d1
meta.property-name#7d98d1
variable#c19454
variable.other#796e6f
invalid.broken#cf8a71italic
invalid.deprecated#cf8a71italic
invalid.illegal#cf8a71italic
invalid.unimplemented#cf8a71italic
carriage-return#8e8183italic underline
message.error#cf8a71
string variable#7d98d1
source.regexp, string.regexp#97b0d6
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#97b0d6
string.regexp constant.character.escape#75bd95bold
support.constant#7d98d1
support.variable#7d98d1
support.type.property-name.json#75bd95
meta.module-reference#7d98d1
punctuation.definition.list.begin.markdown#c19454
markup.heading, markup.heading entity.name#7d98d1bold
markup.quote#75bd95
markup.italic#796e6fitalic
markup.bold#796e6fbold
markup.underlineunderline
markup.strikethroughstrikethrough
markup.inline.raw#7d98d1
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#cf8a71
punctuation.section.embedded#c37051
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#75bd95
markup.changed, punctuation.definition.changed#c19454
markup.ignored, markup.untracked#22181a
meta.diff.range#c5a4cabold
meta.diff.header#7d98d1
meta.separator#7d98d1bold
meta.output#7d98d1
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#564b4c
brackethighlighter.unmatched#cf8a71
constant.other.reference.link, string.other.link#97b0d6