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#88c0d0
  • activityBar.background#2e3440
  • activityBar.dropBackground#3b4252
  • activityBar.foreground#d8dee9
  • activityBarBadge.background#88c0d0
  • activityBarBadge.foreground#2e3440
  • badge.background#88c0d0
  • badge.foreground#2e3440
  • button.background#88c0d0ee
  • button.foreground#2e3440
  • button.hoverBackground#88c0d0
  • 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#8290ab
  • debugConsole.warningForeground#ebcb8b
  • debugConsoleInputIcon.foreground#81a1c1
  • debugExceptionWidget.background#4c566a
  • debugExceptionWidget.border#2e3440
  • debugToolBar.background#3b4252
  • descriptionForeground#d8dee9e6
  • diffEditor.insertedTextBackground#81a1c133
  • diffEditor.removedTextBackground#bf616a4d
  • dropdown.background#3b4252
  • dropdown.border#3b4252
  • dropdown.foreground#d8dee9
  • editor.background#2e3440
  • editor.findMatchBackground#88c0d066
  • editor.findMatchBorder#88c0d0
  • editor.findMatchHighlightBackground#88c0d033
  • editor.findRangeHighlightBackground#88c0d033
  • 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#81a1c166
  • editor.wordHighlightStrongBackground#81a1c199
  • editorBracketHighlight.foreground1#8fbcbb
  • editorBracketHighlight.foreground2#88c0d0
  • editorBracketHighlight.foreground3#81a1c1
  • editorBracketHighlight.foreground4#5e81ac
  • editorBracketHighlight.foreground5#8fbcbb
  • editorBracketHighlight.foreground6#88c0d0
  • editorBracketHighlight.unexpectedBracket.foreground#bf616a
  • editorBracketMatch.background#2e344000
  • editorBracketMatch.border#88c0d0
  • editorCodeLens.foreground#4c566a
  • editorCursor.foreground#d8dee9
  • editorError.border#bf616a00
  • editorError.foreground#bf616a
  • editorGroup.border#3b425201
  • editorGroup.dropBackground#3b425299
  • editorGroupHeader.border#3b425200
  • editorGroupHeader.noTabsBackground#2e3440
  • editorGroupHeader.tabsBackground#2e3440
  • editorGroupHeader.tabsBorder#3b425200
  • editorGutter.addedBackground#a3be8c
  • editorGutter.background#2e3440
  • editorGutter.deletedBackground#bf616a
  • editorGutter.modifiedBackground#ebcb8b
  • editorHint.border#ebcb8b00
  • editorHint.foreground#ebcb8b
  • editorHoverWidget.background#3b4252
  • editorHoverWidget.border#3b4252
  • editorIndentGuide.activeBackground1#4c566a
  • editorIndentGuide.background1#434c5eb3
  • editorInlayHint.background#434c5e
  • editorInlayHint.foreground#d8dee9
  • editorLineNumber.activeForeground#d8dee9
  • editorLineNumber.foreground#4c566a
  • 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#88c0d066
  • editorOverviewRuler.incomingContentForeground#3b4252
  • 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#2e3440
  • editorSuggestWidget.border#3b4252
  • 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#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#8fbcbb
  • gitDecoration.untrackedResourceForeground#a3be8c
  • 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#81a1c1
  • inputValidation.infoBorder#81a1c1
  • inputValidation.warningBackground#d08770
  • inputValidation.warningBorder#d08770
  • keybindingLabel.background#4c566a
  • keybindingLabel.border#4c566a
  • keybindingLabel.bottomBorder#4c566a
  • keybindingLabel.foreground#d8dee9
  • list.activeSelectionBackground#88c0d0
  • list.activeSelectionForeground#2e3440
  • list.dropBackground#88c0d099
  • list.errorForeground#bf616a
  • list.focusBackground#88c0d099
  • list.focusForeground#d8dee9
  • list.focusHighlightForeground#eceff4
  • list.highlightForeground#88c0d0
  • list.hoverBackground#3b4252
  • list.hoverForeground#eceff4
  • list.inactiveFocusBackground#434c5ecc
  • list.inactiveSelectionBackground#434c5e
  • list.inactiveSelectionForeground#d8dee9
  • list.warningForeground#ebcb8b
  • menu.background#3b4252
  • menu.foreground#d8dee9
  • menu.selectionBackground#434c5e
  • menu.selectionForeground#88c0d0
  • menu.separatorBackground#4c566a
  • merge.border#3b425200
  • merge.currentContentBackground#81a1c14d
  • merge.currentHeaderBackground#81a1c166
  • merge.incomingContentBackground#8fbcbb4d
  • merge.incomingHeaderBackground#8fbcbb66
  • minimap.background#2e3440
  • minimap.errorHighlight#bf616acc
  • minimap.findMatchHighlight#88c0d0
  • 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#2e3440
  • notificationCenterHeader.foreground#88c0d0
  • notificationLink.foreground#88c0d0
  • notifications.background#3b4252
  • notifications.border#2e3440
  • notifications.foreground#d8dee9
  • notificationToast.border#3b425200
  • panel.background#2e3440
  • panel.border#3b4252
  • panelTitle.activeBorder#88c0d000
  • panelTitle.activeForeground#88c0d0
  • panelTitle.inactiveForeground#d8dee9
  • peekView.border#4c566a
  • peekViewEditor.background#2e3440
  • peekViewEditor.matchHighlightBackground#88c0d04d
  • peekViewEditorGutter.background#2e3440
  • peekViewResult.background#2e3440
  • 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#88c0d0
  • quickInput.background#2e3440
  • quickInput.foreground#d8dee9
  • quickInputList.focusBackground#88c0d0
  • quickInputList.focusForeground#2e3440
  • sash.hoverBorder#88c0d0
  • scrollbar.shadow#00000066
  • scrollbarSlider.activeBackground#434c5eaa
  • scrollbarSlider.background#434c5e99
  • scrollbarSlider.hoverBackground#434c5eaa
  • selection.background#88c0d099
  • 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#88c0d000
  • tab.activeBorderTop#88c0d000
  • tab.activeForeground#d8dee9
  • tab.border#3b425200
  • tab.hoverBackground#3b4252cc
  • tab.hoverBorder#88c0d000
  • tab.inactiveBackground#2e3440
  • tab.inactiveForeground#d8dee966
  • 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#2e3440
  • terminal.foreground#d8dee9
  • terminal.tab.activeBorder#88c0d0
  • terminalCursor.foreground#d8dee9
  • textBlockQuote.background#3b4252
  • textBlockQuote.border#81a1c1
  • textCodeBlock.background#4c566a
  • textLink.activeForeground#88c0d0
  • textLink.foreground#88c0d0
  • textPreformat.foreground#8fbcbb
  • textSeparator.foreground#eceff4
  • titleBar.activeBackground#2e3440
  • titleBar.activeForeground#d8dee9
  • titleBar.border#2e344000
  • titleBar.inactiveBackground#2e3440
  • titleBar.inactiveForeground#d8dee966
  • tree.indentGuidesStroke#616e88
  • 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, punctuation.definition.comment#8290abitalic
