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#f29718
  • activityBar.background#f8f9fa
  • activityBar.border#f8f9fa
  • activityBar.foreground#828e9fcc
  • activityBar.inactiveForeground#828e9f99
  • activityBarBadge.background#f29718
  • activityBarBadge.foreground#804b00
  • activityBarTop.activeBorder#f29718
  • activityBarTop.foreground#788597
  • badge.background#f2971833
  • badge.foreground#ea9216
  • button.background#007acc
  • button.border#804b001a
  • button.foreground#ffffff
  • button.hoverBackground#005a9e
  • button.secondaryBackground#828e9f33
  • button.secondaryForeground#5c6166
  • button.secondaryHoverBackground#828e9f80
  • button.separator#804b004d
  • chat.checkpointSeparator#787b8099
  • chat.editedFileForeground#478acc
  • chat.requestBackground#e65050
  • chat.requestBorder#56728f1f
  • chat.requestBubbleBackground#6b7d8f1f
  • chat.requestBubbleHoverBackground#56728f1f
  • chat.slashCommandBackground#55b4d433
  • chat.slashCommandForeground#55b4d4
  • commandCenter.activeBackground#56728f1f
  • commandCenter.activeBorder#56728f00
  • commandCenter.activeForeground#828e9f
  • commandCenter.background#fcfcfc
  • commandCenter.border#6b7d8f1f
  • commandCenter.foreground#828e9f
  • commandCenter.inactiveBorder#6b7d8f1f
  • debugConsoleInputIcon.foreground#f29718
  • debugExceptionWidget.background#fafafa
  • debugExceptionWidget.border#6b7d8f1f
  • debugIcon.breakpointDisabledForeground#f2a19180
  • debugIcon.breakpointForeground#f2a191
  • debugToolBar.background#fafafa
  • descriptionForeground#828e9f
  • diffEditor.diagonalFill#6b7d8f1f
  • diffEditor.insertedTextBackground#6cbf431f
  • diffEditor.removedTextBackground#ff73831f
  • dropdown.background#fafafa
  • dropdown.border#6b7d8f1f
  • dropdown.foreground#828e9f
  • editor.background#f8f9fa
  • editor.findMatchBackground#ffe294
  • editor.findMatchHighlightBackground#ffe29480
  • editor.foreground#5c6166
  • editor.inactiveSelectionBackground#035bd612
  • editor.lineHighlightBackground#828e9f1a
  • editor.rangeHighlightBackground#ffe29433
  • editor.selectionBackground#035bd626
  • editor.selectionHighlightBackground#6cbf4326
  • editor.selectionHighlightBorder#6cbf4300
  • editor.snippetTabstopHighlightBackground#6cbf4333
  • editor.wordHighlightBackground#478acc14
  • editor.wordHighlightBorder#478acc80
  • editor.wordHighlightStrongBackground#6cbf4314
  • editor.wordHighlightStrongBorder#6cbf4380
  • editorBracketMatch.background#828e9f4d
  • editorBracketMatch.border#828e9f4d
  • editorCodeLens.foreground#787b8099
  • editorCursor.foreground#f29718
  • editorError.foreground#e65050
  • editorGroup.background#fafafa
  • editorGroup.border#6b7d8f1f
  • editorGroupHeader.noTabsBackground#f8f9fa
  • editorGroupHeader.tabsBackground#f8f9fa
  • editorGroupHeader.tabsBorder#f8f9fa
  • editorGutter.addedBackground#6cbf43
  • editorGutter.deletedBackground#ff7383
  • editorGutter.modifiedBackground#478acc
  • editorHoverWidget.background#fafafa
  • editorHoverWidget.border#6b7d8f1f
  • editorIndentGuide.activeBackground#828e9f59
  • editorIndentGuide.background#828e9f2e
  • editorLineNumber.activeForeground#828e9fcc
  • editorLineNumber.foreground#828e9f66
  • editorLink.activeForeground#f29718
  • editorMarkerNavigation.background#fafafa
  • editorOverviewRuler.addedForeground#6cbf43
  • editorOverviewRuler.border#6b7d8f1f
  • editorOverviewRuler.bracketMatchForeground#828e9fb3
  • editorOverviewRuler.deletedForeground#ff7383
  • editorOverviewRuler.errorForeground#e65050
  • editorOverviewRuler.findMatchForeground#ffe294
  • editorOverviewRuler.modifiedForeground#478acc
  • editorOverviewRuler.warningForeground#f29718
  • editorOverviewRuler.wordHighlightForeground#478acc66
  • editorOverviewRuler.wordHighlightStrongForeground#6cbf4366
  • editorRuler.foreground#828e9f2e
  • editorStickyScroll.border#6b7d8f1f
  • editorStickyScroll.shadow#6b7d8f12
  • editorStickyScrollHover.background#6b7d8f1f
  • editorSuggestWidget.background#fafafa
  • editorSuggestWidget.border#6b7d8f1f
  • editorSuggestWidget.highlightForeground#f29718
  • editorSuggestWidget.selectedBackground#56728f1f
  • editorWarning.foreground#f29718
  • editorWhitespace.foreground#828e9f66
  • editorWidget.background#fafafa
  • editorWidget.border#6b7d8f1f
  • editorWidget.resizeBorder#fafafa
  • errorForeground#e65050
  • extensionButton.prominentBackground#f29718
  • extensionButton.prominentForeground#804b00
  • extensionButton.prominentHoverBackground#ee9417
  • focusBorder#f29718
  • foreground#828e9f
  • gitDecoration.conflictingResourceForeground
  • gitDecoration.deletedResourceForeground#ff7383
  • gitDecoration.ignoredResourceForeground#828e9f80
  • gitDecoration.modifiedResourceForeground#478acc
  • gitDecoration.submoduleResourceForeground#a37acc
  • gitDecoration.untrackedResourceForeground#6cbf43
  • icon.foreground#828e9f
  • inlineChat.background#fafafa
  • inlineChat.border#6b7d8f1f
  • inlineChat.foreground#5c6166
  • inlineChat.shadow#6b7d8f12
  • inlineChatDiff.inserted#6cbf4333
  • inlineChatDiff.removed#ff738333
  • inlineChatInput.background#fcfcfc
  • inlineChatInput.border#6b7d8f1f
  • inlineChatInput.focusBorder#f29718b3
  • inlineChatInput.placeholderForeground#828e9f80
  • inlineEdit.gutterIndicator.background#6b7d8f1f
  • inlineEdit.gutterIndicator.primaryBackground#f297181a
  • inlineEdit.gutterIndicator.primaryBorder#f29718
  • inlineEdit.gutterIndicator.primaryForeground#f29718
  • inlineEdit.gutterIndicator.secondaryBackground#828e9f1a
  • inlineEdit.gutterIndicator.secondaryBorder#828e9f80
  • inlineEdit.gutterIndicator.secondaryForeground#828e9f
  • inlineEdit.gutterIndicator.successfulBackground#6cbf431a
  • inlineEdit.gutterIndicator.successfulBorder#6cbf43
  • inlineEdit.gutterIndicator.successfulForeground#6cbf43
  • inlineEdit.modifiedBackground#6cbf431a
  • inlineEdit.modifiedBorder#6cbf4380
  • inlineEdit.modifiedChangedLineBackground#6cbf4326
  • inlineEdit.modifiedChangedTextBackground#6cbf4340
  • inlineEdit.originalBackground#ff73831a
  • inlineEdit.originalBorder#ff738380
  • inlineEdit.originalChangedLineBackground#ff738326
  • inlineEdit.originalChangedTextBackground#ff738340
  • input.background#fcfcfc
  • input.border#828e9f33
  • input.foreground#5c6166
  • input.placeholderForeground#828e9f80
  • inputOption.activeBackground#f297181a
  • inputOption.activeBorder#f2971833
  • inputOption.activeForeground#f29718
  • inputOption.hoverBackground#828e9f33
  • inputValidation.errorBackground#fcfcfc
  • inputValidation.errorBorder#e65050
  • inputValidation.infoBackground#f8f9fa
  • inputValidation.infoBorder#55b4d4
  • inputValidation.warningBackground#f8f9fa
  • inputValidation.warningBorder#eba400
  • keybindingLabel.background#828e9f1a
  • keybindingLabel.border#5c61661a
  • keybindingLabel.bottomBorder#5c61661a
  • keybindingLabel.foreground#5c6166
  • list.activeSelectionBackground#56728f1f
  • list.activeSelectionForeground#5c6166
  • list.deemphasizedForeground#e65050
  • list.errorForeground#e65050
  • list.filterMatchBackground#fad77880
  • list.filterMatchBorder#ffe29480
  • list.focusBackground#56728f1f
  • list.focusForeground#5c6166
  • list.focusOutline#56728f1f
  • list.highlightForeground#f29718
  • list.hoverBackground#56728f1f
  • list.inactiveSelectionBackground#6b7d8f1f
  • list.inactiveSelectionForeground#828e9f
  • list.invalidItemForeground#828e9f4d
  • listFilterWidget.background#fafafa
  • listFilterWidget.noMatchesOutline#e65050
  • listFilterWidget.outline#f29718
  • minimap.background#f8f9fa
  • minimap.errorHighlight#e65050
  • minimap.findMatchHighlight#ffe294
  • minimap.selectionHighlight#035bd626
  • minimapGutter.addedBackground#6cbf43
  • minimapGutter.deletedBackground#ff7383
  • minimapGutter.modifiedBackground#478acc
  • multiDiffEditor.background#f8f9fa
  • multiDiffEditor.border#6b7d8f1f
  • multiDiffEditor.headerBackground#fafafa
  • panel.background#f8f9fa
  • panel.border#6b7d8f1f
  • panelStickyScroll.border#6b7d8f1f
  • panelStickyScroll.shadow#6b7d8f12
  • panelTitle.activeBorder#f29718
  • panelTitle.activeForeground#5c6166
  • panelTitle.inactiveForeground#828e9f
  • peekView.border#56728f1f
  • peekViewEditor.background#fafafa
  • peekViewEditor.matchHighlightBackground#ffe29480
  • peekViewEditor.matchHighlightBorder#fad77880
  • peekViewResult.background#fafafa
  • peekViewResult.fileForeground#5c6166
  • peekViewResult.lineForeground#828e9f
  • peekViewResult.matchHighlightBackground#ffe29480
  • peekViewResult.selectionBackground#56728f1f
  • peekViewTitle.background#56728f1f
  • peekViewTitleDescription.foreground#828e9f
  • peekViewTitleLabel.foreground#5c6166
  • pickerGroup.border#6b7d8f1f
  • pickerGroup.foreground#828e9f80
  • profileBadge.background#f29718
  • profileBadge.foreground#804b00
  • progressBar.background#f29718
  • scrollbar.shadow#6b7d8f00
  • scrollbarSlider.activeBackground#828e9fb3
  • scrollbarSlider.background#828e9f66
  • scrollbarSlider.hoverBackground#828e9f99
  • selection.background#035bd626
  • settings.headerForeground#5c6166
  • settings.modifiedItemIndicator#478acc
  • sideBar.background#f8f9fa
  • sideBar.border#f8f9fa
  • sideBarSectionHeader.background#f8f9fa
  • sideBarSectionHeader.border#f8f9fa
  • sideBarSectionHeader.foreground#828e9f
  • sideBarStickyScroll.border#6b7d8f1f
  • sideBarStickyScroll.shadow#6b7d8f12
  • sideBarTitle.foreground#828e9f
  • statusBar.background#f8f9fa
  • statusBar.border#f8f9fa
  • statusBar.debuggingBackground#f2a191
  • statusBar.debuggingForeground#fcfcfc
  • statusBar.foreground#828e9f
  • statusBar.noFolderBackground#fafafa
  • statusBarItem.activeBackground#828e9f33
  • statusBarItem.hoverBackground#828e9f33
  • statusBarItem.prominentBackground#6b7d8f1f
  • statusBarItem.prominentHoverBackground#00000030
  • statusBarItem.remoteBackground#f29718
  • statusBarItem.remoteForeground#804b00
  • symbolIcon.arrayForeground#22a4e6
  • symbolIcon.booleanForeground#a37acc
  • symbolIcon.classForeground#22a4e6
  • symbolIcon.colorForeground#e59645
  • symbolIcon.constantForeground#a37acc
  • symbolIcon.constructorForeground#eba400
  • symbolIcon.enumeratorForeground#22a4e6
  • symbolIcon.enumeratorMemberForeground#a37acc
  • symbolIcon.eventForeground#e59645
  • symbolIcon.fieldForeground#f07171
  • symbolIcon.fileForeground#828e9f
  • symbolIcon.folderForeground#828e9f
  • symbolIcon.functionForeground#eba400
  • symbolIcon.interfaceForeground#22a4e6
  • symbolIcon.keyForeground#55b4d4
  • symbolIcon.keywordForeground#fa8532
  • symbolIcon.methodForeground#eba400
  • symbolIcon.moduleForeground#86b300
  • symbolIcon.namespaceForeground#86b300
  • symbolIcon.nullForeground#a37acc
  • symbolIcon.numberForeground#a37acc
  • symbolIcon.objectForeground#22a4e6
  • symbolIcon.operatorForeground#f2a191
  • symbolIcon.packageForeground#86b300
  • symbolIcon.propertyForeground#f07171
  • symbolIcon.referenceForeground#22a4e6
  • symbolIcon.snippetForeground#e59645
  • symbolIcon.stringForeground#86b300
  • symbolIcon.structForeground#22a4e6
  • symbolIcon.textForeground#5c6166
  • symbolIcon.typeParameterForeground#22a4e6
  • symbolIcon.unitForeground#a37acc
  • symbolIcon.variableForeground#5c6166
  • tab.activeBackground#f8f9fa
  • tab.activeBorder#f29718
  • tab.activeForeground#5c6166
  • tab.border#f8f9fa
  • tab.inactiveBackground#f8f9fa
  • tab.inactiveForeground#828e9f
  • tab.unfocusedActiveBorder#828e9f
  • tab.unfocusedActiveForeground#828e9f
  • tab.unfocusedInactiveForeground#828e9f
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#21a1e2
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#22a4e6
  • terminal.ansiBrightCyan#4cbf99
  • terminal.ansiBrightGreen#86b300
  • terminal.ansiBrightMagenta#a37acc
  • terminal.ansiBrightRed#f07171
  • terminal.ansiBrightWhite#d1d1d1
  • terminal.ansiBrightYellow#eba400
  • terminal.ansiCyan#4abc96
  • terminal.ansiGreen#6cbf43
  • terminal.ansiMagenta#a176cb
  • terminal.ansiRed#f06b6c
  • terminal.ansiWhite#c7c7c7
  • terminal.ansiYellow#e7a100
  • terminal.background#f8f9fa
  • terminal.foreground#5c6166
  • terminalCommandGuide.foreground#828e9f4d
  • terminalStickyScroll.border#6b7d8f1f
  • terminalStickyScroll.shadow#6b7d8f12
  • terminalStickyScrollHover.background#6b7d8f1f
  • textBlockQuote.background#fafafa
  • textLink.activeForeground#f29718
  • textLink.foreground#f29718
  • textPreformat.foreground#5c6166
  • titleBar.activeBackground#f8f9fa
  • titleBar.activeForeground#828e9f
  • titleBar.border#f8f9fa
  • titleBar.inactiveBackground#f8f9fa
  • titleBar.inactiveForeground#828e9fb3
  • toolbar.hoverBackground#828e9f4d
  • tree.indentGuidesStroke#828e9f59
  • walkThrough.embeddedEditorBackground#fafafa
  • welcomePage.buttonBackground#f2971866
  • welcomePage.progress.background#828e9f1a
  • welcomePage.tileBackground#f8f9fa
  • welcomePage.tileShadow#6b7d8f12
  • widget.border#6b7d8f1f
  • widget.shadow#6b7d8f12

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#5c6166
comment#787b8099italic
string, constant.other.symbol#86b300
string.regexp, constant.character, constant.other#4cbf99
constant.numeric#a37acc
constant.language#a37acc
variable, variable.parameter.function-call#5c6166
variable.member#f07171
variable.language#55b4d4italic
storage#fa8532
keyword#fa8532
keyword.operator#f2a191
punctuation.separator, punctuation.terminator#5c6166b3
punctuation.section#5c6166
punctuation.accessor#f2a191
punctuation.definition.template-expression#fa8532
punctuation.section.embedded#fa8532
meta.embedded#5c6166
source.java storage.type, source.haskell storage.type, source.c storage.type#22a4e6
entity.other.inherited-class#55b4d4
storage.type.function#fa8532
source.java storage.type.primitive#55b4d4
entity.name.function#eba400
variable.parameter, meta.parameter#a37acc
variable.function, variable.annotation, meta.function-call.generic, support.function.go#eba400
support.function, support.macro#f07171
entity.name.import, entity.name.package#86b300
entity.name#22a4e6
entity.name.tag, meta.tag.sgml#55b4d4
support.class.component#22a4e6
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#55b4d480
entity.other.attribute-name#eba400
entity.other.attribute-name.pseudo-class#4cbf99
support.constant#f2a191italic
support.type, support.class, source.go storage.type#55b4d4
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation, entity.name.function.decorator#e59645
invalid#e65050
meta.diff, meta.diff.header#c594c5
source.ruby variable.other.readwrite#eba400
source.css entity.name.tag, source.sass entity.name.tag, source.scss entity.name.tag, source.less entity.name.tag, source.stylus entity.name.tag#22a4e6
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type#787b8099
support.type.property-name#55b4d4normal
constant.numeric.line-number.find-in-files - match#787b8099
constant.numeric.line-number.match#fa8532
entity.name.filename.find-in-files#86b300
message.error#e65050
markup.heading, markup.heading entity.name#86b300bold
markup.underline.link, string.other.link#55b4d4
markup.italic, emphasis#f07171italic
markup.bold#f07171bold
markup.underlineunderline
markup.italic markup.bold, markup.bold markup.italicbold italic
markup.raw
markup.raw.inline
meta.separator#787b8099bold
markup.quote#4cbf99italic
markup.list punctuation.definition.list.begin#eba400
markup.inserted#6cbf43
markup.changed#478acc
markup.deleted#ff7383
markup.strike#e59645
markup.strongbold
markup.table#55b4d4
text.html.markdown markup.inline.raw#f2a191
text.html.markdown meta.dummy.line-break#787b8099
punctuation.definition.markdown#787b8099