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#c3e0e6
  • activityBar.background#2E3440
  • activityBar.border#3B4252
  • activityBar.dropBackground#32101580
  • activityBar.foreground#d9d9d9
  • activityBarBadge.background#c3e0e6
  • activityBarBadge.foreground#000000
  • badge.background#ffffff12
  • badge.foreground#d9d9d9cc
  • breadcrumb.activeSelectionForeground#c3e0e6
  • breadcrumb.background#2E3440
  • breadcrumb.focusForeground#d9d9d9
  • breadcrumb.foreground#d9d9d9cc
  • breadcrumbPicker.background#2E3440
  • button.background#31353e
  • button.foreground#d9d9d9
  • button.hoverBackground#33363c
  • button.secondaryBackground#31353e
  • button.secondaryBorder#2E344000
  • button.secondaryForeground#d9d9d9
  • button.secondaryHoverBackground#33363c
  • checkbox.border#d9d9d9cc
  • debugConsole.errorForeground#d9d9d9
  • debugConsole.infoForeground#898473
  • debugConsole.warningForeground#c3e0e6
  • debugToolBar.background#2E3440
  • diffEditor.insertedLineBackground#40f23015
  • diffEditor.insertedTextBackground#40f23010
  • diffEditor.removedLineBackground#f63b3b10
  • diffEditor.removedTextBackground#f63b3b15
  • diffEditorGutter.insertedLineBackground#40f23015
  • diffEditorGutter.removedLineBackground#f63b3b10
  • dropdown.background#2E3440
  • dropdown.border#ffffff
  • editor.background#2E3440
  • editor.findMatchBackground#000000
  • editor.findMatchBorder#c3e0e6
  • editor.findMatchHighlight#d9d9d9
  • editor.findMatchHighlightBackground#00000050
  • editor.findMatchHighlightBorder#d9d9d930
  • editor.findRangeHighlightBackground#c3e0e6
  • editor.foreground#d9d9d9
  • editor.lineHighlightBackground#00000030
  • editor.lineHighlightBorder#00000000
  • editor.placeholderForeground#d9d9d9cc
  • editor.rangeHighlightBackground#ffffff06
  • editor.selectionBackground#ffffff12
  • editor.selectionHighlightBackground#00F0FF20
  • editor.wordHighlightBackground#33363c
  • editor.wordHighlightTextBackground#d9d9d930
  • editorBracketMatch.background#2E3440
  • editorBracketMatch.border#c3e6d1
  • editorCursor.foreground#898473
  • editorError.foreground#f70202dd
  • editorGroup.border#00000030
  • editorGroup.dropBackground#32101580
  • editorGroup.focusedEmptyBorder#321015
  • editorGroupHeader.tabsBackground#2E3440
  • editorGutter.addedBackground#c3e6d160
  • editorGutter.deletedBackground#f70202dd
  • editorGutter.modifiedBackground#898473
  • editorHoverWidget.background#2E3440
  • editorHoverWidget.border#33363c
  • editorIndentGuide.activeBackground#ffffff06
  • editorIndentGuide.background1#ffffff06
  • editorInfo.foreground#8cddf440
  • editorLineNumber.activeForeground#d9d9d9cc
  • editorLineNumber.foreground#d9d9d910
  • editorLink.activeForeground#d9d9d9
  • editorMarkerNavigation.background#d9d9d910
  • editorOverviewRuler.border#2E3440
  • editorOverviewRuler.errorForeground#32101540
  • editorOverviewRuler.findMatchForeground#c3e0e6
  • editorOverviewRuler.infoForeground#8cddf440
  • editorOverviewRuler.warningForeground#c3e0e6
  • editorRuler.foreground#ffffff06
  • editorSuggestWidget.background#2E3440
  • editorSuggestWidget.border#31353e
  • editorSuggestWidget.foreground#d9d9d9
  • editorSuggestWidget.highlightForeground#c3e0e6
  • editorSuggestWidget.selectedBackground#00000050
  • editorWarning.foreground#c3e0e6
  • editorWhitespace.foreground#d9d9d930
  • editorWidget.background#2E3440
  • editorWidget.border#00000000
  • editorWidget.resizeBorder#c3e0e6
  • extensionBadge.remoteForeground#d9d9d9
  • extensionButton.prominentBackground#807a69
  • extensionButton.prominentForeground#d9d9d9
  • extensionButton.prominentHoverBackground#898473
  • focusBorder#33363c
  • foreground#d9d9d9
  • gitDecoration.conflictingResourceForeground#c3e0e6
  • gitDecoration.deletedResourceForeground#321015
  • gitDecoration.ignoredResourceForeground#d9d9d960
  • gitDecoration.modifiedResourceForeground#c3e0e6
  • gitDecoration.untrackedResourceForeground#c3e6d1
  • input.background#323844
  • input.border#31353e
  • input.foreground#d9d9d9
  • input.placeholderForeground#d9d9d960
  • inputOption.activeBackground#d9d9d930
  • inputOption.activeBorder#d9d9d930
  • inputValidation.errorBorder#321015
  • inputValidation.infoBorder#8cddf4
  • inputValidation.warningBorder#c3e0e6
  • list.activeSelectionBackground#2E3440
  • list.activeSelectionForeground#c3e0e6
  • list.dropBackground#32101580
  • list.focusBackground#d9d9d930
  • list.focusForeground#d9d9d9
  • list.highlightForeground#c3e0e6
  • list.hoverBackground#2E3440
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#00000030
  • list.inactiveSelectionForeground#c3e0e6
  • listFilterWidget.background#00000030
  • listFilterWidget.noMatchesOutline#00000030
  • listFilterWidget.outline#00000030
  • menu.background#2E3440
  • menu.foreground#d9d9d9
  • menu.selectionBackground#00000050
  • menu.selectionBorder#00000030
  • menu.selectionForeground#c3e0e6
  • menu.separatorBackground#d9d9d9
  • menubar.selectionBackground#00000030
  • menubar.selectionBorder#00000030
  • menubar.selectionForeground#c3e0e6
  • minimapSlider.activeBackground#d9d9d930
  • minimapSlider.background#d9d9d910
  • minimapSlider.hoverBackground#d9d9d910
  • notebook.focusedCellBorder#c3e0e6
  • notebook.inactiveFocusedCellBorder#321015
  • notificationLink.foreground#c3e0e6
  • notifications.background#2E3440
  • notifications.foreground#d9d9d9
  • panel.background#2E3440
  • panel.border#3B4252
  • panel.dropBackground#d9d9d9
  • panelTitle.activeBorder#c3e0e6
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#d9d9d9
  • peekView.border#353b48
  • peekViewEditor.background#2E3440
  • peekViewEditor.matchHighlightBackground#00F0FF20
  • peekViewEditorGutter.background#323844
  • peekViewResult.background#2E3440
  • peekViewResult.matchHighlightBackground#00F0FF20
  • peekViewResult.selectionBackground#00000030
  • peekViewTitle.background#323844
  • peekViewTitleDescription.foreground#d9d9d960
  • pickerGroup.border#ffffff06
  • pickerGroup.foreground#c3e0e6
  • progressBar.background#c3e0e6
  • quickInput.background#2E3440
  • quickInput.foreground#d9d9d9cc
  • quickInput.list.focusBackground#d9d9d930
  • quickInputList.focusBackground#00000030
  • quickInputList.focusForeground#d9d9d9
  • sash.hoverBorder#807a69
  • scrollbar.shadow#00000030
  • scrollbarSlider.activeBackground#c3e0e6
  • scrollbarSlider.background#d9d9d930
  • scrollbarSlider.hoverBackground#d9d9d910
  • selection.background#00000050
  • settings.checkboxBackground#2E3440
  • settings.checkboxForeground#d9d9d9
  • settings.dropdownBackground#2E3440
  • settings.dropdownForeground#d9d9d9
  • settings.headerForeground#c3e0e6
  • settings.modifiedItemIndicator#c3e0e6
  • settings.numberInputBackground#2E3440
  • settings.numberInputForeground#d9d9d9
  • settings.textInputBackground#2E3440
  • settings.textInputForeground#d9d9d9
  • sideBar.background#2E3440
  • sideBar.border#3B4252
  • sideBar.foreground#d9d9d9cc
  • sideBarSectionHeader.background#2E3440
  • sideBarSectionHeader.border#3B4252
  • sideBarTitle.foreground#d9d9d9
  • statusBar.background#2E3440
  • statusBar.debuggingBackground#31353e
  • statusBar.debuggingForeground#d9d9d960
  • statusBar.foreground#d9d9d960
  • statusBar.noFolderBackground#2E3440
  • statusBarItem.activeBackground#2E3440
  • statusBarItem.hoverBackground#2E3440
  • statusBarItem.hoverForeground#d9d9d9
  • statusBarItem.remoteBackground#c3e0e6
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#2E3440
  • tab.activeBorder#c3e0e6
  • tab.activeForeground#d9d9d9
  • tab.activeModifiedBorder#d9d9d9cc
  • tab.border#2E3440
  • tab.inactiveBackground#2E3440
  • tab.inactiveForeground#d9d9d9cc
  • tab.inactiveModifiedBorder#807a69
  • tab.unfocusedActiveBorder#605376
  • tab.unfocusedActiveForeground#d9d9d9
  • tab.unfocusedActiveModifiedBorder#807a69
  • tab.unfocusedInactiveModifiedBorder#807a69
  • terminal.foreground#d9d9d9
  • terminalCommandGuide.foreground#353b48
  • terminalCursor.background#000000
  • terminalCursor.foreground#d9d9d9
  • textBlockQuote.background#00000030
  • textBlockQuote.border#353b48
  • textCodeBlock.background#00000030
  • textLink.activeForeground#d9d9d9
  • textLink.foreground#c3e0e6
  • titleBar.activeBackground#2E3440
  • titleBar.activeForeground#d9d9d9
  • titleBar.border#3B4252
  • titleBar.inactiveBackground#2E3440
  • titleBar.inactiveForeground#d9d9d9cc
  • tree.indentGuidesStroke#ffffff06
  • welcomePage.background#2E3440
  • welcomePage.tileBackground#323844
  • welcomePage.tileBorder#ffffff
  • welcomePage.tileHoverBackground#353b48
  • widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Main#d9d9d9
