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#7bcc38
  • activityBar.background#0d0c0c
  • activityBar.border#0d0c0c
  • activityBar.foreground#cfc6c6
  • activityBar.inactiveForeground#474747
  • activityBarBadge.background#7bcc38
  • activityBarBadge.foreground#fff5f5
  • badge.background#7bcc38
  • badge.foreground#fff5f5
  • breadcrumb.activeSelectionForeground#fff5f5
  • breadcrumb.focusForeground#fff5f5
  • breadcrumb.foreground#6c6767
  • button.background#2f2f2f
  • button.foreground#8f8c8c
  • button.hoverBackground#1b1b1b
  • debugExceptionWidget.background#0d0c0c
  • debugExceptionWidget.border#1b1b1b
  • debugIcon.breakpointCurrentStackframeForeground#7bcc38
  • debugIcon.breakpointDisabledForeground#c0b6b6
  • debugIcon.breakpointForeground#fc618d
  • debugIcon.breakpointStackframeForeground#fff5f5
  • debugIcon.breakpointUnverifiedForeground#fd9353
  • debugIcon.continueForeground#fff5f5
  • debugIcon.disconnectForeground#fff5f5
  • debugIcon.pauseForeground#fff5f5
  • debugIcon.restartForeground#7bd88f
  • debugIcon.startForeground#7bd88f
  • debugIcon.stepBackForeground#fff5f5
  • debugIcon.stepIntoForeground#fff5f5
  • debugIcon.stepOutForeground#fff5f5
  • debugIcon.stepOverForeground#fff5f5
  • debugIcon.stopForeground#fc618d
  • debugToolBar.background#141414
  • descriptionForeground#8f8c8c
  • diffEditor.insertedTextBackground#7bd88f19
  • diffEditor.removedTextBackground#fc618d19
  • dropdown.background#1b1b1b
  • dropdown.border#1b1b1b
  • dropdown.foreground#8f8c8c
  • dropdown.listBackground#373535
  • editor.background#1b1b1b
  • editor.findMatchBackground#fff5f526
  • editor.findMatchBorder#7bcc38
  • editor.findMatchHighlightBackground#fff5f526
  • editor.findMatchHighlightBorder#00000000
  • editor.findRangeHighlightBackground#fff5f50c
  • editor.findRangeHighlightBorder#00000000
  • editor.foreground#cccccc
  • editor.hoverHighlightBackground#fff5f510
  • editor.inactiveSelectionBackground#fff5f50c
  • editor.lineHighlightBackground#fff5f50c
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#373535
  • editor.rangeHighlightBorder#373535
  • editor.selectionBackground#c0b6b626
  • editor.selectionHighlightBackground#fff5f526
  • editor.selectionHighlightBorder#00000000
  • editor.wordHighlightBackground#fff5f526
  • editor.wordHighlightBorder#00000000
  • editor.wordHighlightStrongBackground#fff5f526
  • editor.wordHighlightStrongBorder#00000000
  • editorBracketMatch.background#1b1b1b
  • editorBracketMatch.border#6c6767
  • editorCodeLens.foreground#6c6767
  • editorCursor.background#1b1b1b
  • editorCursor.foreground#ffffff
  • editorError.border#00000000
  • editorError.foreground#fc618d
  • editorGroup.border#121212
  • editorGroup.dropBackground#121212bf
  • editorGroup.emptyBackground#1b1b1b
  • editorGroup.focusedEmptyBorder#121212
  • editorGroupHeader.noTabsBackground#1b1b1b
  • editorGroupHeader.tabsBackground#121212
  • editorGroupHeader.tabsBorder#1b1b1b
  • editorGutter.addedBackground#cbf075
  • editorGutter.background#1b1b1b
  • editorGutter.deletedBackground#f0758a
  • editorGutter.modifiedBackground#75f0f0
  • editorHint.border#1b1b1b
  • editorHint.foreground#948ae3
  • editorHoverWidget.background#373535
  • editorHoverWidget.border#1b1b1b
  • editorIndentGuide.background#373535
  • editorInfo.border#1b1b1b
  • editorInfo.foreground#5cb3c0
  • editorLightBulb.foreground#fce566
  • editorLightBulbAutoFix.foreground#7bd88f
  • editorLineNumber.activeForeground#c0b6b6
  • editorLineNumber.foreground#4b4b4b
  • editorLink.activeForeground#5cb3c0
  • editorMarkerNavigation.background#373535
  • editorMarkerNavigationError.background#fc618d
  • editorMarkerNavigationInfo.background#5cb3c0
  • editorMarkerNavigationWarning.background#fd9353
  • editorOverviewRuler.addedForeground#cbf075
  • editorOverviewRuler.border#1b1b1b
  • editorOverviewRuler.currentContentForeground#373535
  • editorOverviewRuler.deletedForeground#f0758a
  • editorOverviewRuler.errorForeground#f0758a
  • editorOverviewRuler.findMatchForeground#fff5f526
  • editorOverviewRuler.incomingContentForeground#373535
  • editorOverviewRuler.infoForeground#5cb3c0
  • editorOverviewRuler.modifiedForeground#90dcf3
  • editorOverviewRuler.rangeHighlightForeground#fff5f526
  • editorOverviewRuler.selectionHighlightForeground#fff5f526
  • editorOverviewRuler.warningForeground#fd9353
  • editorOverviewRuler.wordHighlightForeground#fff5f526
  • editorOverviewRuler.wordHighlightStrongForeground#fff5f526
  • editorPane.background#1b1b1b
  • editorRuler.foreground#474747
  • editorSuggestWidget.background#373535
  • editorSuggestWidget.border#373535
  • editorSuggestWidget.foreground#c0b6b6
  • editorSuggestWidget.highlightForeground#fff5f5
  • editorSuggestWidget.selectedBackground#6c6767
  • editorWarning.border#00000000
  • editorWarning.foreground#fd9353
  • editorWhitespace.foreground#474747
  • editorWidget.background#373535
  • editorWidget.border#373535
  • errorForeground#fc618d
  • extensionButton.prominentBackground#373535
  • extensionButton.prominentForeground#fff5f5
  • extensionButton.prominentHoverBackground#474747
  • focusBorder#555050
  • foreground#fff5f5
  • gitDecoration.addedResourceForeground#cbf075
  • gitDecoration.conflictingResourceForeground#fd9353
  • gitDecoration.deletedResourceForeground#f0758a
  • gitDecoration.ignoredResourceForeground#474747
  • gitDecoration.modifiedResourceForeground#90dcf3
  • gitDecoration.untrackedResourceForeground#fd9353
  • input.background#2f2f2f
  • input.border#2c2c2c
  • input.foreground#fff5f5
  • input.placeholderForeground#6c6767
  • inputOption.activeBackground#474747
  • inputOption.activeBorder#474747
  • inputValidation.errorBackground#373535
  • inputValidation.errorBorder#fc618d
  • inputValidation.errorForeground#fc618d
  • inputValidation.infoBackground#373535
  • inputValidation.infoBorder#5cb3c0
  • inputValidation.infoForeground#5cb3c0
  • inputValidation.warningBackground#373535
  • inputValidation.warningBorder#fd9353
  • inputValidation.warningForeground#fd9353
  • list.activeSelectionBackground#2f2f2f
  • list.activeSelectionForeground#cccccc
  • list.dropBackground#121212bf
  • list.errorForeground#fc618d
  • list.focusBackground#1b1b1b
  • list.focusForeground#fff5f5
  • list.highlightForeground#fff5f5
  • list.hoverBackground#121212
  • list.hoverForeground#fff5f5
  • list.inactiveFocusBackground#1b1b1b
  • list.inactiveSelectionBackground#1b1b1b
  • list.inactiveSelectionForeground#cccccc
  • list.invalidItemForeground#fc618d
  • list.warningForeground#fd9353
  • listFilterWidget.background#1b1b1b
  • listFilterWidget.noMatchesOutline#fc618d
  • listFilterWidget.outline#1b1b1b
  • merge.border#1b1b1b
  • merge.commonContentBackground#fff5f519
  • merge.commonHeaderBackground#fff5f526
  • merge.currentContentBackground#fc618d19
  • merge.currentHeaderBackground#fc618d26
  • merge.incomingContentBackground#7bd88f19
  • merge.incomingHeaderBackground#7bd88f26
  • minimap.errorHighlight#fc618d
  • minimap.warningHighlight#fd9353
  • minimapGutter.addedBackground#cbf075
  • minimapGutter.deletedBackground#f0758a
  • minimapGutter.modifiedBackground#90dcf3
  • notificationCenter.border#373535
  • notificationCenterHeader.background#373535
  • notificationCenterHeader.foreground#8f8c8c
  • notificationLink.foreground#7bcc38
  • notifications.background#373535
  • notifications.border#373535
  • notifications.foreground#c0b6b6
  • notificationsErrorIcon.foreground#fc618d
  • notificationsInfoIcon.foreground#5cb3c0
  • notificationsWarningIcon.foreground#fd9353
  • notificationToast.border#373535
  • panel.background#121212
  • panel.border#0d0c0c
  • panelTitle.activeBorder#121212
  • panelTitle.activeForeground#7bcc38
  • panelTitle.inactiveForeground#474747
  • peekView.border#1b1b1b
  • peekViewEditor.background#373535
  • peekViewEditor.matchHighlightBackground#474747
  • peekViewEditorGutter.background#373535
  • peekViewResult.background#373535
  • peekViewResult.fileForeground#8f8c8c
  • peekViewResult.lineForeground#8f8c8c
  • peekViewResult.matchHighlightBackground#474747
  • peekViewResult.selectionBackground#373535
  • peekViewResult.selectionForeground#fff5f5
  • peekViewTitle.background#373535
  • peekViewTitleDescription.foreground#8f8c8c
  • peekViewTitleLabel.foreground#fff5f5
  • pickerGroup.border#1b1b1b
  • pickerGroup.foreground#474747
  • problemsErrorIcon.foreground#fc618d
  • problemsInfoIcon.foreground#5cb3c0
  • problemsWarningIcon.foreground#fd9353
  • progressBar.background#373535
  • scrollbar.shadow#00000055
  • scrollbarSlider.activeBackground#fff5f512
  • scrollbarSlider.background#fff5f512
  • scrollbarSlider.hoverBackground#fff5f512
  • selection.background#c0b6b626
  • settings.checkboxBackground#373535
  • settings.checkboxBorder#373535
  • settings.checkboxForeground#fff5f5
  • settings.dropdownBackground#373535
  • settings.dropdownBorder#373535
  • settings.dropdownForeground#fff5f5
  • settings.dropdownListBorder#8f8c8c
  • settings.headerForeground#7bcc38
  • settings.modifiedItemIndicator#7bcc38
  • settings.numberInputBackground#373535
  • settings.numberInputBorder#373535
  • settings.numberInputForeground#fff5f5
  • settings.textInputBackground#373535
  • settings.textInputBorder#373535
  • settings.textInputForeground#fff5f5
  • sideBar.background#121212
  • sideBar.border#0d0c0c
  • sideBar.dropBackground#121212bf
  • sideBar.foreground#8f8c8c
  • sideBarSectionHeader.background#121212
  • sideBarSectionHeader.foreground#cfc6c6
  • sideBarTitle.foreground#474747
  • statusBar.background#121212
  • statusBar.border#0d0c0c
  • statusBar.debuggingBackground#6c6767
  • statusBar.debuggingBorder#121212
  • statusBar.debuggingForeground#fff5f5
  • statusBar.foreground#6c6767
  • statusBar.noFolderBackground#121212
  • statusBar.noFolderBorder#0d0c0c
  • statusBar.noFolderForeground#6c6767
  • statusBarItem.activeBackground#1b1b1b
  • statusBarItem.hoverBackground#1b1b1b
  • statusBarItem.prominentBackground#373535
  • statusBarItem.prominentHoverBackground#373535
  • statusBarItem.remoteBackground#121212
  • statusBarItem.remoteForeground#7bcc38
  • tab.activeBackground#1b1b1b
  • tab.activeBorder#1b1b1b
  • tab.activeBorderTop#7bcc38
  • tab.activeForeground#f4f4f4
  • tab.border#121212
  • tab.hoverBackground#1b1b1b
  • tab.hoverBorder#1b1b1b
  • tab.hoverForeground#dddddd
  • tab.inactiveBackground#121212
  • tab.inactiveForeground#606060
  • tab.unfocusedActiveBorder#121212
  • tab.unfocusedActiveBorderTop#606060
  • tab.unfocusedActiveForeground#8f8c8c
  • tab.unfocusedHoverBackground#1b1b1b
  • tab.unfocusedHoverForeground#dddddd
  • tab.unfocusedInactiveBackground#121212
  • tab.unfocusedInactiveForeground#606060
  • terminal.ansiBlack#282a36
  • terminal.ansiBlue#8897f4
  • terminal.ansiBrightBlack#414458
  • terminal.ansiBrightBlue#556fff
  • terminal.ansiBrightCyan#3fdcee
  • terminal.ansiBrightGreen#18e3c8
  • terminal.ansiBrightMagenta#b043d1
  • terminal.ansiBrightRed#ff4971
  • terminal.ansiBrightWhite#fdfdfd
  • terminal.ansiBrightYellow#ff8037
  • terminal.ansiCyan#79e6f3
  • terminal.ansiGreen#5adecd
  • terminal.ansiMagenta#c574dd
  • terminal.ansiRed#f37f97
  • terminal.ansiWhite#bebec1
  • terminal.ansiYellow#f2a272
  • terminal.background#101010
  • terminal.foreground#94a3a5
  • terminal.selectionBackground#48b9c750
  • terminalCursor.background#00000000
  • terminalCursor.foreground#f6f6f6
  • textBlockQuote.background#373535
  • textBlockQuote.border#373535
  • textCodeBlock.background#373535
  • textLink.activeForeground#fff5f5
  • textLink.foreground#7bcc38
  • textPreformat.foreground#fff5f5
  • textSeparator.foreground#6c6767
  • titleBar.activeBackground#121212
  • titleBar.activeForeground#8f8c8c
  • titleBar.border#0d0c0c
  • titleBar.inactiveBackground#121212
  • titleBar.inactiveForeground#474747
  • tree.indentGuidesStroke#fff5f515
  • walkThrough.embeddedEditorBackground#121212
  • welcomePage.buttonBackground#121212
  • welcomePage.buttonHoverBackground#0d0c0c
  • widget.shadow#0d0c0c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment keyword, comment markup.underline.link, comment string, comment punctuation.definition, comment punctuation, comment text#5c5757italic
