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#44535F
  • activityBar.activeBorder#57B2B0
  • activityBar.background#36424C
  • activityBar.foreground#C4CFD3
  • activityBarBadge.background#57B2B0
  • activityBarBadge.foreground#36424C
  • badge.background#57B2B0
  • badge.foreground#36424C
  • button.background#57B2B0ee
  • button.foreground#36424C
  • button.hoverBackground#57B2B0
  • button.secondaryBackground#95A8B1
  • button.secondaryForeground#C4CFD3
  • button.secondaryHoverBackground#C4CFD367
  • charts.blue#95A8B1
  • charts.foreground#C4CFD3
  • charts.green#C4CFD4
  • charts.lines#57B2B0
  • charts.orange#C96E54
  • charts.purple#C4CFD4
  • charts.red#C96E54
  • charts.yellow#57B2B0
  • debugConsole.errorForeground#C96E54
  • debugConsole.infoForeground#57B2B0
  • debugConsole.sourceForeground#C4CFD4
  • debugConsole.warningForeground#57B2B0
  • debugConsoleInputIcon.foreground#95A8B1
  • debugExceptionWidget.background#C4CFD367
  • debugExceptionWidget.border#36424C
  • debugToolBar.background#44535F
  • descriptionForeground#C4CFD3e6
  • diffEditor.insertedTextBackground#95A8B122
  • diffEditor.removedTextBackground#C96E544d
  • dropdown.background#44535F
  • dropdown.border#44535F
  • dropdown.foreground#C4CFD3
  • editor.background#36424C
  • editor.findMatchBackground#95A8B122
  • editor.findMatchHighlightBackground#95A8B122
  • editor.findRangeHighlightBackground#95A8B122
  • editor.focusedStackFrameHighlightBackground#C4CFD4
  • editor.foreground#C4CFD3
  • editor.hoverHighlightBackground#44535F
  • editor.inactiveSelectionBackground#C4CFD367
  • editor.inlineValuesBackground#C4CFD367
  • editor.inlineValuesForeground#9FDCD5
  • editor.lineHighlightBackground#44535F
  • editor.lineHighlightBorder#44535F
  • editor.rangeHighlightBackground#95A8B122
  • editor.selectionBackground#95A8B122
  • editor.selectionHighlightBackground#95A8B122
  • editor.stackFrameHighlightBackground#C4CFD4
  • editor.wordHighlightBackground#95A8B122
  • editor.wordHighlightStrongBackground#95A8B122
  • editorBracketMatch.background#36424C00
  • editorBracketMatch.border#57B2B0
  • editorCodeLens.foreground#C4CFD367
  • editorCursor.foreground#C4CFD3
  • editorError.border#C96E5400
  • editorError.foreground#C96E54
  • editorGroup.border#44535F01
  • editorGroup.dropBackground#44535F99
  • editorGroupHeader.border#44535F00
  • editorGroupHeader.noTabsBackground#36424C
  • editorGroupHeader.tabsBackground#36424C
  • editorGroupHeader.tabsBorder#44535F00
  • editorGutter.addedBackground#C4CFD4
  • editorGutter.background#36424C
  • editorGutter.deletedBackground#C96E54
  • editorGutter.modifiedBackground#57B2B0
  • editorHint.border#57B2B000
  • editorHint.foreground#57B2B0
  • editorHoverWidget.background#44535F
  • editorHoverWidget.border#44535F
  • editorIndentGuide.activeBackground#95A8B144
  • editorIndentGuide.background#95A8B122
  • editorLineNumber.activeForeground#C4CFD3
  • editorLineNumber.foreground#C4CFD367
  • editorLink.activeForeground#57B2B0
  • editorMarkerNavigation.background#C4CFD4c0
  • editorMarkerNavigationError.background#C96E54c0
  • editorMarkerNavigationWarning.background#57B2B0c0
  • editorOverviewRuler.addedForeground#C4CFD4
  • editorOverviewRuler.border#44535F
  • editorOverviewRuler.currentContentForeground#44535F
  • editorOverviewRuler.deletedForeground#C96E54
  • editorOverviewRuler.errorForeground#C96E54
  • editorOverviewRuler.findMatchForeground#57B2B066
  • editorOverviewRuler.incomingContentForeground#44535F
  • editorOverviewRuler.infoForeground#95A8B1
  • editorOverviewRuler.modifiedForeground#57B2B0
  • editorOverviewRuler.rangeHighlightForeground#57B2B066
  • editorOverviewRuler.selectionHighlightForeground#57B2B066
  • editorOverviewRuler.warningForeground#57B2B0
  • editorOverviewRuler.wordHighlightForeground#57B2B066
  • editorOverviewRuler.wordHighlightStrongForeground#57B2B066
  • editorRuler.foreground#95A8B1
  • editorSuggestWidget.background#36424C
  • editorSuggestWidget.border#44535F
  • editorSuggestWidget.focusHighlightForeground#57B2B0
  • editorSuggestWidget.foreground#C4CFD3
  • editorSuggestWidget.highlightForeground#57B2B0
  • editorSuggestWidget.selectedBackground#95A8B122
  • editorSuggestWidget.selectedForeground#C4CFD3
  • editorWarning.border#57B2B000
  • editorWarning.foreground#57B2B0
  • editorWhitespace.foreground#C4CFD367
  • editorWidget.background#36424C
  • editorWidget.border#44535F
  • errorForeground#C96E54
  • extensionButton.prominentBackground#95A8B1
  • extensionButton.prominentForeground#C4CFD3
  • extensionButton.prominentHoverBackground#C4CFD367
  • focusBorder#44535F
  • foreground#C4CFD3
  • gitDecoration.conflictingResourceForeground#C4CFD4
  • gitDecoration.deletedResourceForeground#C96E54
  • gitDecoration.ignoredResourceForeground#C4CFD366
  • gitDecoration.modifiedResourceForeground#57B2B0
  • gitDecoration.stageDeletedResourceForeground#C96E54
  • gitDecoration.stageModifiedResourceForeground#57B2B0
  • gitDecoration.submoduleResourceForeground#6AC8BF
  • gitDecoration.untrackedResourceForeground#C4CFD4
  • input.background#44535F
  • input.border#44535F
  • input.foreground#C4CFD3
  • input.placeholderForeground#C4CFD399
  • inputOption.activeBackground#95A8B122
  • inputOption.activeBorder#C4CFD4
  • inputOption.activeForeground#9FDCD5
  • inputValidation.errorBackground#C96E54
  • inputValidation.errorBorder#C96E54
  • inputValidation.infoBackground#95A8B1
  • inputValidation.infoBorder#95A8B1
  • inputValidation.warningBackground#C96E54
  • inputValidation.warningBorder#C96E54
  • keybindingLabel.background#C4CFD367
  • keybindingLabel.border#C4CFD367
  • keybindingLabel.bottomBorder#C4CFD367
  • keybindingLabel.foreground#C4CFD3
  • list.activeSelectionBackground#95A8B122
  • list.activeSelectionForeground#C4CFD3
  • list.dropBackground#57B2B099
  • list.errorForeground#C96E54
  • list.focusBackground#95A8B122
  • list.focusForeground#C4CFD3
  • list.focusHighlightForeground#6AC8BF
  • list.highlightForeground#57B2B0
  • list.hoverBackground#44535F
  • list.hoverForeground#9FDCD5
  • list.inactiveFocusBackground#95A8B122
  • list.inactiveSelectionBackground#95A8B122
  • list.inactiveSelectionForeground#C4CFD3
  • list.warningForeground#57B2B0
  • merge.border#44535F00
  • merge.currentContentBackground#95A8B14d
  • merge.currentHeaderBackground#95A8B122
  • merge.incomingContentBackground#6AC8BF4d
  • merge.incomingHeaderBackground#6AC8BF66
  • minimap.background#36424C
  • minimap.errorHighlight#C96E54cc
  • minimap.findMatchHighlight#57B2B0
  • minimap.selectionHighlight#57B2B0cc
  • minimap.warningHighlight#57B2B0cc
  • minimapGutter.addedBackground#C4CFD4
  • minimapGutter.deletedBackground#C96E54
  • minimapGutter.modifiedBackground#57B2B0
  • minimapSlider.activeBackground#95A8B1aa
  • minimapSlider.background#95A8B199
  • minimapSlider.hoverBackground#95A8B1aa
  • notificationCenter.border#44535F00
  • notificationCenterHeader.background#36424C
  • notificationCenterHeader.foreground#57B2B0
  • notificationLink.foreground#57B2B0
  • notifications.background#44535F
  • notifications.border#36424C
  • notifications.foreground#C4CFD3
  • notificationToast.border#44535F00
  • panel.background#36424C
  • panel.border#44535F
  • panelTitle.activeBorder#57B2B000
  • panelTitle.activeForeground#57B2B0
  • panelTitle.inactiveForeground#C4CFD3
  • peekView.border#C4CFD367
  • peekViewEditor.background#36424C
  • peekViewEditor.matchHighlightBackground#57B2B04d
  • peekViewEditorGutter.background#36424C
  • peekViewResult.background#36424C
  • peekViewResult.fileForeground#57B2B0
  • peekViewResult.lineForeground#C4CFD366
  • peekViewResult.matchHighlightBackground#57B2B0cc
  • peekViewResult.selectionBackground#95A8B1
  • peekViewResult.selectionForeground#C4CFD3
  • peekViewTitle.background#44535F
  • peekViewTitleDescription.foreground#C4CFD3
  • peekViewTitleLabel.foreground#57B2B0
  • pickerGroup.border#44535F
  • pickerGroup.foreground#57B2B0
  • progressBar.background#57B2B0
  • quickInputList.focusBackground#95A8B122
  • quickInputList.focusForeground#C4CFD3
  • sash.hoverBorder#57B2B0
  • scrollbar.shadow#00000066
  • scrollbarSlider.activeBackground#95A8B133
  • scrollbarSlider.background#95A8B123
  • scrollbarSlider.hoverBackground#95A8B133
  • selection.background#57B2B099
  • sideBar.background#36424C
  • sideBar.border#44535F
  • sideBar.foreground#C4CFD3
  • sideBarSectionHeader.background#44535F
  • sideBarSectionHeader.foreground#C4CFD3
  • sideBarTitle.foreground#C4CFD3
  • statusBar.background#44535F
  • statusBar.border#44535F00
  • statusBar.debuggingBackground#95A8B122
  • statusBar.debuggingForeground#C4CFD3
  • statusBar.foreground#C4CFD3
  • statusBar.noFolderBackground#95A8B122
  • statusBar.noFolderForeground#C4CFD3
  • statusBarItem.activeBackground#C4CFD367
  • statusBarItem.errorBackground#95A8B122
  • statusBarItem.errorForeground#C96E54
  • statusBarItem.hoverBackground#95A8B133
  • statusBarItem.prominentBackground#95A8B122
  • statusBarItem.prominentHoverBackground#95A8B1
  • tab.activeBackground#44535F
  • tab.activeBorder#57B2B000
  • tab.activeBorderTop#57B2B000
  • tab.activeForeground#C4CFD3
  • tab.border#44535F00
  • tab.hoverBackground#44535Fcc
  • tab.hoverBorder#57B2B000
  • tab.inactiveBackground#36424C
  • tab.inactiveForeground#C4CFD366
  • tab.lastPinnedBorder#C4CFD367
  • tab.unfocusedActiveBorder#57B2B000
  • tab.unfocusedActiveBorderTop#57B2B000
  • tab.unfocusedActiveForeground#C4CFD399
  • tab.unfocusedHoverBackground#44535Fb3
  • tab.unfocusedHoverBorder#57B2B000
  • tab.unfocusedInactiveForeground#C4CFD366
  • terminal.ansiBlack#44535F
  • terminal.ansiBlue#95A8B1
  • terminal.ansiBrightBlack#C4CFD367
  • terminal.ansiBrightBlue#95A8B1
  • terminal.ansiBrightCyan#6AC8BF
  • terminal.ansiBrightGreen#57B2B0FF
  • terminal.ansiBrightMagenta#C4CFD4
  • terminal.ansiBrightRed#C96E54
  • terminal.ansiBrightWhite#9FDCD5
  • terminal.ansiBrightYellow#57B2B0
  • terminal.ansiCyan#57B2B0
  • terminal.ansiGreen#57B2B0FF
  • terminal.ansiMagenta#C4CFD4
  • terminal.ansiRed#C96E54
  • terminal.ansiWhite#C4CFD3
  • terminal.ansiYellow#57B2B0
  • terminal.background#36424C
  • terminal.foreground#C4CFD3
  • textBlockQuote.background#44535F
  • textBlockQuote.border#95A8B1
  • textCodeBlock.background#C4CFD367
  • textLink.activeForeground#57B2B0
  • textLink.foreground#57B2B0
  • textPreformat.foreground#6AC8BF
  • textSeparator.foreground#9FDCD5
  • titleBar.activeBackground#36424C
  • titleBar.activeForeground#C4CFD3
  • titleBar.border#36424C00
  • titleBar.inactiveBackground#36424C
  • titleBar.inactiveForeground#C4CFD366
  • tree.indentGuidesStroke#C4CFD4
  • walkThrough.embeddedEditorBackground#36424C
  • welcomePage.buttonBackground#95A8B1
  • welcomePage.buttonHoverBackground#C4CFD367
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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