string#c3e6d1
punctuation, constant.other.symbol#898473
constant.character.escape, text.html constant.character.entity.named#d9d9d9
constant.language.boolean#d9d9d9
constant.numeric#898473
variable, variable.parameter, support.variable, variable.language, support.constant, meta.definition.variable entity.name.function, meta.function-call.arguments#d9d9d9
keyword.other#898473
keyword, modifier, variable.language.this, support.type.object, constant.language#898473
entity.name.function, support.function#8cddf4
meta.function entity.name.function#8cddf4
storage.type, storage.modifier, storage.control#d8c3e6
support.module, support.node#321015italic
support.type, constant.other.key#c3e0e6
entity.name.type, entity.other.inherited-class, entity.other#c3e0e6
comment#d9d9d960italic
comment punctuation.definition.comment, string.quoted.docstring#d9d9d960italic
punctuation#898473
entity.name, entity.name.type.class, support.type, support.class, meta.use#c3e0e6
variable.object.property, meta.field.declaration entity.name.function#d9d9d9
meta.definition.method entity.name.function#d9d9d9
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#898473
meta.embedded, source.groovy.embedded, meta.template.expression#d9d9d9
entity.name.tag.yaml#d9d9d9cc
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#d9d9d9
constant.language.json#898473
entity.other.attribute-name.class#c3e0e6
entity.other.attribute-name.id#898473
source.css entity.name.tag#c3e0e6
support.type.property-name.css#d9d9d9
meta.tag, punctuation.definition.tag#898473
entity.name.tag#898473
entity.other.attribute-name#d8c3e6
punctuation.definition.entity.html#d9d9d9
markup.heading#898473
text.html.markdown meta.link.inline, meta.link.reference#d9d9d9
text.html.markdown beginning.punctuation.definition.list#898473
markup.italic#d9d9d9italic
markup.bold#d9d9d9bold
markup.bold markup.italic, markup.italic markup.bold#d9d9d9italic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#c3e6d1
markup.inline.raw.string.markdown#c3e6d1
keyword.other.definition.ini#d9d9d9
entity.name.section.group-title.ini#898473
source.cs meta.class.identifier storage.type#c3e0e6
source.cs meta.method.identifier entity.name.function#d9d9d9
source.cs meta.method-call meta.method, source.cs entity.name.function#8cddf4
source.cs storage.type#c3e0e6
source.cs meta.method.return-type#c3e0e6
source.cs meta.preprocessor#605376
source.cs entity.name.type.namespace#d9d9d9
meta.jsx.children, SXNested#d9d9d9
support.class.component#c3e0e6
source.cpp meta.block variable.other#d9d9d9
source.python meta.member.access.python#d9d9d9
source.python meta.function-call.python, meta.function-call.arguments#8cddf4
meta.block#d9d9d9
entity.name.function.call#8cddf4
source.php support.other.namespace, source.php meta.use support.class#d9d9d9
constant.keyword#898473italic
entity.name.function#8cddf4
Global settings#d9d9d9
constant.other.placeholder#d9d9d9
markup.deleted#321015
markup.inserted#c3e6d1
markup.underlineunderline
keyword.control#898473regular
variable.parameterregular
variable.parameter.function.language.special.self.python#d9d9d9italic
constant.character.format.placeholder.other.python#898473
markup.quote#d9d9d9italic
markup.fenced_code.block#d9d9d9
punctuation.definition.quote#d9d9d9
meta.structure.dictionary.json support.type.property-name.json#d8c3e6
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c3e0e6
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#898473
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#321015
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#898473
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#8cddf4
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#321015
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#d8c3e6
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#c3e6d1
EpicenteЯ Theme by churikoff - VS Code Theme