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#2E3440
  • activityBar.activeBorder#88c0d0
  • activityBar.background#1c2026
  • activityBar.dropBackground#2E3440
  • activityBar.foreground#f1faee
  • activityBarBadge.background#88c0d0
  • activityBarBadge.foreground#1c2026
  • badge.background#88c0d0
  • badge.foreground#1c2026
  • button.background#88c0d0ee
  • button.foreground#1c2026
  • button.hoverBackground#88c0d0
  • button.secondaryBackground#434c5e
  • button.secondaryForeground#f1faee
  • button.secondaryHoverBackground#4c566a
  • charts.blue#81a1c1
  • charts.foreground#f1faee
  • charts.green#a8dadc
  • charts.lines#88c0d0
  • charts.orange#d08770
  • charts.purple#4e9dcf
  • 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#1c2026
  • debugToolBar.background#2E3440
  • descriptionForeground#f1faeee6
  • diffEditor.insertedTextBackground#81a1c133
  • diffEditor.removedTextBackground#bf616a4d
  • dropdown.background#2E3440
  • dropdown.border#2E3440
  • dropdown.foreground#f1faee
  • editor.background#1c2026
  • editor.findMatchBackground#88c0d066
  • editor.findMatchHighlightBackground#88c0d033
  • editor.findRangeHighlightBackground#88c0d033
  • editor.focusedStackFrameHighlightBackground#5e81ac
  • editor.foreground#f1faee
  • editor.hoverHighlightBackground#2E3440
  • editor.inactiveSelectionBackground#434c5ecc
  • editor.inlineValuesBackground#4c566a
  • editor.inlineValuesForeground#eceff4
  • editor.lineHighlightBackground#2E3440
  • editor.lineHighlightBorder#2E3440
  • editor.rangeHighlightBackground#434c5e52
  • editor.selectionBackground#434c5ecc
  • editor.selectionHighlightBackground#434c5ecc
  • editor.stackFrameHighlightBackground#5e81ac
  • editor.wordHighlightBackground#81a1c166
  • editor.wordHighlightStrongBackground#81a1c199
  • editorActiveLineNumber.foreground#f1faeecc
  • editorBracketHighlight.foreground1#a8dadc
  • editorBracketHighlight.foreground2#88c0d0
  • editorBracketHighlight.foreground3#81a1c1
  • editorBracketHighlight.foreground4#5e81ac
  • editorBracketHighlight.foreground5#a8dadc
  • editorBracketHighlight.foreground6#88c0d0
  • editorBracketHighlight.unexpectedBracket.foreground#bf616a
  • editorBracketMatch.background#1c2026
  • editorBracketMatch.border#88c0d0
  • editorCodeLens.foreground#1c2026
  • editorCursor.foreground#f1faee
  • editorError.border#bf616a00
  • editorError.foreground#bf616a
  • editorGroup.background#1c2026
  • editorGroup.border#2E3440
  • editorGroup.dropBackground#2E3440
  • editorGroupHeader.border#2E3440
  • editorGroupHeader.noTabsBackground#1c2026
  • editorGroupHeader.tabsBackground#1c2026
  • editorGroupHeader.tabsBorder#2E3440
  • editorGutter.addedBackground#a8dadc
  • editorGutter.background#1c2026
  • editorGutter.deletedBackground#bf616a
  • editorGutter.modifiedBackground#ebcb8b
  • editorHint.border#ebcb8b00
  • editorHint.foreground#ebcb8b
  • editorHoverWidget.background#2E3440
  • editorHoverWidget.border#2E3440
  • editorIndentGuide.activeBackground#4c566a
  • editorIndentGuide.background#434c5eb3
  • editorInlayHint.background#434c5e
  • editorInlayHint.foreground#f1faee
  • editorLineNumber.activeForeground#f1faee
  • editorLineNumber.foreground#4c566a
  • editorLink.activeForeground#88c0d0
  • editorMarkerNavigation.background#5e81acc0
  • editorMarkerNavigationError.background#bf616ac0
  • editorMarkerNavigationWarning.background#ebcb8bc0
  • editorOverviewRuler.addedForeground#a8dadc
  • editorOverviewRuler.border#2E3440
  • editorOverviewRuler.currentContentForeground#2E3440
  • editorOverviewRuler.deletedForeground#bf616a
  • editorOverviewRuler.errorForeground#bf616a
  • editorOverviewRuler.findMatchForeground#88c0d066
  • editorOverviewRuler.incomingContentForeground#2E3440
  • editorOverviewRuler.infoForeground#81a1c1
  • editorOverviewRuler.modifiedForeground#ebcb8b
  • editorOverviewRuler.rangeHighlightForeground#88c0d066
  • editorOverviewRuler.selectionHighlightForeground#88c0d066
  • editorOverviewRuler.warningForeground#ebcb8b
  • editorOverviewRuler.wordHighlightForeground#88c0d066
  • editorOverviewRuler.wordHighlightStrongForeground#88c0d066
  • editorRuler.foreground#434c5e
  • editorSuggestWidget.background#1c2026
  • editorSuggestWidget.border#2E3440
  • editorSuggestWidget.focusHighlightForeground#88c0d0
  • editorSuggestWidget.foreground#f1faee
  • editorSuggestWidget.highlightForeground#88c0d0
  • editorSuggestWidget.selectedBackground#434c5e
  • editorSuggestWidget.selectedForeground#f1faee
  • editorWarning.border#ebcb8b00
  • editorWarning.foreground#ebcb8b
  • editorWhitespace.foreground#4c566ab3
  • editorWidget.background#1c2026
  • editorWidget.border#2E3440
  • errorForeground#bf616a
  • extensionButton.prominentBackground#434c5e
  • extensionButton.prominentForeground#f1faee
  • extensionButton.prominentHoverBackground#4c566a
  • focusBorder#2E3440
  • foreground#f1faee
  • gitDecoration.conflictingResourceForeground#5e81ac
  • gitDecoration.deletedResourceForeground#bf616a
  • gitDecoration.ignoredResourceForeground#f1faee66
  • gitDecoration.modifiedResourceForeground#ebcb8b
  • gitDecoration.stageDeletedResourceForeground#bf616a
  • gitDecoration.stageModifiedResourceForeground#ebcb8b
  • gitDecoration.submoduleResourceForeground#a8dadc
  • gitDecoration.untrackedResourceForeground#a8dadc
  • input.background#2E3440
  • input.border#2E3440
  • input.foreground#f1faee
  • input.placeholderForeground#f1faee99
  • inputOption.activeBackground#5e81ac
  • inputOption.activeBorder#5e81ac
  • inputOption.activeForeground#eceff4
  • 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#f1faee
  • list.activeSelectionBackground#88c0d0
  • list.activeSelectionForeground#1c2026
  • list.dropBackground#88c0d099
  • list.errorForeground#bf616a
  • list.focusBackground#88c0d099
  • list.focusForeground#f1faee
  • list.focusHighlightForeground#eceff4
  • list.highlightForeground#88c0d0
  • list.hoverBackground#2E3440
  • list.hoverForeground#eceff4
  • list.inactiveFocusBackground#434c5ecc
  • list.inactiveSelectionBackground#434c5e
  • list.inactiveSelectionForeground#f1faee
  • list.warningForeground#ebcb8b
  • merge.border#2E3440
  • merge.currentContentBackground#81a1c14d
  • merge.currentHeaderBackground#81a1c166
  • merge.incomingContentBackground#a8dadc4d
  • merge.incomingHeaderBackground#a8dadc66
  • minimap.background#1c2026
  • minimap.errorHighlight#bf616acc
  • minimap.findMatchHighlight#88c0d0
  • minimap.selectionHighlight#88c0d0cc
  • minimap.warningHighlight#ebcb8bcc
  • minimapGutter.addedBackground#a8dadc
  • minimapGutter.deletedBackground#bf616a
  • minimapGutter.modifiedBackground#ebcb8b
  • minimapSlider.activeBackground#434c5eaa
  • minimapSlider.background#434c5e99
  • minimapSlider.hoverBackground#434c5eaa
  • notification.background#2E3440
  • notification.buttonBackground#434c5e
  • notification.buttonForeground#f1faee
  • notification.buttonHoverBackground#4c566a
  • notification.errorBackground#bf616a
  • notification.errorForeground#1c2026
  • notification.foreground#f1faee
  • notification.infoBackground#88c0d0
  • notification.infoForeground#1c2026
  • notification.warningBackground#ebcb8b
  • notification.warningForeground#1c2026
  • notificationCenter.border#2E3440
  • notificationCenterHeader.background#1c2026
  • notificationCenterHeader.foreground#88c0d0
  • notificationLink.foreground#88c0d0
  • notifications.background#2E3440
  • notifications.border#1c2026
  • notifications.foreground#f1faee
  • notificationToast.border#2E3440
  • panel.background#1c2026
  • panel.border#2E3440
  • panelTitle.activeBorder#88c0d000
  • panelTitle.activeForeground#88c0d0
  • panelTitle.inactiveForeground#f1faee
  • peekView.border#4c566a
  • peekViewEditor.background#1c2026
  • peekViewEditor.matchHighlightBackground#88c0d04d
  • peekViewEditorGutter.background#1c2026
  • peekViewResult.background#1c2026
  • peekViewResult.fileForeground#88c0d0
  • peekViewResult.lineForeground#f1faee66
  • peekViewResult.matchHighlightBackground#88c0d0cc
  • peekViewResult.selectionBackground#434c5e
  • peekViewResult.selectionForeground#f1faee
  • peekViewTitle.background#2E3440
  • peekViewTitleDescription.foreground#f1faee
  • peekViewTitleLabel.foreground#88c0d0
  • pickerGroup.border#2E3440
  • pickerGroup.foreground#88c0d0
  • progressBar.background#88c0d0
  • quickInputList.focusBackground#88c0d0
  • quickInputList.focusForeground#1c2026
  • sash.hoverBorder#88c0d0
  • scrollbar.shadow#00000066
  • scrollbarSlider.activeBackground#434c5eaa
  • scrollbarSlider.background#434c5e99
  • scrollbarSlider.hoverBackground#434c5eaa
  • selection.background#88c0d099
  • sideBar.background#1c2026
  • sideBar.border#2E3440
  • sideBar.foreground#f1faee
  • sideBarSectionHeader.background#2E3440
  • sideBarSectionHeader.foreground#f1faee
  • sideBarTitle.foreground#f1faee
  • statusBar.background#2E3440
  • statusBar.border#2E3440
  • statusBar.debuggingBackground#5e81ac
  • statusBar.debuggingForeground#f1faee
  • statusBar.foreground#f1faee
  • statusBar.noFolderBackground#2E3440
  • statusBar.noFolderForeground#f1faee
  • statusBarItem.activeBackground#4c566a
  • statusBarItem.errorBackground#2E3440
  • statusBarItem.errorForeground#bf616a
  • statusBarItem.hoverBackground#434c5e
  • statusBarItem.prominentBackground#2E3440
  • statusBarItem.prominentHoverBackground#434c5e
  • statusBarItem.warningBackground#ebcb8b
  • statusBarItem.warningForeground#1c2026
  • tab.activeBackground#2E3440
  • tab.activeBorder#88c0d000
  • tab.activeBorderTop#88c0d000
  • tab.activeForeground#f1faee
  • tab.border#2E3440
  • tab.hoverBackground#2E3440
  • tab.hoverBorder#88c0d000
  • tab.inactiveBackground#1c2026
  • tab.inactiveForeground#f1faee66
  • tab.lastPinnedBorder#4c566a
  • tab.unfocusedActiveBorder#88c0d000
  • tab.unfocusedActiveBorderTop#88c0d000
  • tab.unfocusedActiveForeground#f1faee99
  • tab.unfocusedHoverBackground#2E3440
  • tab.unfocusedHoverBorder#88c0d000
  • tab.unfocusedInactiveForeground#f1faee66
  • terminal.ansiBlack#2E3440
  • terminal.ansiBlue#81a1c1
  • terminal.ansiBrightBlack#4c566a
  • terminal.ansiBrightBlue#81a1c1
  • terminal.ansiBrightCyan#a8dadc
  • terminal.ansiBrightGreen#a8dadc
  • terminal.ansiBrightMagenta#4e9dcf
  • terminal.ansiBrightRed#bf616a
  • terminal.ansiBrightWhite#eceff4
  • terminal.ansiBrightYellow#ebcb8b
  • terminal.ansiCyan#88c0d0
  • terminal.ansiGreen#a8dadc
  • terminal.ansiMagenta#4e9dcf
  • terminal.ansiRed#bf616a
  • terminal.ansiWhite#e5e9f0
  • terminal.ansiYellow#ebcb8b
  • terminal.background#1c2026
  • terminal.foreground#f1faee
  • terminal.tab.activeBorder#88c0d0
  • textBlockQuote.background#2E3440
  • textBlockQuote.border#81a1c1
  • textCodeBlock.background#4c566a
  • textLink.activeForeground#88c0d0
  • textLink.foreground#88c0d0
  • textPreformat.foreground#a8dadc
  • textSeparator.foreground#eceff4
  • titleBar.activeBackground#1c2026
  • titleBar.activeForeground#f1faee
  • titleBar.border#1c2026
  • titleBar.inactiveBackground#1c2026
  • titleBar.inactiveForeground#f1faee66
  • tree.indentGuidesStroke#616e88
  • walkThrough.embeddedEditorBackground#1c2026
  • welcomePage.buttonBackground#434c5e
  • welcomePage.buttonHoverBackground#4c566a
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#f1faeeff
emphasisitalic
strongbold
comment#616E88
constant.character#EBCB8B
constant.character.escape#EBCB8B
constant.language#81A1C1
constant.numeric#4e9dcf
constant.regexp#EBCB8B
entity.name.class, entity.name.type.class#a8dadc
entity.name.function#88C0D0
entity.name.tag#81A1C1
entity.other.attribute-name#a8dadc
entity.other.inherited-class#a8dadcitalic
invalid.deprecated#f1faee
invalid.illegal#f1faee
keyword#81A1C1
keyword.operator#81A1C1
keyword.other.new#81A1C1
markup.boldbold
markup.changed#EBCB8B
markup.deleted#BF616A
markup.inserted#a8dadc
meta.preprocessor#5E81AC
punctuation#ECEFF4
punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters#ECEFF4
punctuation.definition.tag#81A1C1
punctuation.definition.comment, punctuation.end.definition.comment, punctuation.start.definition.comment#616E88
punctuation.section#ECEFF4
punctuation.section.embedded.begin, punctuation.section.embedded.end#81A1C1
punctuation.terminator#81A1C1
punctuation.definition.variable#81A1C1
storage#81A1C1
string#94afc199
string.regexp#EBCB8B
support.class#a8dadc
support.constant#81A1C1
support.function#88C0D0
support.function.construct#81A1C1
support.type#a8dadc
support.type.exception#a8dadc
token.debug-token#4e9dcf
token.error-token#bf616a
token.info-token#88c0d0
token.warn-token#ebcb8b
variable.other#f1faee
variable.language#81A1C1
variable.parameter#f1faee
punctuation.separator.pointer-access.c#81A1C1
source.c meta.preprocessor.include, source.c string.quoted.other.lt-gt.include#a8dadc
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#4e9dcf
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#f1faee
source.diff meta.diff.range.context#a8dadc
source.diff meta.diff.header.from-file#a8dadc
source.diff punctuation.definition.from-file#a8dadc
source.diff punctuation.definition.range#a8dadc
source.diff punctuation.definition.separator#81A1C1
entity.name.type.module.elixir#a8dadc
variable.other.readwrite.module.elixir#f1faeebold
constant.other.symbol.elixir#f1faeebold
variable.other.constant.elixir#a8dadc
source.go constant.other.placeholder.go#EBCB8B
source.java comment.block.documentation.javadoc punctuation.definition.entity.html#81A1C1
source.java constant.other#f1faee
source.java keyword.other.documentation#a8dadc
source.java keyword.other.documentation.author.javadoc#a8dadc
source.java keyword.other.documentation.directive, source.java keyword.other.documentation.custom#a8dadc
source.java keyword.other.documentation.see.javadoc#a8dadc
source.java meta.method-call meta.method#88C0D0
source.java meta.tag.template.link.javadoc, source.java string.other.link.title.javadoc#a8dadc
source.java meta.tag.template.value.javadoc#88C0D0
source.java punctuation.definition.keyword.javadoc#a8dadc
source.java punctuation.definition.tag.begin.javadoc, source.java punctuation.definition.tag.end.javadoc#616E88
source.java storage.modifier.import#a8dadc
source.java storage.modifier.package#a8dadc
source.java storage.type#a8dadc
source.java storage.type.annotation#D08770
source.java storage.type.generic#a8dadc
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#a8dadc
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#ECEFF4
source.js string.template meta.template.expression support.variable.property, source.js string.template meta.template.expression variable.other.object#f1faee
source.js support.type.primitive#81A1C1
source.js variable.other.object#f1faee
source.js variable.other.readwrite.alias#a8dadc
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#ECEFF4
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
text.html.markdown markup.fenced_code.block, text.html.markdown markup.fenced_code.block punctuation.definition#a8dadc
markup.heading#88C0D0
text.html.markdown markup.inline.raw, text.html.markdown markup.inline.raw punctuation.definition.raw#a8dadc
text.html.markdown markup.italicitalic
text.html.markdown markup.underline.linkunderline
text.html.markdown beginning.punctuation.definition.list#81A1C1
text.html.markdown beginning.punctuation.definition.quote#a8dadc
text.html.markdown markup.quote#616E88
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.heading#81A1C1
text.html.markdown punctuation.definition.constant, text.html.markdown punctuation.definition.string#81A1C1
text.html.markdown constant.other.reference.link, text.html.markdown string.other.link.description, text.html.markdown string.other.link.title#88C0D0
source.perl punctuation.definition.variable#f1faee
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#f1faee
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#f1faeeitalic
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#f1faee
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#a8dadc
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#a8dadc
source.ts support.variable, source.tsx support.variable#f1faee
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#ECEFF4
text.xml entity.name.tag.namespace#a8dadc
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#a8dadc