constant.character, constant.character.escape, constant.regexp#EBCB8B
constant.language#81A1C1
constant.numeric#B48EAD
entity.name.class, entity.name.type.class, entity.name.type, support.class, support.type, support.type.exception#8FBCBB
entity.name.function, support.function#88C0D0
entity.name.tag#81A1C1
entity.other.attribute-name#8FBCBB
entity.other.inherited-class#8FBCBBbold
invalid.deprecated#D8DEE9
invalid.illegal#D8DEE9
keyword, keyword.operator, keyword.other.new, storage, variable.language#81A1C1
markup.boldbold
markup.changed#EBCB8B
markup.deleted#BF616A
markup.inserted#A3BE8C
markup.heading, text.html.markdown constant.other.reference.link, text.html.markdown string.other.link.description, text.html.markdown string.other.link.title#88C0D0
text.html.markdown markup.italicitalic
text.html.markdown markup.underline.linkunderline
text.html.markdown markup.inline.raw, text.html.markdown markup.fenced_code.block, text.html.markdown markup.fenced_code.block punctuation.definition#8FBCBB
text.html.markdown markup.quote#8290ab
text.html.markdown punctuation.definition.heading, text.html.markdown beginning.punctuation.definition.list, text.html.markdown punctuation.definition.constant, text.html.markdown punctuation.definition.string#81A1C1
meta.preprocessor#5E81AC
punctuation, punctuation.section, punctuation.definition.parameters#ECEFF4
punctuation.definition.tag, punctuation.section.embedded.begin, punctuation.section.embedded.end, punctuation.terminator, punctuation.definition.variable#81A1C1
string#A3BE8C
string.regexp#EBCB8B
support.constant, support.function.construct#81A1C1
variable.other, variable.parameter#D8DEE9
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, source.js punctuation.decorator, source.js meta.decorator variable.other.readwrite, source.js meta.decorator entity.name.function, source.python entity.name.function.decorator, source.python meta.function.decorator support.type#D08770
source.js meta.object-literal.key, 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, source.js 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, source.js variable.other.readwrite.alias, source.js storage.type.class.jsdoc#8FBCBB
source.js support.type.primitive, source.ts support.type.primitive, source.tsx support.type.primitive#81A1C1
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, source.ts string.template punctuation.definition.template-expression, source.tsx string.template punctuation.definition.template-expression#81A1C1
source.python meta.function-call.generic, source.python support.type#88C0D0
source.python meta.function.parameters variable.parameter.function.language.special.self#81A1C1
source.css support.type.property-name#D8DEE9
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 constant.other.color.rgb-value#B48EAD
source.yaml entity.name.tag#8FBCBB
source.diff meta.diff.range.context, source.diff meta.diff.header.from-file, source.diff punctuation.definition.from-file, source.diff punctuation.definition.range#8FBCBB
source.diff punctuation.definition.separator#81A1C1