comment storage.type#5c5757
comment entity.name.type#5c5757
comment variable, comment variable.other#5c5757
comment.git-status.header.remote#fc618d
comment.git-status.header.local#5cb3c0
comment.other.git-status.head#d7d7d7
constant#c8e1ff
constant.other#c8e1ff
constant.other.symbol#5cb3c0
constant.numeric#c8e1ff
entity.name#fff5f5
entity.name.function, entity.name.function-call#b392f0
entity.name.section#7bcc38
entity.name.tag, entity.name.tag.js.jsx support.class.component.js.jsx, entity.name.tag support.class.component#b392f0
entity.other.attribute-name#5cb3c0italic
entity.other.attribute-name.class.css, entity.other.attribute-name.parent-selector-suffix.css, entity.other.attribute-name.parent-selector-suffix.css punctuation.definition.entity.css, entity.other.attribute-name.css#b392f0italic
entity.other.attribute-name.id.css#5ae6b7italic
entity.other.attribute-name.pseudo-class.css, entity.other.pseudo-class.css, entity.other.pseudo-element.css#5cb3c0italic
entity.other.git-status.hex#948ae3
invaliditalic
keyword#7bcc38
keyword.operator, keyword.operator.member, keyword.operator.new#7bcc38
keyword.other.substitution#8b888f
markup.italicitalic
markup.boldbold
markup.heading#7bcc38
markup.raw#fd9353
markup.underlineunderline
markup.underline.link#5cb3c0
markup.inserted, markup.inserted punctuation.definition.inserted#7bd88f
markup.deleted, markup.deleted punctuation.definition.deleted#fc618d
markup.changed, markup.changed punctuation.definition.changed#fce566
markup.ignored, markup.ignored punctuation.definition.ignored#8b888f
markup.untracked#8b888f
markup.quoteitalic
meta.brace.round, meta.brace.square, meta.brace.curly, meta.delimiter.comma.js, meta.function-call.without-arguments.js, meta.function-call.method.without-arguments.js#888f88
meta.function-call.python, meta.function-call.arguments.python meta.function-call.python#b392f0
meta.function-call.python meta.function-call.arguments.python#fff5f5
meta.object.member#fff5f5
meta.diff.git-diff.header#fce566
meta.separator.markdown#8b888f
punctuation#8b888f
punctuation.definition.variable, punctuation.definition.keyword.scss, punctuation.definition.entity.css#bab6c0
source#d7d7d7
source.scss, source.sass#8f8888
source.sass variable.other, source.sass variable.sass, source.scss variable.other, source.scss variable.scss, source.scss variable.sass, source.css variable.other, source.css variable.scss, source.less variable.other, source.less variable.other.less, source.less variable.declaration.less#fff5f5italic
source.git-show.commit.sha#948ae3
source.git-show.author, source.git-show.date, source.git-diff.command, source.git-diff.command meta.diff.git-diff.header.from-file, source.git-diff.command meta.diff.git-diff.header.to-file#8b888f
source.git-show meta.diff.git-diff.header.extended.index.from-sha, source.git-show meta.diff.git-diff.header.extended.index.to-sha#948ae3
source.git-show meta.diff.range.unified#fd9353
source.git-show meta.diff.header.from-file, source.git-show meta.diff.header.to-file#8f8888
storage#5cb3c0
storage.modifier, storage.type.modifier#7bcc38italic
storage.type#5cb3c0italic
storage.type.function.arrow#7bcc38
string#e69850
string source#fff5f5
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#7bcc38
support.constant#5cb3c0
support.function#5ae6b7
support.type, entity.name.type.object.console#5cb3c0italic
support.type.property-name#c8e1ff
support.variable#5cb3c0
support.class#5cb3c0
text#fff5f5
variable#fff5f5
variable.parameter, parameters variable.function#bab6c0italic
variable.language, variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python#bab6c0italic
variable.other.object#bab6c0
variable.other.constant, variable.other.property, variable.other.object.property#c8e1ff
token.info-token#316BCD
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6