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.activeBorder#81a1c1
  • activityBar.background#232831
  • activityBar.border#232831
  • activityBar.dropBorder#81a1c1
  • activityBar.foreground#cdcecf
  • activityBar.inactiveForeground#7e8188
  • activityBarBadge.background#81a1c1
  • activityBarBadge.foreground#232831
  • badge.background#81a1c1
  • badge.foreground#232831
  • breadcrumb.activeSelectionForeground#c7cdd9
  • breadcrumb.focusForeground#cdcecf
  • breadcrumb.foreground#7e8188
  • breadcrumbPicker.background#232831
  • button.background#81a1c1
  • button.foreground#232831
  • button.hoverBackground#668aab
  • button.secondaryBackground#444c5e
  • button.secondaryForeground#cdcecf
  • button.secondaryHoverBackground#5a657d
  • charts.blue#81a1c1
  • charts.foreground#cdcecf
  • charts.green#a3be8c
  • charts.lines#5a657d
  • charts.orange#c9826b
  • charts.purple#b48ead
  • charts.red#bf616a
  • charts.yellow#ebcb8b
  • checkbox.background#39404f
  • checkbox.border#5a657d
  • checkbox.foreground#cdcecf
  • debugConsole.errorForeground#bf616a
  • debugConsole.infoForeground#abb1bb
  • debugConsole.sourceForeground#ebcb8b
  • debugConsole.warningForeground#ebcb8b
  • debugConsoleInputIcon.foreground#a3be8c
  • debugIcon.breakpointDisabledForeground#7e8188
  • debugIcon.breakpointForeground#bf616a
  • debugToolBar.background#232831
  • debugToolBar.border#5a657d
  • descriptionForeground#7e8188
  • diffEditor.diagonalFill#5a657d
  • diffEditor.insertedLineBackground#a3be8c1a
  • diffEditor.insertedTextBackground#a3be8c22
  • diffEditor.removedLineBackground#bf616a1a
  • diffEditor.removedTextBackground#bf616a22
  • disabledForeground#7e8188
  • dropdown.background#39404f
  • dropdown.border#5a657d
  • dropdown.foreground#cdcecf
  • dropdown.listBackground#39404f
  • editor.background#2e3440
  • editor.findMatchBackground#ebcb8b44
  • editor.findMatchHighlightBackground#ebcb8b22
  • editor.findRangeHighlightBackground#3e4a5b80
  • editor.focusedStackFrameHighlightBackground#a3be8c22
  • editor.foreground#cdcecf
  • editor.hoverHighlightBackground#81a1c133
  • editor.inactiveSelectionBackground#3e4a5b
  • editor.lineHighlightBackground#39404f
  • editor.rangeHighlightBackground#39404f80
  • editor.selectionBackground#4f6074
  • editor.selectionHighlightBackground#3e4a5b80
  • editor.stackFrameHighlightBackground#ebcb8b22
  • editor.wordHighlightBackground#81a1c126
  • editor.wordHighlightStrongBackground#88c0d026
  • editorBracketHighlight.foreground1#ebcb8b
  • editorBracketHighlight.foreground2#81a1c1
  • editorBracketHighlight.foreground3#b48ead
  • editorBracketHighlight.foreground4#88c0d0
  • editorBracketHighlight.foreground5#a3be8c
  • editorBracketHighlight.foreground6#c9826b
  • editorBracketHighlight.unexpectedBracket.foreground#bf616a
  • editorBracketMatch.background#81a1c133
  • editorBracketMatch.border#81a1c100
  • editorCodeLens.foreground#60728a
  • editorCursor.foreground#7e8188
  • editorError.foreground#bf616a
  • editorGhostText.foreground#7e8188
  • editorGroup.border#232831
  • editorGroup.dropBackground#81a1c133
  • editorGroupHeader.noTabsBackground#232831
  • editorGroupHeader.tabsBackground#232831
  • editorGroupHeader.tabsBorder#232831
  • editorGutter.addedBackground#a3be8c
  • editorGutter.background#2e3440
  • editorGutter.deletedBackground#bf616a
  • editorGutter.modifiedBackground#81a1c1
  • editorHint.foreground#a3be8c
  • editorHoverWidget.background#232831
  • editorHoverWidget.border#5a657d
  • editorHoverWidget.foreground#cdcecf
  • editorIndentGuide.activeBackground1#5a657d
  • editorIndentGuide.background1#39404f
  • editorInfo.foreground#81a1c1
  • editorLineNumber.activeForeground#abb1bb
  • editorLineNumber.foreground#5a657d
  • editorLink.activeForeground#81a1c1
  • editorOverviewRuler.addedForeground#a3be8c
  • editorOverviewRuler.border#232831
  • editorOverviewRuler.deletedForeground#bf616a
  • editorOverviewRuler.errorForeground#bf616a
  • editorOverviewRuler.findMatchForeground#ebcb8b88
  • editorOverviewRuler.infoForeground#81a1c1
  • editorOverviewRuler.modifiedForeground#81a1c1
  • editorOverviewRuler.warningForeground#ebcb8b
  • editorRuler.foreground#39404f
  • editorSuggestWidget.background#232831
  • editorSuggestWidget.border#5a657d
  • editorSuggestWidget.foreground#cdcecf
  • editorSuggestWidget.highlightForeground#81a1c1
  • editorSuggestWidget.selectedBackground#3e4a5b
  • editorUnnecessaryCode.opacity#00000080
  • editorWarning.foreground#ebcb8b
  • editorWhitespace.foreground#5a657d
  • editorWidget.background#232831
  • editorWidget.border#5a657d
  • editorWidget.foreground#cdcecf
  • errorForeground#bf616a
  • extensionBadge.remoteBackground#81a1c1
  • extensionBadge.remoteForeground#232831
  • extensionButton.prominentBackground#81a1c1
  • extensionButton.prominentForeground#232831
  • extensionButton.prominentHoverBackground#668aab
  • extensionIcon.starForeground#ebcb8b
  • extensionIcon.verifiedForeground#a3be8c
  • focusBorder#81a1c100
  • foreground#abb1bb
  • gitDecoration.conflictingResourceForeground#c9826b
  • gitDecoration.deletedResourceForeground#bf616a
  • gitDecoration.ignoredResourceForeground#7e8188
  • gitDecoration.modifiedResourceForeground#81a1c1
  • gitDecoration.stageDeletedResourceForeground#bf88bc
  • gitDecoration.stageModifiedResourceForeground#88c0d0
  • gitDecoration.submoduleResourceForeground#88c0d0
  • gitDecoration.untrackedResourceForeground#a3be8c
  • icon.foreground#abb1bb
  • input.background#232831
  • input.border#5a657d
  • input.foreground#cdcecf
  • input.placeholderForeground#7e8188
  • inputOption.activeBackground#81a1c133
  • inputOption.activeBorder#81a1c1
  • inputOption.activeForeground#c7cdd9
  • inputValidation.errorBackground#232831
  • inputValidation.errorBorder#bf616a
  • inputValidation.errorForeground#bf616a
  • inputValidation.infoBackground#232831
  • inputValidation.infoBorder#81a1c1
  • inputValidation.infoForeground#81a1c1
  • inputValidation.warningBackground#232831
  • inputValidation.warningBorder#ebcb8b
  • inputValidation.warningForeground#ebcb8b
  • list.activeSelectionBackground#3e4a5b
  • list.activeSelectionForeground#c7cdd9
  • list.dropBackground#81a1c133
  • list.errorForeground#bf616a
  • list.focusBackground#3e4a5b
  • list.focusForeground#c7cdd9
  • list.highlightForeground#81a1c1
  • list.hoverBackground#39404f80
  • list.hoverForeground#c7cdd9
  • list.inactiveSelectionBackground#39404f
  • list.inactiveSelectionForeground#cdcecf
  • list.invalidItemForeground#bf616a
  • list.warningForeground#ebcb8b
  • listFilterWidget.background#39404f
  • listFilterWidget.noMatchesOutline#bf616a
  • listFilterWidget.outline#81a1c1
  • menu.background#232831
  • menu.border#5a657d
  • menu.foreground#cdcecf
  • menu.selectionBackground#3e4a5b
  • menu.selectionForeground#c7cdd9
  • menu.separatorBackground#5a657d
  • menubar.selectionBackground#3e4a5b
  • menubar.selectionForeground#c7cdd9
  • merge.border#5a657d
  • merge.currentContentBackground#81a1c133
  • merge.currentHeaderBackground#81a1c166
  • merge.incomingContentBackground#a3be8c33
  • merge.incomingHeaderBackground#a3be8c66
  • notificationCenterHeader.background#232831
  • notificationCenterHeader.foreground#cdcecf
  • notificationLink.foreground#81a1c1
  • notifications.background#232831
  • notifications.border#5a657d
  • notifications.foreground#cdcecf
  • notificationsErrorIcon.foreground#bf616a
  • notificationsInfoIcon.foreground#81a1c1
  • notificationsWarningIcon.foreground#ebcb8b
  • panel.background#2e3440
  • panel.border#232831
  • panelInput.border#5a657d
  • panelTitle.activeBorder#81a1c1
  • panelTitle.activeForeground#c7cdd9
  • panelTitle.inactiveForeground#7e8188
  • peekView.border#81a1c1
  • peekViewEditor.background#232831
  • peekViewEditor.matchHighlightBackground#ebcb8b44
  • peekViewResult.background#232831
  • peekViewResult.foreground#abb1bb
  • peekViewResult.matchHighlightBackground#ebcb8b44
  • peekViewResult.selectionBackground#3e4a5b
  • peekViewResult.selectionForeground#c7cdd9
  • peekViewTitle.background#232831
  • peekViewTitleDescription.foreground#7e8188
  • peekViewTitleLabel.foreground#c7cdd9
  • pickerGroup.border#5a657d
  • pickerGroup.foreground#81a1c1
  • problemsErrorIcon.foreground#bf616a
  • problemsInfoIcon.foreground#81a1c1
  • problemsWarningIcon.foreground#ebcb8b
  • progressBar.background#81a1c1
  • quickInput.background#232831
  • quickInput.foreground#cdcecf
  • quickInputList.focusBackground#3e4a5b
  • sash.hoverBorder#81a1c1
  • scrollbar.shadow#00000059
  • scrollbarSlider.activeBackground#5a657dcc
  • scrollbarSlider.background#5a657d66
  • scrollbarSlider.hoverBackground#5a657d99
  • selection.background#4f6074
  • settings.checkboxBackground#39404f
  • settings.dropdownBackground#39404f
  • settings.dropdownForeground#cdcecf
  • settings.headerForeground#c7cdd9
  • settings.modifiedItemIndicator#81a1c1
  • settings.numberInputBackground#232831
  • settings.textInputBackground#232831
  • sideBar.background#232831
  • sideBar.border#232831
  • sideBar.foreground#abb1bb
  • sideBarSectionHeader.background#232831
  • sideBarSectionHeader.border#232831
  • sideBarSectionHeader.foreground#cdcecf
  • sideBarTitle.foreground#abb1bb
  • statusBar.background#232831
  • statusBar.border#232831
  • statusBar.debuggingBackground#c9826b
  • statusBar.debuggingForeground#232831
  • statusBar.foreground#abb1bb
  • statusBar.noFolderBackground#232831
  • statusBar.noFolderForeground#abb1bb
  • statusBarItem.activeBackground#abb1bb22
  • statusBarItem.errorBackground#232831
  • statusBarItem.errorForeground#bf616a
  • statusBarItem.hoverBackground#abb1bb1a
  • statusBarItem.prominentBackground#39404f
  • statusBarItem.prominentHoverBackground#444c5e
  • statusBarItem.remoteBackground#81a1c1
  • statusBarItem.remoteForeground#232831
  • statusBarItem.warningBackground#232831
  • statusBarItem.warningForeground#ebcb8b
  • symbolIcon.classForeground#ebcb8b
  • symbolIcon.colorForeground#88c0d0
  • symbolIcon.constantForeground#c9826b
  • symbolIcon.enumeratorForeground#ebcb8b
  • symbolIcon.functionForeground#668aab
  • symbolIcon.interfaceForeground#ebcb8b
  • symbolIcon.keywordForeground#b48ead
  • symbolIcon.methodForeground#668aab
  • symbolIcon.propertyForeground#88c0d0
  • symbolIcon.variableForeground#cdcecf
  • tab.activeBackground#2e3440
  • tab.activeBorder#2e3440
  • tab.activeBorderTop#81a1c1
  • tab.activeForeground#c7cdd9
  • tab.activeModifiedBorder#ebcb8b
  • tab.border#232831
  • tab.hoverBackground#2e3440
  • tab.hoverForeground#c7cdd9
  • tab.inactiveBackground#232831
  • tab.inactiveForeground#7e8188
  • tab.inactiveModifiedBorder#ebcb8b80
  • tab.lastPinnedBorder#5a657d
  • tab.unfocusedActiveForeground#abb1bb
  • tab.unfocusedInactiveForeground#7e8188
  • terminal.ansiBlack#3b4252
  • terminal.ansiBlue#81a1c1
  • terminal.ansiBrightBlack#465780
  • terminal.ansiBrightBlue#8cafd2
  • terminal.ansiBrightCyan#93ccdc
  • terminal.ansiBrightGreen#b1d196
  • terminal.ansiBrightMagenta#c895bf
  • terminal.ansiBrightRed#d06f79
  • terminal.ansiBrightWhite#e7ecf4
  • terminal.ansiBrightYellow#f0d399
  • terminal.ansiCyan#88c0d0
  • terminal.ansiGreen#a3be8c
  • terminal.ansiMagenta#b48ead
  • terminal.ansiRed#bf616a
  • terminal.ansiWhite#e5e9f0
  • terminal.ansiYellow#ebcb8b
  • terminal.background#2e3440
  • terminal.foreground#cdcecf
  • terminal.selectionBackground#4f6074
  • terminalCursor.foreground#7e8188
  • testing.iconErrored#bf616a
  • testing.iconFailed#bf616a
  • testing.iconPassed#a3be8c
  • testing.iconSkipped#ebcb8b
  • textBlockQuote.background#232831
  • textBlockQuote.border#5a657d
  • textCodeBlock.background#232831
  • textLink.activeForeground#88c0d0
  • textLink.foreground#81a1c1
  • textPreformat.foreground#c9826b
  • textSeparator.foreground#5a657d
  • titleBar.activeBackground#232831
  • titleBar.activeForeground#abb1bb
  • titleBar.border#232831
  • titleBar.inactiveBackground#232831
  • titleBar.inactiveForeground#7e8188
  • tree.indentGuidesStroke#5a657d
  • walkThrough.embeddedEditorBackground#232831
  • welcomePage.progress.foreground#81a1c1
  • welcomePage.tileBackground#232831
  • welcomePage.tileHoverBackground#39404f
  • widget.shadow#00000059

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#60728aitalic
variable, string constant.other.placeholder#cdcecf
constant.other.color#cdcecf
invalid, invalid.illegal#bf616a
keyword, storage.type, storage.modifier, keyword.operator.word, keyword.operator.new#b48ead
keyword.control, constant.other.color, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#b48ead
keyword.operator, punctuation.accessor, punctuation.definition.generic#88c0d0
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#668aab
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#668aabitalic
meta.block variable.other#cdcecf
support.other.variable, string.other.link#cdcecf
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other.zero-index#c9826b
constant.language.boolean#ebcb8b
constant.numeric, variable.other.constant, entity.name.constant#ebcb8b
variable.parameter, meta.function.parameters#a96ca5italic
constant.language, support.function.builtin, variable.language.this#bf616a
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#a3be8c
entity.name.class, entity.name.type.class, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#ebcb8bitalic
meta.type, support.type, entity.name.type#ebcb8bitalic
storage.type#b48ead
entity.name.enum#ebcb8bitalic
meta.enum variable.other.readwrite, variable.other.enummember#88c0d0
meta.property.object, variable.object.property, variable.other.object.property#88c0d0
punctuation.definition.typeparameters, meta.type.parameters#93ccdc
meta.decorator, punctuation.decorator, meta.annotation, storage.type.annotation#ebcb8b
entity.name.namespace#ebcb8b
keyword.control.directive, punctuation.definition.directive#ebcb8b
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#bf616a
variable.language#bf616aitalic
entity.name.method.js#668aabitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#668aab
entity.other.attribute-name#ebcb8b
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#ebcb8bitalic
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#88c0d0
source.css entity.other.attribute-name.pseudo-class, punctuation.separator.operator.css#88c0d0
source.css entity.other.attribute-name.class.css#ebcb8b
support.type.primitive, entity.name.type.numeric#b48ead
support.type.object, support.constant#b48ead
markup.inserted#a3be8c
markup.deleted#bf616a
markup.changed#ebcb8b
meta.diff.header.from-file, meta.diff.header.to-file, punctuation.definition.from-file.diff, punctuation.definition.to-file.diff#668aab
string.regexp#88c0d0
constant.character.escape#abb1bb
*url*, *link*, *uri*#cdcecfunderline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#668aabitalic
source.js constant.other.object.key.js string.unquoted.label.js#b48ead
source.json meta.structure.dictionary.json support.type.property-name.json#668aab
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json support.type.property-name.json#b48ead
text.html.markdown, punctuation.definition.list_item.markdown#cdcecf
text.html.markdown markup.inline.raw.markdown#a3be8c
text.html.markdown meta.dummy.line-break#60728a
markdown.heading, markup.heading.markdown, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#668aab
markup.italic#bf616aitalic
markup.bold, markup.bold string#bf616abold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#bf616abold
markup.underline#c9826bunderline
markup.quote punctuation.definition.blockquote.markdown#abb1bb
markup.quote#abb1bbitalic
string.other.link.title.markdown#81a1c1
string.other.link.description.title.markdown#b48ead
constant.other.reference.link.markdown#ebcb8b
markup.raw.block#b48ead
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown#a3be8c
meta.separator.markdown#88c0d0
punctuation.definition.list.begin.markdown, markup.list#88c0d0