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#3b4252
  • activityBar.activeBorder#91e2f9
  • activityBar.background#2e3440
  • activityBar.dropBackground#3b4252
  • activityBar.foreground#d8dee9
  • activityBarBadge.background#91e2f9
  • activityBarBadge.foreground#2e3440
  • badge.background#91e2f9
  • badge.foreground#2e3440
  • button.background#91e2f9ee
  • button.foreground#2e3440
  • button.hoverBackground#91e2f9
  • button.secondaryBackground#434c5e
  • button.secondaryForeground#d8dee9
  • button.secondaryHoverBackground#4c566a
  • charts.blue#8db0e6
  • charts.foreground#d8dee9
  • charts.green#a8c98b
  • charts.lines#91e2f9
  • charts.orange#d08770
  • charts.purple#d198c7
  • charts.red#bf616a
  • charts.yellow#ebcb8b
  • debugConsole.errorForeground#bf616a
  • debugConsole.infoForeground#91e2f9
  • debugConsole.sourceForeground#7d8494
  • debugConsole.warningForeground#ebcb8b
  • debugConsoleInputIcon.foreground#8db0e6
  • debugExceptionWidget.background#4c566a
  • debugExceptionWidget.border#2e3440
  • debugToolBar.background#3b4252
  • descriptionForeground#d8dee9e6
  • diffEditor.insertedTextBackground#8db0e633
  • diffEditor.removedTextBackground#bf616a4d
  • dropdown.background#3b4252
  • dropdown.border#3b4252
  • dropdown.foreground#d8dee9
  • editor.background#2e3440
  • editor.findMatchBackground#91e2f966
  • editor.findMatchHighlightBackground#91e2f933
  • editor.findRangeHighlightBackground#91e2f933
  • editor.focusedStackFrameHighlightBackground#5e81ac
  • editor.foreground#d8dee9
  • editor.hoverHighlightBackground#3b4252
  • editor.inactiveSelectionBackground#434c5ecc
  • editor.inlineValuesBackground#4c566a
  • editor.inlineValuesForeground#eceff4
  • editor.lineHighlightBackground#3b4252
  • editor.lineHighlightBorder#3b4252
  • editor.rangeHighlightBackground#434c5e52
  • editor.selectionBackground#434c5ecc
  • editor.selectionHighlightBackground#434c5ecc
  • editor.stackFrameHighlightBackground#5e81ac
  • editor.wordHighlightBackground#8db0e666
  • editor.wordHighlightStrongBackground#8db0e699
  • editorActiveLineNumber.foreground#d8dee9cc
  • editorBracketHighlight.foreground1#6bd6c1
  • editorBracketHighlight.foreground2#91e2f9
  • editorBracketHighlight.foreground3#8db0e6
  • editorBracketHighlight.foreground4#5e81ac
  • editorBracketHighlight.foreground5#6bd6c1
  • editorBracketHighlight.foreground6#91e2f9
  • editorBracketHighlight.unexpectedBracket.foreground#bf616a
  • editorBracketMatch.background#2e344000
  • editorBracketMatch.border#91e2f9
  • editorCodeLens.foreground#4c566a
  • editorCursor.foreground#d8dee9
  • editorError.border#bf616a00
  • editorError.foreground#bf616a
  • editorGroup.background#2e3440
  • editorGroup.border#3b425201
  • editorGroup.dropBackground#3b425299
  • editorGroupHeader.border#3b425200
  • editorGroupHeader.noTabsBackground#2e3440
  • editorGroupHeader.tabsBackground#2e3440
  • editorGroupHeader.tabsBorder#3b425200
  • editorGutter.addedBackground#a8c98b
  • editorGutter.background#2e3440
  • editorGutter.deletedBackground#bf616a
  • editorGutter.modifiedBackground#ebcb8b
  • editorHint.border#ebcb8b00
  • editorHint.foreground#ebcb8b
  • editorHoverWidget.background#3b4252
  • editorHoverWidget.border#3b4252
  • editorIndentGuide.activeBackground#4c566a
  • editorIndentGuide.background#434c5eb3
  • editorInlayHint.background#434c5e
  • editorInlayHint.foreground#d8dee9
  • editorLineNumber.activeForeground#d8dee9
  • editorLineNumber.foreground#4c566a
  • editorLink.activeForeground#91e2f9
  • editorMarkerNavigation.background#5e81acc0
  • editorMarkerNavigationError.background#bf616ac0
  • editorMarkerNavigationWarning.background#ebcb8bc0
  • editorOverviewRuler.addedForeground#a8c98b
  • editorOverviewRuler.border#3b4252
  • editorOverviewRuler.currentContentForeground#3b4252
  • editorOverviewRuler.deletedForeground#bf616a
  • editorOverviewRuler.errorForeground#bf616a
  • editorOverviewRuler.findMatchForeground#91e2f966
  • editorOverviewRuler.incomingContentForeground#3b4252
  • editorOverviewRuler.infoForeground#8db0e6
  • editorOverviewRuler.modifiedForeground#ebcb8b
  • editorOverviewRuler.rangeHighlightForeground#91e2f966
  • editorOverviewRuler.selectionHighlightForeground#91e2f966
  • editorOverviewRuler.warningForeground#ebcb8b
  • editorOverviewRuler.wordHighlightForeground#91e2f966
  • editorOverviewRuler.wordHighlightStrongForeground#91e2f966
  • editorRuler.foreground#434c5e
  • editorSuggestWidget.background#2e3440
  • editorSuggestWidget.border#3b4252
  • editorSuggestWidget.focusHighlightForeground#91e2f9
  • editorSuggestWidget.foreground#d8dee9
  • editorSuggestWidget.highlightForeground#91e2f9
  • editorSuggestWidget.selectedBackground#434c5e
  • editorSuggestWidget.selectedForeground#d8dee9
  • editorWarning.border#ebcb8b00
  • editorWarning.foreground#ebcb8b
  • editorWhitespace.foreground#4c566ab3
  • editorWidget.background#2e3440
  • editorWidget.border#3b4252
  • errorForeground#bf616a
  • extensionButton.prominentBackground#434c5e
  • extensionButton.prominentForeground#d8dee9
  • extensionButton.prominentHoverBackground#4c566a
  • focusBorder#3b4252
  • foreground#d8dee9
  • gitDecoration.conflictingResourceForeground#5e81ac
  • gitDecoration.deletedResourceForeground#bf616a
  • gitDecoration.ignoredResourceForeground#d8dee966
  • gitDecoration.modifiedResourceForeground#ebcb8b
  • gitDecoration.stageDeletedResourceForeground#bf616a
  • gitDecoration.stageModifiedResourceForeground#ebcb8b
  • gitDecoration.submoduleResourceForeground#6bd6c1
  • gitDecoration.untrackedResourceForeground#a8c98b
  • input.background#3b4252
  • input.border#3b4252
  • input.foreground#d8dee9
  • input.placeholderForeground#d8dee999
  • inputOption.activeBackground#5e81ac
  • inputOption.activeBorder#5e81ac
  • inputOption.activeForeground#eceff4
  • inputValidation.errorBackground#bf616a
  • inputValidation.errorBorder#bf616a
  • inputValidation.infoBackground#8db0e6
  • inputValidation.infoBorder#8db0e6
  • inputValidation.warningBackground#d08770
  • inputValidation.warningBorder#d08770
  • keybindingLabel.background#4c566a
  • keybindingLabel.border#4c566a
  • keybindingLabel.bottomBorder#4c566a
  • keybindingLabel.foreground#d8dee9
  • list.activeSelectionBackground#91e2f9
  • list.activeSelectionForeground#2e3440
  • list.dropBackground#91e2f999
  • list.errorForeground#bf616a
  • list.focusBackground#91e2f999
  • list.focusForeground#d8dee9
  • list.focusHighlightForeground#eceff4
  • list.highlightForeground#91e2f9
  • list.hoverBackground#3b4252
  • list.hoverForeground#eceff4
  • list.inactiveFocusBackground#434c5ecc
  • list.inactiveSelectionBackground#434c5e
  • list.inactiveSelectionForeground#d8dee9
  • list.warningForeground#ebcb8b
  • merge.border#3b425200
  • merge.currentContentBackground#8db0e64d
  • merge.currentHeaderBackground#8db0e666
  • merge.incomingContentBackground#6bd6c14d
  • merge.incomingHeaderBackground#6bd6c166
  • minimap.background#2e3440
  • minimap.errorHighlight#bf616acc
  • minimap.findMatchHighlight#91e2f9
  • minimap.selectionHighlight#91e2f9cc
  • minimap.warningHighlight#ebcb8bcc
  • minimapGutter.addedBackground#a8c98b
  • minimapGutter.deletedBackground#bf616a
  • minimapGutter.modifiedBackground#ebcb8b
  • minimapSlider.activeBackground#434c5eaa
  • minimapSlider.background#434c5e99
  • minimapSlider.hoverBackground#434c5eaa
  • notification.background#3b4252
  • notification.buttonBackground#434c5e
  • notification.buttonForeground#d8dee9
  • notification.buttonHoverBackground#4c566a
  • notification.errorBackground#bf616a
  • notification.errorForeground#2e3440
  • notification.foreground#d8dee9
  • notification.infoBackground#91e2f9
  • notification.infoForeground#2e3440
  • notification.warningBackground#ebcb8b
  • notification.warningForeground#2e3440
  • notificationCenter.border#3b425200
  • notificationCenterHeader.background#2e3440
  • notificationCenterHeader.foreground#91e2f9
  • notificationLink.foreground#91e2f9
  • notifications.background#3b4252
  • notifications.border#2e3440
  • notifications.foreground#d8dee9
  • notificationToast.border#3b425200
  • panel.background#2e3440
  • panel.border#3b4252
  • panelTitle.activeBorder#91e2f900
  • panelTitle.activeForeground#91e2f9
  • panelTitle.inactiveForeground#d8dee9
  • peekView.border#4c566a
  • peekViewEditor.background#2e3440
  • peekViewEditor.matchHighlightBackground#91e2f94d
  • peekViewEditorGutter.background#2e3440
  • peekViewResult.background#2e3440
  • peekViewResult.fileForeground#91e2f9
  • peekViewResult.lineForeground#d8dee966
  • peekViewResult.matchHighlightBackground#91e2f9cc
  • peekViewResult.selectionBackground#434c5e
  • peekViewResult.selectionForeground#d8dee9
  • peekViewTitle.background#3b4252
  • peekViewTitleDescription.foreground#d8dee9
  • peekViewTitleLabel.foreground#91e2f9
  • pickerGroup.border#3b4252
  • pickerGroup.foreground#91e2f9
  • progressBar.background#91e2f9
  • quickInputList.focusBackground#91e2f9
  • quickInputList.focusForeground#2e3440
  • sash.hoverBorder#91e2f9
  • scrollbar.shadow#00000066
  • scrollbarSlider.activeBackground#434c5eaa
  • scrollbarSlider.background#434c5e99
  • scrollbarSlider.hoverBackground#434c5eaa
  • selection.background#91e2f999
  • sideBar.background#2e3440
  • sideBar.border#3b4252
  • sideBar.foreground#d8dee9
  • sideBarSectionHeader.background#3b4252
  • sideBarSectionHeader.foreground#d8dee9
  • sideBarTitle.foreground#d8dee9
  • statusBar.background#3b4252
  • statusBar.border#3b425200
  • statusBar.debuggingBackground#5e81ac
  • statusBar.debuggingForeground#d8dee9
  • statusBar.foreground#d8dee9
  • 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#2e3440
  • tab.activeBackground#3b4252
  • tab.activeBorder#91e2f900
  • tab.activeBorderTop#91e2f900
  • tab.activeForeground#d8dee9
  • tab.border#3b425200
  • tab.hoverBackground#3b4252cc
  • tab.hoverBorder#91e2f900
  • tab.inactiveBackground#2e3440
  • tab.inactiveForeground#d8dee966
  • tab.lastPinnedBorder#4c566a
  • tab.unfocusedActiveBorder#91e2f900
  • tab.unfocusedActiveBorderTop#91e2f900
  • tab.unfocusedActiveForeground#d8dee999
  • tab.unfocusedHoverBackground#3b4252b3
  • tab.unfocusedHoverBorder#91e2f900
  • tab.unfocusedInactiveForeground#d8dee966
  • terminal.ansiBlack#3b4252
  • terminal.ansiBlue#8db0e6
  • terminal.ansiBrightBlack#4c566a
  • terminal.ansiBrightBlue#8db0e6
  • terminal.ansiBrightCyan#6bd6c1
  • terminal.ansiBrightGreen#a8c98b
  • terminal.ansiBrightMagenta#d198c7
  • terminal.ansiBrightRed#bf616a
  • terminal.ansiBrightWhite#eceff4
  • terminal.ansiBrightYellow#ebcb8b
  • terminal.ansiCyan#91e2f9
  • terminal.ansiGreen#a8c98b
  • terminal.ansiMagenta#d198c7
  • terminal.ansiRed#bf616a
  • terminal.ansiWhite#e5e9f0
  • terminal.ansiYellow#ebcb8b
  • terminal.background#2e3440
  • terminal.foreground#d8dee9
  • terminal.tab.activeBorder#91e2f9
  • textBlockQuote.background#3b4252
  • textBlockQuote.border#8db0e6
  • textCodeBlock.background#4c566a
  • textLink.activeForeground#91e2f9
  • textLink.foreground#91e2f9
  • textPreformat.foreground#6bd6c1
  • textSeparator.foreground#eceff4
  • titleBar.activeBackground#2e3440
  • titleBar.activeForeground#d8dee9
  • titleBar.border#2e344000
  • titleBar.inactiveBackground#2e3440
  • titleBar.inactiveForeground#d8dee966
  • tree.indentGuidesStroke#7d8494
  • walkThrough.embeddedEditorBackground#2e3440
  • welcomePage.buttonBackground#434c5e
  • welcomePage.buttonHoverBackground#4c566a
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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