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#1b2832
  • activityBar.border#3d4e5a
  • activityBar.foreground#a6bccc
  • activityBar.inactiveForeground#6f8595
  • activityBarBadge.background#316dca
  • activityBarBadge.foreground#c6dbea
  • badge.background#316dca
  • badge.foreground#c6dbea
  • breadcrumb.activeSelectionForeground#6f8595
  • breadcrumb.focusForeground#a6bccc
  • breadcrumb.foreground#6f8595
  • breadcrumbPicker.background#26343f
  • button.background#347d39
  • button.foreground#ffffff
  • button.hoverBackground#46954a
  • button.secondaryBackground#364651
  • button.secondaryForeground#a6bccc
  • button.secondaryHoverBackground#3d4e5a
  • checkbox.background#26343f
  • checkbox.border#3d4e5a
  • debugConsole.errorForeground#fb987e
  • debugConsole.infoForeground#6f8595
  • debugConsole.sourceForeground#cdb048
  • debugConsole.warningForeground#ba962e
  • debugConsoleInputIcon.foreground#bc80e2
  • debugIcon.breakpointForeground#e5534b
  • debugTokenExpression.boolean#56c682
  • debugTokenExpression.error#fb987e
  • debugTokenExpression.name#81b1fe
  • debugTokenExpression.number#56c682
  • debugTokenExpression.string#a2ccff
  • debugTokenExpression.value#a2ccff
  • debugToolBar.background#26343f
  • descriptionForeground#6f8595
  • diffEditor.insertedLineBackground#1d7e4b26
  • diffEditor.insertedTextBackground#42ad6e4d
  • diffEditor.removedLineBackground#c4451e26
  • diffEditor.removedTextBackground#ef77564d
  • disabledForeground#c1ced880
  • dropdown.background#26343f
  • dropdown.border#3d4e5a
  • dropdown.foreground#a6bccc
  • dropdown.listBackground#26343f
  • editor.background#1b2832
  • editor.findMatchBackground#966600
  • editor.findMatchHighlightBackground#dccb6880
  • editor.focusedStackFrameHighlightBackground#46954a66
  • editor.foldBackground#5b707f1a
  • editor.foreground#a6bccc
  • editor.lineHighlightBackground#5b707f1a
  • editor.linkedEditingBackground#539bf512
  • editor.selectionHighlightBackground#42ad6e40
  • editor.stackFrameHighlightBackground#ae7c1466
  • editor.wordHighlightBackground#5b707f80
  • editor.wordHighlightBorder#5b707f99
  • editor.wordHighlightStrongBackground#5b707f4d
  • editor.wordHighlightStrongBorder#5b707f99
  • editorBracketHighlight.foreground1#81b1fe
  • editorBracketHighlight.foreground2#56c682
  • editorBracketHighlight.foreground3#cdb048
  • editorBracketHighlight.foreground4#fb987e
  • editorBracketHighlight.foreground5#ff8eb6
  • editorBracketHighlight.foreground6#e4bbf2
  • editorBracketHighlight.unexpectedBracket.foreground#6f8595
  • editorBracketMatch.background#42ad6e40
  • editorBracketMatch.border#42ad6e99
  • editorCursor.foreground#539bf5
  • editorGroup.border#3d4e5a
  • editorGroupHeader.tabsBackground#15222c
  • editorGroupHeader.tabsBorder#3d4e5a
  • editorGutter.addedBackground#46954a66
  • editorGutter.deletedBackground#e5534b66
  • editorGutter.modifiedBackground#ae7c1466
  • editorHoverWidget.border#3c474f
  • editorIndentGuide.activeBackground#a6bccc3d
  • editorIndentGuide.background#a6bccc1f
  • editorInlayHint.background#6f859533
  • editorInlayHint.foreground#6f8595
  • editorInlayHint.paramBackground#6f859533
  • editorInlayHint.paramForeground#6f8595
  • editorInlayHint.typeBackground#6f859533
  • editorInlayHint.typeForeground#6f8595
  • editorLineNumber.activeForeground#a6bccc
  • editorLineNumber.foreground#5b707f
  • editorOverviewRuler.border#1c2128
  • editorWhitespace.foreground#4d5f6c
  • editorWidget.background#26343f
  • errorForeground#e5534b
  • focusBorder#316dca
  • foreground#a6bccc
  • gitDecoration.addedResourceForeground#57ab5a
  • gitDecoration.conflictingResourceForeground#cc6b2c
  • gitDecoration.deletedResourceForeground#e5534b
  • gitDecoration.ignoredResourceForeground#5b707f
  • gitDecoration.modifiedResourceForeground#c69026
  • gitDecoration.submoduleResourceForeground#6f8595
  • gitDecoration.untrackedResourceForeground#57ab5a
  • icon.foreground#6f8595
  • input.background#1b2832
  • input.border#3d4e5a
  • input.foreground#a6bccc
  • input.placeholderForeground#5b707f
  • keybindingLabel.foreground#a6bccc
  • list.activeSelectionBackground#5b707f66
  • list.activeSelectionForeground#a6bccc
  • list.focusBackground#4184e426
  • list.focusForeground#a6bccc
  • list.highlightForeground#539bf5
  • list.hoverBackground#5b707f1a
  • list.hoverForeground#a6bccc
  • list.inactiveFocusBackground#4184e426
  • list.inactiveSelectionBackground#5b707f66
  • list.inactiveSelectionForeground#a6bccc
  • minimapSlider.activeBackground#6f859547
  • minimapSlider.background#6f859533
  • minimapSlider.hoverBackground#6f85953d
  • notificationCenterHeader.background#26343f
  • notificationCenterHeader.foreground#6f8595
  • notifications.background#26343f
  • notifications.border#3d4e5a
  • notifications.foreground#a6bccc
  • notificationsErrorIcon.foreground#e5534b
  • notificationsInfoIcon.foreground#539bf5
  • notificationsWarningIcon.foreground#c69026
  • panel.background#15222c
  • panel.border#3d4e5a
  • panelInput.border#3d4e5a
  • panelTitle.activeBorder#ec775c
  • panelTitle.activeForeground#a6bccc
  • panelTitle.inactiveForeground#6f8595
  • peekViewEditor.background#5b707f1a
  • peekViewEditor.matchHighlightBackground#ae7c1466
  • peekViewResult.background#1b2832
  • peekViewResult.matchHighlightBackground#ae7c1466
  • pickerGroup.border#3d4e5a
  • pickerGroup.foreground#6f8595
  • progressBar.background#316dca
  • quickInput.background#26343f
  • quickInput.foreground#a6bccc
  • scrollbar.shadow#4d5f6c33
  • scrollbarSlider.activeBackground#6f859547
  • scrollbarSlider.background#6f859533
  • scrollbarSlider.hoverBackground#6f85953d
  • settings.headerForeground#a6bccc
  • settings.modifiedItemIndicator#ae7c1466
  • sideBar.background#15222c
  • sideBar.border#3d4e5a
  • sideBar.foreground#a6bccc
  • sideBarSectionHeader.background#15222c
  • sideBarSectionHeader.border#3d4e5a
  • sideBarSectionHeader.foreground#a6bccc
  • sideBarTitle.foreground#a6bccc
  • statusBar.background#1b2832
  • statusBar.border#3d4e5a
  • statusBar.debuggingBackground#c93c37
  • statusBar.debuggingForeground#c6dbea
  • statusBar.focusBorder#316dca80
  • statusBar.foreground#6f8595
  • statusBar.noFolderBackground#1b2832
  • statusBarItem.activeBackground#a6bccc1f
  • statusBarItem.focusBorder#316dca
  • statusBarItem.hoverBackground#a6bccc14
  • statusBarItem.prominentBackground#5b707f66
  • statusBarItem.remoteBackground#3d4e5a
  • statusBarItem.remoteForeground#a6bccc
  • symbolIcon.arrayForeground#d78935
  • symbolIcon.booleanForeground#6e96f2
  • symbolIcon.classForeground#d78935
  • symbolIcon.colorForeground#81b1fe
  • symbolIcon.constantForeground#aaf2c2#7edd9f#56c682#42ad6e#31965d#1d7e4b#186b3f#155935#0f482b#08341f
  • symbolIcon.constructorForeground#e4bbf2
  • symbolIcon.enumeratorForeground#d78935
  • symbolIcon.enumeratorMemberForeground#6e96f2
  • symbolIcon.eventForeground#5b707f
  • symbolIcon.fieldForeground#d78935
  • symbolIcon.fileForeground#ba962e
  • symbolIcon.folderForeground#ba962e
  • symbolIcon.functionForeground#bc80e2
  • symbolIcon.interfaceForeground#d78935
  • symbolIcon.keyForeground#6e96f2
  • symbolIcon.keywordForeground#ef7756
  • symbolIcon.methodForeground#bc80e2
  • symbolIcon.moduleForeground#ef7756
  • symbolIcon.namespaceForeground#ef7756
  • symbolIcon.nullForeground#6e96f2
  • symbolIcon.numberForeground#42ad6e
  • symbolIcon.objectForeground#d78935
  • symbolIcon.operatorForeground#81b1fe
  • symbolIcon.packageForeground#d78935
  • symbolIcon.propertyForeground#d78935
  • symbolIcon.referenceForeground#6e96f2
  • symbolIcon.snippetForeground#6e96f2
  • symbolIcon.stringForeground#81b1fe
  • symbolIcon.structForeground#d78935
  • symbolIcon.textForeground#81b1fe
  • symbolIcon.typeParameterForeground#81b1fe
  • symbolIcon.unitForeground#6e96f2
  • symbolIcon.variableForeground#d78935
  • tab.activeBackground#1b2832
  • tab.activeBorder#1b2832
  • tab.activeBorderTop#ec775c
  • tab.activeForeground#a6bccc
  • tab.border#3d4e5a
  • tab.hoverBackground#1b2832
  • tab.inactiveBackground#15222c
  • tab.inactiveForeground#6f8595
  • tab.unfocusedActiveBorder#1b2832
  • tab.unfocusedActiveBorderTop#3d4e5a
  • tab.unfocusedHoverBackground#5b707f1a
  • terminal.ansiBlack#4d5f6c
  • terminal.ansiBlue#6e96f2
  • terminal.ansiBrightBlack#5b707f
  • terminal.ansiBrightBlue#81b1fe
  • terminal.ansiBrightCyan#62d1e6
  • terminal.ansiBrightGreen#56c682
  • terminal.ansiBrightMagenta#e4bbf2
  • terminal.ansiBrightRed#fb987e
  • terminal.ansiBrightWhite#c6dbea
  • terminal.ansiBrightYellow#cdb048
  • terminal.ansiCyan#49c2d8
  • terminal.ansiGreen#42ad6e
  • terminal.ansiMagenta#bc80e2
  • terminal.ansiRed#ef7756
  • terminal.ansiWhite#889fb0
  • terminal.ansiYellow#ba962e
  • terminal.foreground#a6bccc
  • textBlockQuote.background#15222c
  • textBlockQuote.border#3d4e5a
  • textCodeBlock.background#5b707f66
  • textLink.activeForeground#539bf5
  • textLink.foreground#539bf5
  • textPreformat.background#5b707f66
  • textPreformat.foreground#6f8595
  • textSeparator.foreground#30404b
  • titleBar.activeBackground#1b2832
  • titleBar.activeForeground#6f8595
  • titleBar.border#3d4e5a
  • titleBar.inactiveBackground#15222c
  • titleBar.inactiveForeground#6f8595
  • tree.indentGuidesStroke#30404b
  • welcomePage.buttonBackground#30404b
  • welcomePage.buttonHoverBackground#3d4e5a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#6f8595
