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#d8dee980
  • activityBar.background#2e3440
  • activityBar.border#2e3440
  • activityBar.foreground#88c0d0
  • activityBar.inactiveForeground#d8dee990
  • activityBarBadge.background#88c0d0
  • activityBarBadge.foreground#2e3440
  • badge.background#88c0d0
  • badge.foreground#3b4252
  • breadcrumb.activeSelectionForeground#d8dee9
  • breadcrumb.background#2e3440
  • breadcrumb.focusForeground#d8dee9
  • breadcrumb.foreground#88c0d0
  • breadcrumbPicker.background#3b4252
  • button.background#88c0d0
  • button.foreground#2e3440
  • button.hoverBackground#88c0d090
  • button.secondaryBackground#88c0d090
  • button.secondaryForeground#3b4252
  • button.secondaryHoverBackground#88c0d080
  • descriptionForeground#d8dee9
  • dropdown.background#3b4252
  • dropdown.border#d8dee9
  • dropdown.foreground#d8dee9
  • editor.background#2e3440
  • editor.findMatchBackground#88c0d085
  • editor.findMatchBorder#88c0d0
  • editor.findMatchHighlightBackground#88c0d040
  • editor.findMatchHighlightBorder#88c0d080
  • editor.findRangeHighlightBackground#88c0d040
  • editor.findRangeHighlightBorder#88c0d080
  • editor.foreground#d8dee9
  • editor.hoverHighlightBackground#88c0d040
  • editor.inactiveSelectionBackground#88c0d040
  • editor.lineHighlightBackground#3b4252
  • editor.lineHighlightBorder#3b4252
  • editor.rangeHighlightBackground#88c0d040
  • editor.rangeHighlightBorder#88c0d080
  • editor.selectionBackground#434c5e
  • editor.selectionForeground#eceff4
  • editor.selectionHighlightBackground#3b425290
  • editor.symbolHighlightBackground#88c0d040
  • editor.symbolHighlightBorder#88c0d080
  • editor.wordHighlightBackground#88c0d040
  • editor.wordHighlightBorder#88c0d080
  • editor.wordHighlightStrongBackground#88c0d040
  • editor.wordHighlightStrongBorder#88c0d080
  • editorBracketHighlight.foreground1#d8dee9
  • editorBracketHighlight.foreground2#d8dee9
  • editorBracketHighlight.foreground3#d8dee9
  • editorBracketHighlight.foreground4#d8dee9
  • editorBracketHighlight.foreground5#d8dee9
  • editorBracketHighlight.foreground6#d8dee9
  • editorCodeLens.foreground#88c0d0
  • editorCursor.background#2e3440
  • editorCursor.foreground#d8dee9
  • editorError.border#bf616a80
  • editorError.foreground#bf616a
  • editorGhostText.background#3b4252
  • editorGhostText.foreground#d8dee9
  • editorGroup.border#88c0d0
  • editorGroupHeader.noTabsBackground#2e3440
  • editorGroupHeader.tabsBackground#2e3440
  • editorGroupHeader.tabsBorder#2e3440
  • editorGutter.addedBackground#a3be8c
  • editorGutter.background#2e3440
  • editorGutter.deletedBackground#bf616a
  • editorGutter.foldingControlForeground#88c0d0
  • editorGutter.modifiedBackground#88c0d0
  • editorHoverWidget.background#3b4252
  • editorHoverWidget.border#88c0d0
  • editorHoverWidget.foreground#d8dee9
  • editorIndentGuide.activeBackground#88c0d0
  • editorIndentGuide.background#88c0d040
  • editorInfo.border#88c0d080
  • editorInfo.foreground#88c0d0
  • editorLineNumber.activeForeground#d8dee9
  • editorLineNumber.foreground#88c0d085
  • editorLink.activeForeground#88c0d0
  • editorMarkerNavigation.background#3b4252
  • editorMarkerNavigationError.background#bf616a
  • editorMarkerNavigationInfo.background#88c0d0
  • editorMarkerNavigationWarning.background#ebcb8b
  • editorOverviewRuler.addedForeground#a3be8c
  • editorOverviewRuler.background#2e3440
  • editorOverviewRuler.border#88c0d0
  • editorOverviewRuler.deletedForeground#bf616a
  • editorOverviewRuler.errorForeground#bf616a
  • editorOverviewRuler.findMatchForeground#88c0d0
  • editorOverviewRuler.infoForeground#88c0d0
  • editorOverviewRuler.modifiedForeground#88c0d0
  • editorOverviewRuler.rangeHighlightForeground#88c0d0
  • editorOverviewRuler.selectionHighlightForeground#88c0d0
  • editorOverviewRuler.warningForeground#ebcb8b
  • editorOverviewRuler.wordHighlightForeground#88c0d0
  • editorOverviewRuler.wordHighlightStrongForeground#88c0d0
  • editorRuler.foreground#88c0d0
  • editorSuggestWidget.background#3b4252
  • editorSuggestWidget.border#88c0d0
  • editorSuggestWidget.foreground#d8dee9
  • editorSuggestWidget.highlightForeground#88c0d0
  • editorSuggestWidget.selectedBackground#88c0d085
  • editorWarning.border#ebcb8b80
  • editorWarning.foreground#ebcb8b
  • editorWhitespace.foreground#d8dee930
  • editorWidget.background#3b4252
  • editorWidget.border#88c0d0
  • editorWidget.foreground#d8dee9
  • editorWidget.resizeBorder#88c0d0
  • errorForeground#bf616a
  • extensionButton.prominentBackground#88c0d0
  • extensionButton.prominentForeground#2e3440
  • extensionButton.prominentHoverBackground#88c0d085
  • focusBorder#88c0d0
  • foreground#d8dee9
  • gitDecoration.conflictingResourceForeground#ebcb8b85
  • gitDecoration.deletedResourceForeground#bf616a85
  • gitDecoration.ignoredResourceForeground#d8dee985
  • gitDecoration.modifiedResourceForeground#88c0d085
  • gitDecoration.submoduleResourceForeground#88c0d0
  • gitDecoration.untrackedResourceForeground#a3be8c85
  • icon.foreground#d8dee9
  • input.background#3b4252
  • input.border#d8dee9
  • input.foreground#88c0d0
  • input.placeholderForeground#d8dee9
  • inputOption.activeBackground#88c0d0
  • inputOption.activeBorder#88c0d0
  • inputOption.activeForeground#d8dee990
  • inputValidation.errorBackground#3b4252
  • inputValidation.errorBorder#bf616a
  • inputValidation.infoBackground#2e3440
  • inputValidation.infoBorder#88c0d0
  • inputValidation.warningBackground#2e3440
  • inputValidation.warningBorder#88c0d0
  • keybindingLabel.background#3b4252
  • keybindingLabel.border#88c0d0
  • keybindingLabel.bottomBorder#88c0d0
  • keybindingLabel.foreground#88c0d0
  • list.activeSelectionBackground#88c0d085
  • list.activeSelectionForeground#88c0d0
  • list.deemphasizedForeground#88c0d085
  • list.errorForeground#bf616a
  • list.filterMatchBackground#88c0d085
  • list.filterMatchBorder#88c0d0
  • list.focusBackground#88c0d085
  • list.focusForeground#88c0d0
  • list.focusOutline#88c0d0
  • list.highlightForeground#88c0d0
  • list.hoverBackground#88c0d085
  • list.inactiveSelectionBackground#88c0d085
  • list.inactiveSelectionForeground#88c0d0
  • list.invalidItemForeground#88c0d0
  • listFilterWidget.background#3b4252
  • listFilterWidget.noMatchesOutline#bf616a
  • listFilterWidget.outline#88c0d0
  • minimap.background#2e3440
  • minimap.errorHighlight#bf616a
  • minimap.findMatchHighlight#88c0d085
  • minimap.selectionHighlight#d8dee985
  • minimapGutter.addedBackground#a3be8c
  • minimapGutter.deletedBackground#bf616a
  • minimapGutter.modifiedBackground#88c0d0
  • notification.background#3b4252
  • notification.buttonBackground#88c0d0
  • notification.buttonForeground#2e3440
  • notification.buttonHoverBackground#88c0d085
  • notification.errorBackground#bf616a
  • notification.errorForeground#2e3440
  • notification.foreground#d8dee9
  • notification.infoBackground#88c0d0
  • notification.infoForeground#2e3440
  • notification.warningBackground#ebcb8b
  • notification.warningForeground#2e3440
  • panel.background#2e3440
  • panel.border#88c0d0
  • panelTitle.activeBorder#88c0d0
  • panelTitle.activeForeground#d8dee9
  • panelTitle.inactiveForeground#88c0d085
  • peekView.background#3b4252
  • peekView.border#88c0d0
  • peekViewEditor.background#2e3440
  • peekViewEditor.matchHighlightBackground#88c0d040
  • peekViewResult.background#3b4252
  • peekViewResult.fileForeground#d8dee9
  • peekViewResult.lineForeground#88c0d0
  • peekViewResult.matchHighlightBackground#88c0d040
  • peekViewResult.selectionBackground#88c0d085
  • peekViewResult.selectionForeground#d8dee9
  • peekViewTitle.background#88c0d0
  • peekViewTitleDescription.foreground#2e3440
  • peekViewTitleLabel.foreground#2e3440
  • pickerGroup.border#88c0d0
  • pickerGroup.foreground#88c0d0
  • progressBar.background#88c0d0
  • scrollbar.shadow#88c0d0
  • scrollbarSlider.activeBackground#88c0d0
  • scrollbarSlider.background#88c0d0
  • scrollbarSlider.hoverBackground#88c0d0
  • selection.background#88c0d040
  • settings.headerForeground#88c0d0
  • settings.modifiedItemIndicator#88c0d0
  • sideBar.background#2e3440
  • sideBar.border#2e3440
  • sideBarSectionHeader.background#2e3440
  • sideBarSectionHeader.border#2e3440
  • sideBarSectionHeader.foreground#88c0d0
  • sideBarTitle.foreground#88c0d0
  • statusBar.background#2e3440
  • statusBar.border#2e3440
  • statusBar.debuggingBackground#bf616a
  • statusBar.debuggingForeground#2e3440
  • statusBar.foreground#d8dee9
  • statusBar.noFolderBackground#2e3440
  • statusBar.noFolderForeground#d8dee9
  • statusBarItem.activeBackground#88c0d0
  • statusBarItem.hoverBackground#88c0d085
  • statusBarItem.prominentBackground#88c0d0
  • statusBarItem.prominentHoverBackground#88c0d085
  • tab.activeBackground#3b4252
  • tab.activeBorder#88c0d0
  • tab.activeBorderTop#88c0d0
  • tab.activeForeground#d8dee9
  • tab.border#2e3440
  • tab.hoverBackground#3b4252
  • tab.hoverBorder#88c0d0
  • tab.hoverForeground#d8dee9
  • tab.inactiveBackground#2e3440
  • tab.inactiveForeground#88c0d085
  • tab.unfocusedActiveBackground#3b4252
  • tab.unfocusedActiveBorder#88c0d085
  • tab.unfocusedActiveBorderTop#88c0d085
  • tab.unfocusedActiveForeground#d8dee985
  • tab.unfocusedHoverBackground#3b4252
  • tab.unfocusedHoverBorder#88c0d085
  • tab.unfocusedHoverForeground#d8dee985
  • tab.unfocusedInactiveBackground#2e3440
  • tab.unfocusedInactiveForeground#88c0d085
  • 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.selectionBackground#434c5e
  • terminal.selectionForeground#eceff4
  • textBlockQuote.background#3b4252
  • textLink.activeForeground#d8dee990
  • textLink.foreground#88c0d0
  • textPreformat.foreground#88c0d0
  • titleBar.activeBackground#2e3440
  • titleBar.activeForeground#d8dee9
  • titleBar.border#2e3440
  • titleBar.inactiveBackground#2e3440
  • titleBar.inactiveForeground#d8dee985
  • tree.indentGuidesStroke#88c0d0
  • widget.shadow#d8dee990

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.definition.delayed.unison,punctuation.definition.list.begin.unison,punctuation.definition.list.end.unison,punctuation.definition.ability.begin.unison,punctuation.definition.ability.end.unison,punctuation.operator.assignment.as.unison,punctuation.separator.pipe.unison,punctuation.separator.delimiter.unison,punctuation.definition.hash.unison#d8dee9
variable.other.generic-type.haskell#d8dee9
storage.type.haskell#d8dee9
support.variable.magic.python#d8dee9
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python#d8dee9
variable.parameter.function.language.special.self.python#d8dee9
storage.modifier.lifetime.rust#d8dee9
support.function.std.rust#d8dee9
entity.name.lifetime.rust#d8dee9
variable.language.rust#d8dee9
support.constant.edge#d8dee9
constant.other.character-class.regexp#d8dee9
keyword.operator.quantifier.regexp#d8dee9
punctuation.definition.string.begin,punctuation.definition.string.end#d8dee9
variable.parameter.function#d8dee9
comment markup.link#4c566a
markup.changed.diff#d8dee9
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff#d8dee9
markup.inserted.diff#d8dee9
markup.deleted.diff#d8dee9
meta.function.c,meta.function.cpp#d8dee9
punctuation.section.block.begin.bracket.curly.cpp,punctuation.section.block.end.bracket.curly.cpp,punctuation.terminator.statement.c,punctuation.section.block.begin.bracket.curly.c,punctuation.section.block.end.bracket.curly.c,punctuation.section.parens.begin.bracket.round.c,punctuation.section.parens.end.bracket.round.c,punctuation.section.parameters.begin.bracket.round.c,punctuation.section.parameters.end.bracket.round.c#d8dee9
punctuation.separator.key-value#d8dee9
punctuation.terminator.statement.js,punctuation.terminator.statement.ts,punctuation.terminator.statement.tsx#d8dee9
support.constant.math#d8dee9
support.constant.property.math#d8dee9
variable.other.constant.js,variable.other.constant.ts,variable.other.constant.tsx#d8dee9
storage.type.annotation.java,storage.type.object.array.java#d8dee9
source.java#d8dee9
punctuation.section.block.begin.java,punctuation.section.block.end.java,punctuation.definition.method-parameters.begin.java,punctuation.definition.method-parameters.end.java,meta.method.identifier.java,punctuation.section.method.begin.java,punctuation.section.method.end.java,punctuation.terminator.java,punctuation.section.class.begin.java,punctuation.section.class.end.java,punctuation.section.inner-class.begin.java,punctuation.section.inner-class.end.java,meta.method-call.java,punctuation.section.class.begin.bracket.curly.java,punctuation.section.class.end.bracket.curly.java,punctuation.section.method.begin.bracket.curly.java,punctuation.section.method.end.bracket.curly.java,punctuation.separator.period.java,punctuation.bracket.angle.java,punctuation.definition.annotation.java,meta.method.body.java#d8dee9
meta.method.java#d8dee9
storage.modifier.import.java,storage.type.java,storage.type.generic.java#d8dee9
keyword.operator.instanceof.java#d8dee9
meta.definition.variable.name.java#d8dee9
keyword.operator.logical#d8dee9
keyword.operator.bitwise#d8dee9
keyword.operator.channel#d8dee9
support.constant.property-value.scss,support.constant.property-value.css#d8dee9
punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end,punctuation.section.embedded#d8dee9
string.regexp#d8dee9
constant.character.escape#d8dee9
punctuation.section.embedded, variable.interpolation#d8dee9
invalid.illegal#bf616a
invalid.broken#bf616a
invalid.deprecated#bf616a
invalid.unimplemented#bf616a
source.json#d8dee9
source.json meta.structure.dictionary.json support.type.property-name.json#d8dee9
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#d8dee9
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#d8dee9
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#d8dee9
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#d8dee9
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#d8dee9
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#d8dee9
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#d8dee9
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#d8dee9
text.html.markdown, punctuation.definition.list_item.markdown#d8dee9
text.html.markdown markup.inline.raw.markdown#d8dee9
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#d8dee9
text.html.markdown meta.dummy.line-break#d8dee9
markdown.heading, markup.heading | markup.heading entity.name.section, markup.heading.markdown punctuation.definition.heading.markdown#d8dee9
markup.italic#d8dee9italic
markup.bold, markup.bold.markdown#d8dee9bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic, markup.italic markup.bold#d8dee9bold italic
markup.underline#d8dee9underline
markup.strike#d8dee9strikethrough
markup.quote punctuation.definition.blockquote.markdown#4c566a
markup.quote#d8dee9italic
string.other.link.title.markdown#d8dee9
string.other.link.description.title.markdown#d8dee9
constant.other.reference.link.markdown#d8dee9
markup.raw.block#d8dee9
markup.raw.block.fenced.markdown#d8dee900
punctuation.definition.fenced.markdown#d8dee900
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#d8dee9
variable.language.fenced.markdown#4c566a
meta.separator#4c566abold
markup.table#d8dee9
token.info-token#88c0d0
token.warn-token#ebcb8b
token.error-token#bf616a
token.debug-token#b48ead
variable.language#d8dee9
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#d8dee9
meta.return-type, support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#d8dee9
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#d8dee9
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator#d8dee9
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#d8dee9
variable.other.constant, variable.other.enummember, keyword.other.unit#d8dee9
meta.object-literal.key#d8dee9
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#d8dee9
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#d8dee9
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#d8dee9
keyword.operator.or.regexp, keyword.control.anchor.regexp#d8dee9
keyword.operator.quantifier.regexp#d8dee9
constant.character#d8dee9
constant.character.escape#d8dee9
entity.name.label#d8dee9
comment, punctuation.definition.comment#4c566aitalic