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.activeBackground#34504C
  • activityBar.activeBorder#57B289
  • activityBar.background#293D3A
  • activityBar.foreground#BDD1C7
  • activityBarBadge.background#57B289
  • activityBarBadge.foreground#293D3A
  • badge.background#57B289
  • badge.foreground#293D3A
  • button.background#57B289ee
  • button.foreground#293D3A
  • button.hoverBackground#57B289
  • button.secondaryBackground#95B1A7
  • button.secondaryForeground#BDD1C7
  • button.secondaryHoverBackground#BDD1C767
  • charts.blue#95B1A7
  • charts.foreground#BDD1C7
  • charts.green#BDD1C8
  • charts.lines#57B289
  • charts.orange#C46764
  • charts.purple#BDD1C8
  • charts.red#C46764
  • charts.yellow#57B289
  • debugConsole.errorForeground#C46764
  • debugConsole.infoForeground#57B289
  • debugConsole.sourceForeground#BDD1C8
  • debugConsole.warningForeground#57B289
  • debugConsoleInputIcon.foreground#95B1A7
  • debugExceptionWidget.background#BDD1C767
  • debugExceptionWidget.border#293D3A
  • debugToolBar.background#34504C
  • descriptionForeground#BDD1C7e6
  • diffEditor.insertedTextBackground#95B1A722
  • diffEditor.removedTextBackground#C467644d
  • dropdown.background#34504C
  • dropdown.border#34504C
  • dropdown.foreground#BDD1C7
  • editor.background#293D3A
  • editor.findMatchBackground#95B1A722
  • editor.findMatchHighlightBackground#95B1A722
  • editor.findRangeHighlightBackground#95B1A722
  • editor.focusedStackFrameHighlightBackground#BDD1C8
  • editor.foreground#BDD1C7
  • editor.hoverHighlightBackground#34504C
  • editor.inactiveSelectionBackground#BDD1C767
  • editor.inlineValuesBackground#BDD1C767
  • editor.inlineValuesForeground#9EDCB4
  • editor.lineHighlightBackground#34504C
  • editor.lineHighlightBorder#34504C
  • editor.rangeHighlightBackground#95B1A722
  • editor.selectionBackground#95B1A722
  • editor.selectionHighlightBackground#95B1A722
  • editor.stackFrameHighlightBackground#BDD1C8
  • editor.wordHighlightBackground#95B1A722
  • editor.wordHighlightStrongBackground#95B1A722
  • editorBracketMatch.background#293D3A00
  • editorBracketMatch.border#57B289
  • editorCodeLens.foreground#BDD1C767
  • editorCursor.foreground#BDD1C7
  • editorError.border#C4676400
  • editorError.foreground#C46764
  • editorGroup.border#34504C01
  • editorGroup.dropBackground#34504C99
  • editorGroupHeader.border#34504C00
  • editorGroupHeader.noTabsBackground#293D3A
  • editorGroupHeader.tabsBackground#293D3A
  • editorGroupHeader.tabsBorder#34504C00
  • editorGutter.addedBackground#BDD1C8
  • editorGutter.background#293D3A
  • editorGutter.deletedBackground#C46764
  • editorGutter.modifiedBackground#57B289
  • editorHint.border#57B28900
  • editorHint.foreground#57B289
  • editorHoverWidget.background#34504C
  • editorHoverWidget.border#34504C
  • editorIndentGuide.activeBackground#95B1A744
  • editorIndentGuide.background#95B1A722
  • editorLineNumber.activeForeground#BDD1C7
  • editorLineNumber.foreground#BDD1C767
  • editorLink.activeForeground#57B289
  • editorMarkerNavigation.background#BDD1C8c0
  • editorMarkerNavigationError.background#C46764c0
  • editorMarkerNavigationWarning.background#57B289c0
  • editorOverviewRuler.addedForeground#BDD1C8
  • editorOverviewRuler.border#34504C
  • editorOverviewRuler.currentContentForeground#34504C
  • editorOverviewRuler.deletedForeground#C46764
  • editorOverviewRuler.errorForeground#C46764
  • editorOverviewRuler.findMatchForeground#57B28966
  • editorOverviewRuler.incomingContentForeground#34504C
  • editorOverviewRuler.infoForeground#95B1A7
  • editorOverviewRuler.modifiedForeground#57B289
  • editorOverviewRuler.rangeHighlightForeground#57B28966
  • editorOverviewRuler.selectionHighlightForeground#57B28966
  • editorOverviewRuler.warningForeground#57B289
  • editorOverviewRuler.wordHighlightForeground#57B28966
  • editorOverviewRuler.wordHighlightStrongForeground#57B28966
  • editorRuler.foreground#95B1A7
  • editorSuggestWidget.background#293D3A
  • editorSuggestWidget.border#34504C
  • editorSuggestWidget.focusHighlightForeground#57B289
  • editorSuggestWidget.foreground#BDD1C7
  • editorSuggestWidget.highlightForeground#57B289
  • editorSuggestWidget.selectedBackground#95B1A722
  • editorSuggestWidget.selectedForeground#BDD1C7
  • editorWarning.border#57B28900
  • editorWarning.foreground#57B289
  • editorWhitespace.foreground#BDD1C767
  • editorWidget.background#293D3A
  • editorWidget.border#34504C
  • errorForeground#C46764
  • extensionButton.prominentBackground#95B1A7
  • extensionButton.prominentForeground#BDD1C7
  • extensionButton.prominentHoverBackground#BDD1C767
  • focusBorder#34504C
  • foreground#BDD1C7
  • gitDecoration.conflictingResourceForeground#BDD1C8
  • gitDecoration.deletedResourceForeground#C46764
  • gitDecoration.ignoredResourceForeground#BDD1C766
  • gitDecoration.modifiedResourceForeground#57B289
  • gitDecoration.stageDeletedResourceForeground#C46764
  • gitDecoration.stageModifiedResourceForeground#57B289
  • gitDecoration.submoduleResourceForeground#6AC885
  • gitDecoration.untrackedResourceForeground#BDD1C8
  • input.background#34504C
  • input.border#34504C
  • input.foreground#BDD1C7
  • input.placeholderForeground#BDD1C799
  • inputOption.activeBackground#95B1A722
  • inputOption.activeBorder#BDD1C8
  • inputOption.activeForeground#9EDCB4
  • inputValidation.errorBackground#C46764
  • inputValidation.errorBorder#C46764
  • inputValidation.infoBackground#95B1A7
  • inputValidation.infoBorder#95B1A7
  • inputValidation.warningBackground#C46764
  • inputValidation.warningBorder#C46764
  • keybindingLabel.background#BDD1C767
  • keybindingLabel.border#BDD1C767
  • keybindingLabel.bottomBorder#BDD1C767
  • keybindingLabel.foreground#BDD1C7
  • list.activeSelectionBackground#95B1A722
  • list.activeSelectionForeground#BDD1C7
  • list.dropBackground#57B28999
  • list.errorForeground#C46764
  • list.focusBackground#95B1A722
  • list.focusForeground#BDD1C7
  • list.focusHighlightForeground#6AC885
  • list.highlightForeground#57B289
  • list.hoverBackground#34504C
  • list.hoverForeground#9EDCB4
  • list.inactiveFocusBackground#95B1A722
  • list.inactiveSelectionBackground#95B1A722
  • list.inactiveSelectionForeground#BDD1C7
  • list.warningForeground#57B289
  • merge.border#34504C00
  • merge.currentContentBackground#95B1A74d
  • merge.currentHeaderBackground#95B1A722
  • merge.incomingContentBackground#6AC8854d
  • merge.incomingHeaderBackground#6AC88566
  • minimap.background#293D3A
  • minimap.errorHighlight#C46764cc
  • minimap.findMatchHighlight#57B289
  • minimap.selectionHighlight#57B289cc
  • minimap.warningHighlight#57B289cc
  • minimapGutter.addedBackground#BDD1C8
  • minimapGutter.deletedBackground#C46764
  • minimapGutter.modifiedBackground#57B289
  • minimapSlider.activeBackground#95B1A7aa
  • minimapSlider.background#95B1A799
  • minimapSlider.hoverBackground#95B1A7aa
  • notificationCenter.border#34504C00
  • notificationCenterHeader.background#293D3A
  • notificationCenterHeader.foreground#57B289
  • notificationLink.foreground#57B289
  • notifications.background#34504C
  • notifications.border#293D3A
  • notifications.foreground#BDD1C7
  • notificationToast.border#34504C00
  • panel.background#293D3A
  • panel.border#34504C
  • panelTitle.activeBorder#57B28900
  • panelTitle.activeForeground#57B289
  • panelTitle.inactiveForeground#BDD1C7
  • peekView.border#BDD1C767
  • peekViewEditor.background#293D3A
  • peekViewEditor.matchHighlightBackground#57B2894d
  • peekViewEditorGutter.background#293D3A
  • peekViewResult.background#293D3A
  • peekViewResult.fileForeground#57B289
  • peekViewResult.lineForeground#BDD1C766
  • peekViewResult.matchHighlightBackground#57B289cc
  • peekViewResult.selectionBackground#95B1A7
  • peekViewResult.selectionForeground#BDD1C7
  • peekViewTitle.background#34504C
  • peekViewTitleDescription.foreground#BDD1C7
  • peekViewTitleLabel.foreground#57B289
  • pickerGroup.border#34504C
  • pickerGroup.foreground#57B289
  • progressBar.background#57B289
  • quickInputList.focusBackground#95B1A722
  • quickInputList.focusForeground#BDD1C7
  • sash.hoverBorder#57B289
  • scrollbar.shadow#00000066
  • scrollbarSlider.activeBackground#95B1A733
  • scrollbarSlider.background#95B1A723
  • scrollbarSlider.hoverBackground#95B1A733
  • selection.background#57B28999
  • sideBar.background#293D3A
  • sideBar.border#34504C
  • sideBar.foreground#BDD1C7
  • sideBarSectionHeader.background#34504C
  • sideBarSectionHeader.foreground#BDD1C7
  • sideBarTitle.foreground#BDD1C7
  • statusBar.background#34504C
  • statusBar.border#34504C00
  • statusBar.debuggingBackground#95B1A722
  • statusBar.debuggingForeground#BDD1C7
  • statusBar.foreground#BDD1C7
  • statusBar.noFolderBackground#95B1A722
  • statusBar.noFolderForeground#BDD1C7
  • statusBarItem.activeBackground#BDD1C767
  • statusBarItem.errorBackground#95B1A722
  • statusBarItem.errorForeground#C46764
  • statusBarItem.hoverBackground#95B1A733
  • statusBarItem.prominentBackground#95B1A722
  • statusBarItem.prominentHoverBackground#95B1A7
  • tab.activeBackground#34504C
  • tab.activeBorder#57B28900
  • tab.activeBorderTop#57B28900
  • tab.activeForeground#BDD1C7
  • tab.border#34504C00
  • tab.hoverBackground#34504Ccc
  • tab.hoverBorder#57B28900
  • tab.inactiveBackground#293D3A
  • tab.inactiveForeground#BDD1C766
  • tab.lastPinnedBorder#BDD1C767
  • tab.unfocusedActiveBorder#57B28900
  • tab.unfocusedActiveBorderTop#57B28900
  • tab.unfocusedActiveForeground#BDD1C799
  • tab.unfocusedHoverBackground#34504Cb3
  • tab.unfocusedHoverBorder#57B28900
  • tab.unfocusedInactiveForeground#BDD1C766
  • terminal.ansiBlack#34504C
  • terminal.ansiBlue#95B1A7
  • terminal.ansiBrightBlack#BDD1C767
  • terminal.ansiBrightBlue#95B1A7
  • terminal.ansiBrightCyan#6AC885
  • terminal.ansiBrightGreen#57B289FF
  • terminal.ansiBrightMagenta#BDD1C8
  • terminal.ansiBrightRed#C46764
  • terminal.ansiBrightWhite#9EDCB4
  • terminal.ansiBrightYellow#57B289
  • terminal.ansiCyan#57B289
  • terminal.ansiGreen#57B289FF
  • terminal.ansiMagenta#BDD1C8
  • terminal.ansiRed#C46764
  • terminal.ansiWhite#BDD1C7
  • terminal.ansiYellow#57B289
  • terminal.background#293D3A
  • terminal.foreground#BDD1C7
  • textBlockQuote.background#34504C
  • textBlockQuote.border#95B1A7
  • textCodeBlock.background#BDD1C767
  • textLink.activeForeground#57B289
  • textLink.foreground#57B289
  • textPreformat.foreground#6AC885
  • textSeparator.foreground#9EDCB4
  • titleBar.activeBackground#293D3A
  • titleBar.activeForeground#BDD1C7
  • titleBar.border#293D3A00
  • titleBar.inactiveBackground#293D3A
  • titleBar.inactiveForeground#BDD1C766
  • tree.indentGuidesStroke#BDD1C8
  • walkThrough.embeddedEditorBackground#293D3A
  • welcomePage.buttonBackground#95B1A7
  • welcomePage.buttonHoverBackground#BDD1C767
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
comment#95B1A7B3
constant.character#57B289
constant.character.escape#57B289
constant.language#95B1A7
constant.numeric#BDD1C8
constant.regexp#57B289
entity.name.class, entity.name.type.class#6AC885
entity.name.function#57B289
entity.name.tag#6AC885
entity.other.attribute-name#57B289
entity.other.inherited-class#6AC885bold
invalid.deprecated#BDD1C7
invalid.illegal#BDD1C7
keyword#95B1A7
keyword.operator#95B1A7
keyword.other.new#95B1A7
markup.boldbold
markup.changed#57B289
markup.deleted#C46764
markup.inserted#BDD1C8
meta.preprocessor#BDD1C8
punctuation, meta.brace.round, meta.brace.square#9EDCB4
punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters#9EDCB4
punctuation.definition.tag#95B1A7
punctuation.definition.comment, punctuation.end.definition.comment, punctuation.start.definition.comment#95B1A7B3
punctuation.section#9EDCB4
punctuation.section.embedded.begin, punctuation.section.embedded.end#95B1A7
punctuation.terminator#95B1A7
punctuation.definition.variable#95B1A7
storage#95B1A7
string#BDD1C8
string.regexp#57B289
support.class#6AC885
support.constant#95B1A7
support.function#57B289
support.function.construct#95B1A7
support.type#6AC885
support.type.exception#6AC885
token.debug-token#BDD1C8
token.error-token#C46764
token.info-token#57B289
token.warn-token#57B289
variable.other#57B289
variable.language#95B1A7
variable.parameter#BDD1C7
punctuation.separator.pointer-access.c#95B1A7
source.c meta.preprocessor.include, source.c string.quoted.other.lt-gt.include#6AC885
source.cpp keyword.control.directive.conditional, source.cpp punctuation.definition.directive, source.c keyword.control.directive.conditional, source.c punctuation.definition.directive#BDD1C8bold
source.css constant.other.color.rgb-value#BDD1C8
source.css meta.property-value#57B289
source.css keyword.control.at-rule.media, source.css keyword.control.at-rule.media punctuation.definition.keyword#C46764
source.css punctuation.definition.keyword#95B1A7
source.css support.type.property-name#BDD1C7
source.diff meta.diff.range.context#6AC885
source.diff meta.diff.header.from-file#6AC885
source.diff punctuation.definition.from-file#6AC885
source.diff punctuation.definition.range#6AC885
source.diff punctuation.definition.separator#95B1A7
entity.name.type.module.elixir#6AC885
variable.other.readwrite.module.elixir#BDD1C7bold
constant.other.symbol.elixir#BDD1C7bold
variable.other.constant.elixir#6AC885
source.go constant.other.placeholder.go#57B289
source.java comment.block.documentation.javadoc punctuation.definition.entity.html#95B1A7
source.java constant.other#BDD1C7
source.java keyword.other.documentation#6AC885
source.java keyword.other.documentation.author.javadoc#6AC885
source.java keyword.other.documentation.directive, source.java keyword.other.documentation.custom#6AC885
source.java keyword.other.documentation.see.javadoc#6AC885
source.java meta.method-call meta.method#57B289
source.java meta.tag.template.link.javadoc, source.java string.other.link.title.javadoc#6AC885
source.java meta.tag.template.value.javadoc#57B289
source.java punctuation.definition.keyword.javadoc#6AC885
source.java punctuation.definition.tag.begin.javadoc, source.java punctuation.definition.tag.end.javadoc#BDD1C8
source.java storage.modifier.import#6AC885
source.java storage.modifier.package#6AC885
source.java storage.type#6AC885
source.java storage.type.annotation#C46764
source.java storage.type.generic#6AC885
source.java storage.type.primitive#95B1A7
source.js punctuation.decorator, source.js meta.decorator variable.other.readwrite, source.js meta.decorator entity.name.function#C46764
source.js meta.object-literal.key#57B289
source.js storage.type.class.jsdoc#6AC885
source.js string.quoted.template punctuation.quasi.element.begin, source.js string.quoted.template punctuation.quasi.element.end, source.js string.template punctuation.definition.template-expression#95B1A7
source.js string.quoted.template meta.method-call.with-arguments#9EDCB4
source.js string.template meta.template.expression support.variable.property, source.js string.template meta.template.expression variable.other.object#BDD1C7
source.js support.type.primitive#95B1A7
source.js variable.other.object#BDD1C7
source.js variable.other.readwrite.alias#6AC885
source.js meta.embedded.line meta.brace.square, source.js meta.embedded.line meta.brace.round, source.js string.quoted.template meta.brace.square, source.js string.quoted.template meta.brace.round#9EDCB4
punctuation.definition.tag, keyword.operator.assignment, punctuation.section.embedded.begin, punctuation.section.embedded.end#95B1A7B3
text.html.basic constant.character.entity.html#57B289
text.html.basic constant.other.inline-data#C46764italic
text.html.basic meta.tag.sgml.doctype#BDD1C8
text.html.basic punctuation.definition.entity#95B1A7
source.properties entity.name.section.group-title.ini#57B289
source.properties punctuation.separator.key-value.ini#95B1A7
text.html.markdown markup.fenced_code.block, text.html.markdown markup.fenced_code.block punctuation.definition#6AC885
markup.heading#57B289
text.html.markdown markup.inline.raw, text.html.markdown markup.inline.raw punctuation.definition.raw#6AC885
text.html.markdown markup.italicitalic
text.html.markdown markup.underline.linkunderline
text.html.markdown beginning.punctuation.definition.list#95B1A7
text.html.markdown beginning.punctuation.definition.quote#6AC885
text.html.markdown markup.quote#BDD1C8
text.html.markdown constant.character.math.tex#95B1A7
text.html.markdown punctuation.definition.math.begin, text.html.markdown punctuation.definition.math.end#BDD1C8
text.html.markdown punctuation.definition.function.math.tex#57B289
text.html.markdown punctuation.math.operator.latex#95B1A7
text.html.markdown punctuation.definition.heading#95B1A7
text.html.markdown punctuation.definition.constant, text.html.markdown punctuation.definition.string#95B1A7
text.html.markdown constant.other.reference.link, text.html.markdown string.other.link.description, text.html.markdown string.other.link.title#57B289
source.perl punctuation.definition.variable#BDD1C7
source.php meta.function-call, source.php meta.function-call.object#57B289
source.python entity.name.function.decorator, source.python meta.function.decorator support.type#C46764
source.python meta.function-call.generic#57B289
source.python support.type#57B289
source.python variable.parameter.function.language#BDD1C7
source.python meta.function.parameters variable.parameter.function.language.special.self#95B1A7
source.css.scss punctuation.definition.interpolation.begin.bracket.curly, source.css.scss punctuation.definition.interpolation.end.bracket.curly#95B1A7
source.css.scss variable.interpolation#BDD1C7italic
source.ts punctuation.decorator, source.ts meta.decorator variable.other.readwrite, source.ts meta.decorator entity.name.function, source.tsx punctuation.decorator, source.tsx meta.decorator variable.other.readwrite, source.tsx meta.decorator entity.name.function#C46764
source.ts meta.object-literal.key, source.tsx meta.object-literal.key#BDD1C7
source.ts meta.object-literal.key entity.name.function, source.tsx meta.object-literal.key entity.name.function#57B289
source.ts support.class, source.ts support.type, source.ts entity.name.type, source.ts entity.name.class, source.tsx support.class, source.tsx support.type, source.tsx entity.name.type, source.tsx entity.name.class#6AC885
source.ts support.constant.math, source.ts support.constant.dom, source.ts support.constant.json, source.tsx support.constant.math, source.tsx support.constant.dom, source.tsx support.constant.json#6AC885
source.ts support.variable, source.tsx support.variable#BDD1C7
source.ts meta.embedded.line meta.brace.square, source.ts meta.embedded.line meta.brace.round, source.tsx meta.embedded.line meta.brace.square, source.tsx meta.embedded.line meta.brace.round#9EDCB4
text.xml entity.name.tag.namespace#6AC885
text.xml keyword.other.doctype#BDD1C8
text.xml meta.tag.preprocessor entity.name.tag#BDD1C8
text.xml string.unquoted.cdata, text.xml string.unquoted.cdata punctuation.definition.string#C46764italic
source.yaml entity.name.tag#6AC885