constant.other.placeholder, constant.character#ef7756
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language, entity#81b1fe
entity.name, meta.export.default, meta.definition.variable#eba44c
variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression#a6bccc
entity.name.function#e4bbf2
entity.name.tag, support.class.component#7edd9f
keyword#ef7756
storage, storage.type#ef7756
storage.modifier.package, storage.modifier.import, storage.type.java#a6bccc
string, string punctuation.section.embedded source#a2ccff
support#81b1fe
meta.property-name#81b1fe
variable#eba44c
variable.other#a6bccc
invalid.broken#fb987eitalic
invalid.deprecated#fb987eitalic
invalid.illegal#fb987eitalic
invalid.unimplemented#fb987eitalic
carriage-return#c6dbeaitalic underline
message.error#fb987e
string variable#81b1fe
source.regexp, string.regexp#a2ccff
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#a2ccff
string.regexp constant.character.escape#7edd9fbold
support.constant#81b1fe
support.variable#81b1fe
support.type.property-name.json#7edd9f
meta.module-reference#81b1fe
punctuation.definition.list.begin.markdown#eba44c
markup.heading, markup.heading entity.name#81b1febold
markup.quote#7edd9f
markup.italic#a6bcccitalic
markup.bold#a6bcccbold
markup.underlineunderline
markup.strikethroughstrikethrough
markup.inline.raw#81b1fe
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#fb987e
punctuation.section.embedded#ef7756
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#7edd9f
markup.changed, punctuation.definition.changed#eba44c
markup.ignored, markup.untracked#26343f
meta.diff.range#e4bbf2bold
meta.diff.header#81b1fe
meta.separator#81b1febold
meta.output#81b1fe
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#6f8595
brackethighlighter.unmatched#fb987e
constant.other.reference.link, string.other.link#a2ccff