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#252b34
  • activityBar.activeBorder#81a1c1
  • activityBar.background#252b34
  • activityBar.foreground#d8dee9e6
  • activityBar.inactiveForeground#d8dee999
  • activityBarBadge.background#88c0d0
  • activityBarBadge.foreground#252b34
  • badge.background#88c0d0
  • badge.foreground#000000
  • breadcrumb.activeSelectionForeground#d8dee9e6
  • breadcrumb.background#15181e
  • breadcrumb.focusForeground#d8dee9e6
  • breadcrumb.foreground#d8dee999
  • button.background#81a1c1
  • button.foreground#000000
  • button.hoverBackground#81a1c1
  • button.secondaryBackground#434c5e
  • button.secondaryForeground#d8dee9
  • button.secondaryHoverBackground#4c566a
  • charts.blue#81a1c1
  • charts.foreground#d8dee9
  • charts.green#a3be8c
  • charts.lines#88c0d0
  • charts.orange#d08770
  • charts.purple#b48ead
  • charts.red#bf616a
  • charts.yellow#ebcb8b
  • debugConsole.errorForeground#bf616a
  • debugConsole.infoForeground#88c0d0
  • debugConsole.sourceForeground#616e88
  • debugConsole.warningForeground#ebcb8b
  • debugConsoleInputIcon.foreground#81a1c1
  • debugExceptionWidget.background#4c566a
  • debugExceptionWidget.border#252b34
  • debugToolBar.background#3b4252
  • descriptionForeground#d8dee9e6
  • diffEditor.insertedTextBackground#81a1c133
  • diffEditor.removedTextBackground#bf616a4d
  • dropdown.background#3b4252
  • dropdown.border#3b4252
  • dropdown.foreground#d8dee9
  • editor.background#000000
  • editor.findMatchBackground#88c0d0cc
  • editor.findMatchForeground#000000
  • editor.findMatchHighlightBackground#88c0d080
  • editor.findMatchHighlightForeground#000000FE
  • editor.findRangeHighlightBackground#88c0d080
  • editor.focusedStackFrameHighlightBackground#5e81ac
  • editor.foreground#d8dee9
  • editor.hoverHighlightBackground#3b4252b3
  • editor.inactiveSelectionBackground#88c0d04d
  • editor.inlineValuesBackground#4c566a
  • editor.inlineValuesForeground#b1b8bf
  • editor.lineHighlightBackground#3b425299
  • editor.lineHighlightBorder#3b425200
  • editor.rangeHighlightBackground#88c0d066
  • editor.selectionBackground#5e81acb3
  • editor.selectionForeground#000000
  • editor.selectionHighlightBackground#5e81ac73
  • editor.stackFrameHighlightBackground#5e81ac
  • editor.wordHighlightBackground#88c0d066
  • editor.wordHighlightStrongBackground#88c0d099
  • editorBracketHighlight.foreground1#8fbcbb
  • editorBracketHighlight.foreground2#88c0d0
  • editorBracketHighlight.foreground3#81a1c1
  • editorBracketHighlight.foreground4#5e81ac
  • editorBracketHighlight.foreground5#8fbcbb
  • editorBracketHighlight.foreground6#88c0d0
  • editorBracketHighlight.unexpectedBracket.foreground#bf616a
  • editorBracketMatch.border#191d24
  • editorBracketMatch.foreground#ebcb8b
  • editorCodeLens.foreground#4c566a
  • editorCursor.foreground#88c0d0
  • editorError.border#bf616a00
  • editorError.foreground#bf616a
  • editorGroup.border#3b425201
  • editorGroup.dropBackground#3b425299
  • editorGroup.emptyBackground#252b34
  • editorGroupHeader.border#3b425200
  • editorGroupHeader.noTabsBackground#252b34
  • editorGroupHeader.tabsBackground#252b34
  • editorGroupHeader.tabsBorder#3b425200
  • editorGutter.addedBackground#a3be8c
  • editorGutter.background#000000
  • editorGutter.deletedBackground#bf616a
  • editorGutter.modifiedBackground#ebcb8b
  • editorHint.border#ebcb8b00
  • editorHint.foreground#ebcb8b
  • editorHoverWidget.background#3b4252
  • editorHoverWidget.border#3b4252
  • editorIndentGuide.activeBackground1#4c566ab3
  • editorIndentGuide.background1#434c5e66
  • editorInlayHint.background#434c5e
  • editorInlayHint.foreground#d8dee9
  • editorLineNumber.activeForeground#d8dee9cc
  • editorLineNumber.foreground#d8dee94d
  • editorLink.activeForeground#88c0d0
  • editorMarkerNavigation.background#5e81acc0
  • editorMarkerNavigationError.background#bf616ac0
  • editorMarkerNavigationWarning.background#ebcb8bc0
  • editorOverviewRuler.addedForeground#a3be8c
  • editorOverviewRuler.border#3b4252
  • editorOverviewRuler.currentContentForeground#3b4252
  • editorOverviewRuler.deletedForeground#bf616a
  • editorOverviewRuler.errorForeground#bf616a
  • editorOverviewRuler.findMatchForeground#88c0d0cc
  • editorOverviewRuler.incomingContentForeground#3b4252
  • editorOverviewRuler.infoForeground#81a1c1
  • editorOverviewRuler.modifiedForeground#ebcb8b
  • editorOverviewRuler.rangeHighlightForeground#88c0d080
  • editorOverviewRuler.selectionHighlightForeground#5e81accc
  • editorOverviewRuler.warningForeground#ebcb8b
  • editorOverviewRuler.wordHighlightForeground#88c0d066
  • editorOverviewRuler.wordHighlightStrongForeground#88c0d099
  • editorRuler.foreground#434c5e80
  • editorSuggestWidget.background#252b34
  • editorSuggestWidget.border#252b34
  • editorSuggestWidget.focusHighlightForeground#88c0d0
  • editorSuggestWidget.foreground#d8dee9
  • editorSuggestWidget.highlightForeground#88c0d0
  • editorSuggestWidget.selectedBackground#434c5e
  • editorSuggestWidget.selectedForeground#d8dee9
  • editorWarning.border#ebcb8b00
  • editorWarning.foreground#ebcb8b
  • editorWhitespace.foreground#4c566ab3
  • editorWidget.background#3b4252
  • editorWidget.border#3b4252
  • errorForeground#bf616a
  • extensionButton.prominentBackground#434c5e
  • extensionButton.prominentForeground#d8dee9
  • extensionButton.prominentHoverBackground#4c566a
  • focusBorder#88c0d066
  • foreground#d8dee999
  • gitDecoration.conflictingResourceForeground#5e81ac
  • gitDecoration.deletedResourceForeground#bf616a
  • gitDecoration.ignoredResourceForeground#d8dee966
  • gitDecoration.modifiedResourceForeground#ebcb8b
  • gitDecoration.stageDeletedResourceForeground#bf616a
  • gitDecoration.stageModifiedResourceForeground#ebcb8b
  • gitDecoration.submoduleResourceForeground#8fbcbb
  • gitDecoration.untrackedResourceForeground#a3be8c
  • icon.foreground#d8dee999
  • input.background#000000
  • input.border#00000000
  • input.foreground#d8dee9
  • input.placeholderForeground#d8dee999
  • inputOption.activeBackground#5e81ac
  • inputOption.activeBorder#5e81ac
  • inputOption.activeForeground#000000
  • inputValidation.errorBackground#bf616a
  • inputValidation.errorBorder#bf616a
  • inputValidation.infoBackground#81a1c1
  • inputValidation.infoBorder#81a1c1
  • inputValidation.warningBackground#d08770
  • inputValidation.warningBorder#d08770
  • keybindingLabel.background#4c566a
  • keybindingLabel.border#4c566a
  • keybindingLabel.bottomBorder#4c566a
  • keybindingLabel.foreground#d8dee9
  • list.activeSelectionBackground#81a1c1
  • list.activeSelectionForeground#000000
  • list.dropBackground#88c0d099
  • list.errorForeground#bf616a
  • list.focusBackground#88c0d033
  • list.focusForeground#d8dee9
  • list.focusHighlightForeground#d8dee9
  • list.focusOutline#88c0d000
  • list.highlightForeground#88c0d0
  • list.hoverBackground#3b4252
  • list.hoverForeground#d8dee9
  • list.inactiveFocusBackground#88c0d000
  • list.inactiveSelectionBackground#252b34
  • list.inactiveSelectionForeground#d8dee9e6
  • list.warningForeground#ebcb8b
  • merge.border#3b425200
  • merge.currentContentBackground#81a1c14d
  • merge.currentHeaderBackground#81a1c166
  • merge.incomingContentBackground#8fbcbb4d
  • merge.incomingHeaderBackground#8fbcbb66
  • minimap.background#88c0d011
  • minimap.errorHighlight#bf616acc
  • minimap.findMatchHighlight#88c0d080
  • minimap.selectionHighlight#88c0d0cc
  • minimap.warningHighlight#ebcb8bcc
  • minimapGutter.addedBackground#a3be8c
  • minimapGutter.deletedBackground#bf616a
  • minimapGutter.modifiedBackground#ebcb8b
  • minimapSlider.activeBackground#434c5eaa
  • minimapSlider.background#434c5e99
  • minimapSlider.hoverBackground#434c5eaa
  • notificationCenter.border#3b425200
  • notificationCenterHeader.background#252b34
  • notificationCenterHeader.foreground#88c0d0
  • notificationLink.foreground#88c0d0
  • notifications.background#3b4252
  • notifications.border#252b34
  • notifications.foreground#d8dee9
  • notificationToast.border#3b425200
  • panel.background#272c34
  • panel.border#272c34
  • panelTitle.activeBorder#88c0d000
  • panelTitle.activeForeground#060808
  • panelTitle.inactiveForeground#d8dee9
  • peekView.border#4c566a
  • peekViewEditor.background#252b34
  • peekViewEditor.matchHighlightBackground#88c0d04d
  • peekViewEditorGutter.background#252b34
  • peekViewResult.background#252b34
  • peekViewResult.fileForeground#88c0d0
  • peekViewResult.lineForeground#d8dee966
  • peekViewResult.matchHighlightBackground#88c0d0cc
  • peekViewResult.selectionBackground#434c5e
  • peekViewResult.selectionForeground#d8dee9
  • peekViewTitle.background#3b4252
  • peekViewTitleDescription.foreground#d8dee9
  • peekViewTitleLabel.foreground#88c0d0
  • pickerGroup.border#3b4252
  • pickerGroup.foreground#88c0d0
  • progressBar.background#191d24
  • quickInputList.focusBackground#88c0d0
  • quickInputList.focusForeground#252b34
  • sash.hoverBorder#88c0d0
  • scrollbar.shadow#00000066
  • scrollbarSlider.activeBackground#434c5eaa
  • scrollbarSlider.background#434c5e99
  • scrollbarSlider.hoverBackground#434c5eaa
  • selection.background#3b4252
  • sideBar.background#252b34
  • sideBar.border#252b34
  • sideBar.foreground#d8dee999
  • sideBarSectionHeader.background#252b34
  • sideBarSectionHeader.foreground#d8dee999
  • sideBarTitle.foreground#d8dee999
  • statusBar.background#252b34
  • statusBar.border#3b425200
  • statusBar.debuggingBackground#5e81ac
  • statusBar.debuggingForeground#d8dee9
  • statusBar.foreground#d8dee999
  • statusBar.noFolderBackground#3b4252
  • statusBar.noFolderForeground#d8dee9
  • statusBarItem.activeBackground#4c566a
  • statusBarItem.errorBackground#3b4252
  • statusBarItem.errorForeground#bf616a
  • statusBarItem.hoverBackground#434c5e
  • statusBarItem.prominentBackground#3b4252
  • statusBarItem.prominentHoverBackground#434c5e
  • statusBarItem.warningBackground#ebcb8b
  • statusBarItem.warningForeground#252b34
  • tab.activeBackground#000000
  • tab.activeBorder#88c0d000
  • tab.activeBorderTop#88c0d000
  • tab.activeForeground#d8dee9e6
  • tab.border#000000
  • tab.hoverBackground#3b4252cc
  • tab.hoverBorder#88c0d000
  • tab.inactiveBackground#252b34
  • tab.inactiveForeground#d8dee999
  • tab.lastPinnedBorder#4c566a
  • tab.unfocusedActiveBorder#88c0d000
  • tab.unfocusedActiveBorderTop#88c0d000
  • tab.unfocusedActiveForeground#d8dee999
  • tab.unfocusedHoverBackground#3b4252b3
  • tab.unfocusedHoverBorder#88c0d000
  • tab.unfocusedInactiveForeground#d8dee966
  • terminal.ansiBlack#3b4252
  • terminal.ansiBlue#81a1c1
  • terminal.ansiBrightBlack#4c566a
  • terminal.ansiBrightBlue#81a1c1
  • terminal.ansiBrightCyan#8fbcbb
  • terminal.ansiBrightGreen#a3be8c
  • terminal.ansiBrightMagenta#b48ead
  • terminal.ansiBrightRed#bf616a
  • terminal.ansiBrightWhite#eceff4
  • terminal.ansiBrightYellow#ebcb8b
  • terminal.ansiCyan#88c0d0
  • terminal.ansiGreen#a3be8c
  • terminal.ansiMagenta#b48ead
  • terminal.ansiRed#bf616a
  • terminal.ansiWhite#e5e9f0
  • terminal.ansiYellow#ebcb8b
  • terminal.background#000000
  • terminal.foreground#d8dee9
  • terminal.tab.activeBorder#88c0d0
  • textBlockQuote.background#3b4252
  • textBlockQuote.border#81a1c1
  • textCodeBlock.background#4c566a
  • textLink.activeForeground#88c0d0
  • textLink.foreground#88c0d0
  • textPreformat.foreground#8fbcbb
  • textSeparator.foreground#b1b8bf
  • titleBar.activeBackground#252b34
  • titleBar.activeForeground#d8dee9cc
  • titleBar.border#252b34
  • titleBar.inactiveBackground#252b34
  • titleBar.inactiveForeground#d8dee999
  • tree.indentGuidesStroke#616e8800
  • walkThrough.embeddedEditorBackground#252b34
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#d8dee9ff
emphasisitalic
strongbold
comment#616E88
constant.character#EBCB8B
constant.character.escape#EBCB8B
constant.language#81A1C1
constant.numeric#B48EAD
constant.regexp#EBCB8B
entity.name.class, entity.name.type.class#8FBCBB
entity.name.function#88C0D0
entity.name.tag#81A1C1
entity.other.attribute-name#8FBCBB
entity.other.inherited-class#8FBCBBbold
invalid.deprecated#D8DEE9
invalid.illegal#D8DEE9
keyword#81A1C1
keyword.operator#81A1C1
keyword.other.new#81A1C1
meta.preprocessor#5E81AC
punctuation#b1b8bf
punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters#b1b8bf
punctuation.definition.tag#81A1C1
punctuation.definition.comment, punctuation.end.definition.comment, punctuation.start.definition.comment#616E88
punctuation.section#b1b8bf
punctuation.section.embedded.begin, punctuation.section.embedded.end#81A1C1
punctuation.terminator#81A1C1
punctuation.definition.variable#81A1C1
storage#81A1C1
string#A3BE8C
string.regexp#EBCB8B
support.class#8FBCBB
support.constant#81A1C1
support.function#88C0D0
support.function.construct#81A1C1
support.type#81A1C1
support.type.exception#8FBCBB
token.debug-token#b48ead
token.error-token#bf616a
token.info-token#88c0d0
token.warn-token#ebcb8b
variable.other#D8DEE9
variable.language#81A1C1
variable.parameter#D8DEE9
punctuation.separator.pointer-access.c#81A1C1
source.c meta.preprocessor.include, source.c string.quoted.other.lt-gt.include#8FBCBB
source.cpp keyword.control.directive.conditional, source.cpp punctuation.definition.directive, source.c keyword.control.directive.conditional, source.c punctuation.definition.directive#5E81ACbold
source.css constant.other.color.rgb-value#B48EAD
source.css meta.property-value#88C0D0
source.css keyword.control.at-rule.media, source.css keyword.control.at-rule.media punctuation.definition.keyword#D08770
source.css punctuation.definition.keyword#81A1C1
source.css support.type.property-name#D8DEE9
source.diff meta.diff.range.context#8FBCBB
source.diff meta.diff.header.from-file#8FBCBB
source.diff punctuation.definition.from-file#8FBCBB
source.diff punctuation.definition.range#8FBCBB
source.diff punctuation.definition.separator#81A1C1
entity.name.type.module.elixir#8FBCBB
variable.other.readwrite.module.elixir#D8DEE9bold
constant.other.symbol.elixir#D8DEE9bold
variable.other.constant.elixir#8FBCBB
source.go constant.other.placeholder.go#EBCB8B
source.java comment.block.documentation.javadoc punctuation.definition.entity.html#81A1C1
source.java constant.other#D8DEE9
source.java keyword.other.documentation#8FBCBB
source.java keyword.other.documentation.author.javadoc#8FBCBB
source.java keyword.other.documentation.directive, source.java keyword.other.documentation.custom#8FBCBB
source.java keyword.other.documentation.see.javadoc#8FBCBB
source.java meta.method-call meta.method#88C0D0
source.java meta.tag.template.link.javadoc, source.java string.other.link.title.javadoc#8FBCBB
source.java meta.tag.template.value.javadoc#88C0D0
source.java punctuation.definition.keyword.javadoc#8FBCBB
source.java punctuation.definition.tag.begin.javadoc, source.java punctuation.definition.tag.end.javadoc#616E88
source.java storage.modifier.import#8FBCBB
source.java storage.modifier.package#8FBCBB
source.java storage.type#8FBCBB
source.java storage.type.annotation#D08770
source.java storage.type.generic#8FBCBB
source.java storage.type.primitive#81A1C1
source.js punctuation.decorator, source.js meta.decorator variable.other.readwrite, source.js meta.decorator entity.name.function#D08770
source.js meta.object-literal.key#88C0D0
source.js storage.type.class.jsdoc#8FBCBB
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#81A1C1
source.js string.quoted.template meta.method-call.with-arguments#b1b8bf
source.js string.template meta.template.expression support.variable.property, source.js string.template meta.template.expression variable.other.object#D8DEE9
source.js support.type.primitive#81A1C1
source.js variable.other.object#D8DEE9
source.js variable.other.readwrite.alias#8FBCBB
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#b1b8bf
text.html.basic constant.character.entity.html#EBCB8B
text.html.basic constant.other.inline-data#D08770italic
text.html.basic meta.tag.sgml.doctype#5E81AC
text.html.basic punctuation.definition.entity#81A1C1
source.properties entity.name.section.group-title.ini#88C0D0
source.properties punctuation.separator.key-value.ini#81A1C1
heading.1 punctuation.definition.heading#8FBCBB4D
heading.1.markdown#8FBCBBbold
heading.2 punctuation.definition.heading#A3BE8C4D
heading.2.markdown#A3BE8C
heading.3 punctuation.definition.heading, heading.4 punctuation.definition.heading, heading.5 punctuation.definition.heading, heading.6 punctuation.definition.heading#88C0D04D
heading.3.markdown, heading.4.markdown, heading.5.markdown, heading.6.markdown#88C0D0
text.html.markdown markup.fenced_code.block#d8dee9
text.html.markdown markup.fenced_code.block punctuation.definition#8FBCBB4D
fenced_code.block.language#5e81ac
markup.inline.raw, markup.inline.raw punctuation.definition.raw#d8dee9
markup.inline.raw punctuation.definition.raw#d8dee94D
markup.bold#96b4d1bold
markup.italic, emphasis md#96b4d1italic
markup.italic markup.bold, markup.bold markup.italic#96b4d1bold italic
markup.underline#96b4d1underline
markup.underline markup.bold, markup.bold markup.underline#96b4d1bold underline
markup.underline markup.italic, markup.italic markup.underline#96b4d1italic underline
markup.underline markup.bold markup.italic, markup.underline markup.italic markup.bold, markup.bold markup.underline markup.italic, markup.bold markup.italic markup.underline, markup.italic markup.underline markup.bold, markup.italic markup.bold markup.underline#96b4d1bold italic underline
punctuation.definition.bold, punctuation.definition.italic, punctuation.definition.emphasis, punctuation.definition.underline#96b4d14D
markup.strikethrough#7c838astrikethrough
punctuation.definition.strikethrough#7c838a80
text.html.markdown markup.underline.linkunderline
text.html.markdown punctuation.definition.list#88c0d0
text.html.markdown markup.quote#81A1C1italic
punctuation.definition.quote#81A1C14D
punctuation.definition.table#81A1C1
text.html.markdown constant.character.math.tex#81A1C1
text.html.markdown punctuation.definition.math.begin, text.html.markdown punctuation.definition.math.end#5E81AC
text.html.markdown punctuation.definition.function.math.tex#88C0D0
text.html.markdown punctuation.math.operator.latex#81A1C1
text.html.markdown punctuation.definition.constant, text.html.markdown punctuation.definition.string#81A1C1
constant.other.reference.link, string.other.link.description, string.other.link.title#88C0D0
markup.underline.link#81A1C1
punctuation.definition.link.title, punctuation.definition.link.description, punctuation.definition.metadata.markdown#81A1C1
support.function.text.markdown.hashtags#8fbcbb
markup.changed#EBCB8B
markup.deleted#BF616A
markup.inserted#A3BE8C
source.perl punctuation.definition.variable#D8DEE9
source.php meta.function-call, source.php meta.function-call.object#88C0D0
source.python entity.name.function.decorator, source.python meta.function.decorator support.type#D08770
source.python meta.function-call.generic#88C0D0
source.python support.type#88C0D0
source.python variable.parameter.function.language#D8DEE9
source.python meta.function.parameters variable.parameter.function.language.special.self#81A1C1
source.css.scss punctuation.definition.interpolation.begin.bracket.curly, source.css.scss punctuation.definition.interpolation.end.bracket.curly#81A1C1
source.css.scss variable.interpolation#D8DEE9italic
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#D08770
source.ts meta.object-literal.key, source.tsx meta.object-literal.key#D8DEE9
source.ts meta.object-literal.key entity.name.function, source.tsx meta.object-literal.key entity.name.function#88C0D0
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#8FBCBB
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#8FBCBB
source.ts support.variable, source.tsx support.variable#D8DEE9
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#b1b8bf
text.xml entity.name.tag.namespace#8FBCBB
text.xml keyword.other.doctype#5E81AC
text.xml meta.tag.preprocessor entity.name.tag#5E81AC
text.xml string.unquoted.cdata, text.xml string.unquoted.cdata punctuation.definition.string#D08770italic
source.yaml entity.name.tag#8FBCBB