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#fdd286
  • activityBar.background#200f2e
  • activityBar.border#200f2e60
  • activityBar.dropBackground#32101580
  • activityBar.foreground#eeddcc
  • activityBarBadge.background#fdd286
  • activityBarBadge.foreground#000000
  • badge.background#00000030
  • badge.foreground#685E79
  • breadcrumb.activeSelectionForeground#fdd286
  • breadcrumb.background#200f2e
  • breadcrumb.focusForeground#eeddcc
  • breadcrumb.foreground#eeddcccc
  • breadcrumbPicker.background#200f2e
  • button.background#2f1b3f
  • button.foreground#eeddcc
  • button.hoverBackground#382549
  • button.secondaryBackground#2f1b3f
  • button.secondaryBorder#200f2e00
  • button.secondaryForeground#eeddcc
  • button.secondaryHoverBackground#382549
  • checkbox.border#eeddcccc
  • debugConsole.errorForeground#eeddcc
  • debugConsole.infoForeground#FE9055
  • debugConsole.warningForeground#fdd286
  • debugToolBar.background#200f2e
  • diffEditor.insertedLineBackground#16f70225
  • diffEditor.insertedTextBackground#16f70220
  • diffEditor.removedLineBackground#f7020220
  • diffEditor.removedTextBackground#f7020225
  • diffEditorGutter.insertedLineBackground#16f70225
  • diffEditorGutter.removedLineBackground#f7020220
  • dropdown.background#200f2e
  • dropdown.border#ffffff
  • editor.background#200f2e
  • editor.findMatchBackground#000000
  • editor.findMatchBorder#fdd286
  • editor.findMatchHighlight#eeddcc
  • editor.findMatchHighlightBackground#00000050
  • editor.findMatchHighlightBorder#eeddcc30
  • editor.findRangeHighlightBackground#fdd286
  • editor.foreground#eeddcc
  • editor.lineHighlightBackground#00000030
  • editor.lineHighlightBorder#00000000
  • editor.placeholderForeground#eeddcccc
  • editor.rangeHighlightBackground#ffffff06
  • editor.selectionBackground#ffffff20
  • editor.selectionHighlightBackground#00F0FF20
  • editor.wordHighlightBackground#382549
  • editor.wordHighlightTextBackground#eeddcc30
  • editorBracketMatch.background#200f2e
  • editorBracketMatch.border#72F1B8
  • editorCursor.foreground#FE9055
  • editorError.foreground#f70202dd
  • editorGroup.border#00000030
  • editorGroup.dropBackground#32101580
  • editorGroup.focusedEmptyBorder#321015
  • editorGroupHeader.tabsBackground#200f2e
  • editorGutter.addedBackground#72F1B860
  • editorGutter.deletedBackground#f70202dd
  • editorGutter.modifiedBackground#FE9055
  • editorHoverWidget.background#200f2e
  • editorHoverWidget.border#382549
  • editorIndentGuide.activeBackground#ffffff06
  • editorIndentGuide.background1#ffffff06
  • editorInfo.foreground#8cddf440
  • editorLineNumber.activeForeground#eeddcccc
  • editorLineNumber.foreground#eeddcc10
  • editorLink.activeForeground#eeddcc
  • editorMarkerNavigation.background#eeddcc10
  • editorOverviewRuler.border#200f2e
  • editorOverviewRuler.errorForeground#32101540
  • editorOverviewRuler.findMatchForeground#fdd286
  • editorOverviewRuler.infoForeground#8cddf440
  • editorOverviewRuler.warningForeground#fdd286
  • editorRuler.foreground#ffffff06
  • editorSuggestWidget.background#200f2e
  • editorSuggestWidget.border#2f1b3f
  • editorSuggestWidget.foreground#eeddcc
  • editorSuggestWidget.highlightForeground#fdd286
  • editorSuggestWidget.selectedBackground#00000050
  • editorWarning.foreground#fdd286
  • editorWhitespace.foreground#eeddcc30
  • editorWidget.background#200f2e
  • editorWidget.border#00000000
  • editorWidget.resizeBorder#fdd286
  • extensionBadge.remoteForeground#eeddcc
  • extensionButton.prominentBackground#c05a60
  • extensionButton.prominentForeground#eeddcc
  • extensionButton.prominentHoverBackground#FE9055
  • focusBorder#382549
  • foreground#eeddcc
  • gitDecoration.conflictingResourceForeground#fdd286
  • gitDecoration.deletedResourceForeground#321015
  • gitDecoration.ignoredResourceForeground#eeddcc60
  • gitDecoration.modifiedResourceForeground#fdd286
  • gitDecoration.untrackedResourceForeground#72F1B8
  • input.background#251235
  • input.border#2f1b3f
  • input.foreground#eeddcc
  • input.placeholderForeground#eeddcc60
  • inputOption.activeBackground#eeddcc30
  • inputOption.activeBorder#eeddcc30
  • inputValidation.errorBorder#321015
  • inputValidation.infoBorder#8cddf4
  • inputValidation.warningBorder#fdd286
  • list.activeSelectionBackground#200f2e
  • list.activeSelectionForeground#fdd286
  • list.dropBackground#32101580
  • list.focusBackground#eeddcc30
  • list.focusForeground#eeddcc
  • list.highlightForeground#fdd286
  • list.hoverBackground#200f2e
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#00000030
  • list.inactiveSelectionForeground#fdd286
  • listFilterWidget.background#00000030
  • listFilterWidget.noMatchesOutline#00000030
  • listFilterWidget.outline#00000030
  • menu.background#200f2e
  • menu.foreground#eeddcc
  • menu.selectionBackground#00000050
  • menu.selectionBorder#00000030
  • menu.selectionForeground#fdd286
  • menu.separatorBackground#eeddcc
  • menubar.selectionBackground#00000030
  • menubar.selectionBorder#00000030
  • menubar.selectionForeground#fdd286
  • minimapSlider.activeBackground#eeddcc30
  • minimapSlider.background#eeddcc10
  • minimapSlider.hoverBackground#eeddcc10
  • notebook.focusedCellBorder#fdd286
  • notebook.inactiveFocusedCellBorder#321015
  • notificationLink.foreground#fdd286
  • notifications.background#200f2e
  • notifications.foreground#eeddcc
  • panel.background#200f2e
  • panel.border#200f2e60
  • panel.dropBackground#eeddcc
  • panelTitle.activeBorder#fdd286
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#eeddcc
  • peekView.border#00000030
  • peekViewEditor.background#251235
  • peekViewEditor.matchHighlightBackground#00F0FF20
  • peekViewEditorGutter.background#251235
  • peekViewResult.matchHighlightBackground#00F0FF20
  • peekViewResult.selectionBackground#00000030
  • peekViewTitle.background#251235
  • peekViewTitleDescription.foreground#eeddcc60
  • pickerGroup.border#ffffff06
  • pickerGroup.foreground#fdd286
  • progressBar.background#fdd286
  • quickInput.background#200f2e
  • quickInput.foreground#eeddcccc
  • quickInput.list.focusBackground#eeddcc30
  • quickInputList.focusBackground#00000030
  • quickInputList.focusForeground#eeddcc
  • sash.hoverBorder#c05a60
  • scrollbar.shadow#00000030
  • scrollbarSlider.activeBackground#fdd286
  • scrollbarSlider.background#eeddcc30
  • scrollbarSlider.hoverBackground#eeddcc10
  • selection.background#00000050
  • settings.checkboxBackground#200f2e
  • settings.checkboxForeground#eeddcc
  • settings.dropdownBackground#200f2e
  • settings.dropdownForeground#eeddcc
  • settings.headerForeground#fdd286
  • settings.modifiedItemIndicator#fdd286
  • settings.numberInputBackground#200f2e
  • settings.numberInputForeground#eeddcc
  • settings.textInputBackground#200f2e
  • settings.textInputForeground#eeddcc
  • sideBar.background#200f2e
  • sideBar.border#200f2e60
  • sideBar.foreground#eeddcccc
  • sideBarSectionHeader.background#200f2e
  • sideBarSectionHeader.border#200f2e60
  • sideBarTitle.foreground#eeddcc
  • statusBar.background#200f2e
  • statusBar.debuggingBackground#2f1b3f
  • statusBar.debuggingForeground#eeddcc60
  • statusBar.foreground#eeddcc60
  • statusBar.noFolderBackground#200f2e
  • statusBarItem.activeBackground#200f2e
  • statusBarItem.hoverBackground#200f2e
  • statusBarItem.hoverForeground#eeddcc
  • statusBarItem.remoteBackground#fdd286
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#200f2e
  • tab.activeBorder#fdd286
  • tab.activeForeground#eeddcc
  • tab.activeModifiedBorder#eeddcccc
  • tab.border#200f2e
  • tab.inactiveBackground#200f2e
  • tab.inactiveForeground#eeddcccc
  • tab.inactiveModifiedBorder#c05a60
  • tab.unfocusedActiveBorder#685E79
  • tab.unfocusedActiveForeground#eeddcc
  • tab.unfocusedActiveModifiedBorder#c05a60
  • tab.unfocusedInactiveModifiedBorder#c05a60
  • terminal.foreground#eeddcc
  • terminalCommandGuide.foreground#3f225e
  • terminalCursor.background#000000
  • terminalCursor.foreground#eeddcc
  • textBlockQuote.background#00000030
  • textBlockQuote.border#3f225e
  • textCodeBlock.background#00000030
  • textLink.activeForeground#eeddcc
  • textLink.foreground#fdd286
  • titleBar.activeBackground#200f2e
  • titleBar.activeForeground#eeddcc
  • titleBar.border#200f2e60
  • titleBar.inactiveBackground#200f2e
  • titleBar.inactiveForeground#eeddcccc
  • tree.indentGuidesStroke#ffffff06
  • welcomePage.background#200f2e
  • welcomePage.tileBackground#251235
  • welcomePage.tileBorder#ffffff
  • welcomePage.tileHoverBackground#3f225e
  • widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Main#eeddcc
string#72F1B8
punctuation, constant.other.symbol#FE9055
constant.character.escape, text.html constant.character.entity.named#eeddcc
constant.language.boolean#eeddcc
constant.numeric#FE9055
variable, variable.parameter, support.variable, variable.language, support.constant, meta.definition.variable entity.name.function, meta.function-call.arguments#eeddcc
keyword.other#FE9055
keyword, modifier, variable.language.this, support.type.object, constant.language#FE9055
entity.name.function, support.function#8cddf4
meta.function entity.name.function#8cddf4
storage.type, storage.modifier, storage.control#C792EA
support.module, support.node#321015italic
support.type, constant.other.key#fdd286
entity.name.type, entity.other.inherited-class, entity.other#fdd286
comment#eeddcc60italic
comment punctuation.definition.comment, string.quoted.docstring#eeddcc60italic
punctuation#FE9055
entity.name, entity.name.type.class, support.type, support.class, meta.use#fdd286
variable.object.property, meta.field.declaration entity.name.function#eeddcc
meta.definition.method entity.name.function#eeddcc
template.expression.begin, template.expression.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#FE9055
meta.embedded, source.groovy.embedded, meta.template.expression#eeddcc
entity.name.tag.yaml#eeddcccc
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#eeddcc
constant.language.json#FE9055
entity.other.attribute-name.class#fdd286
entity.other.attribute-name.id#FE9055
source.css entity.name.tag#fdd286
support.type.property-name.css#eeddcc
meta.tag, punctuation.definition.tag#FE9055
entity.name.tag#FE9055
entity.other.attribute-name#C792EA
punctuation.definition.entity.html#eeddcc
markup.heading#FE9055
text.html.markdown meta.link.inline, meta.link.reference#eeddcc
text.html.markdown beginning.punctuation.definition.list#FE9055
markup.italic#eeddccitalic
markup.bold#eeddccbold
markup.bold markup.italic, markup.italic markup.bold#eeddccitalic bold
markup.fenced_code.block.markdown punctuation.definition.markdown#72F1B8
markup.inline.raw.string.markdown#72F1B8
keyword.other.definition.ini#eeddcc
entity.name.section.group-title.ini#FE9055
source.cs meta.class.identifier storage.type#fdd286
source.cs meta.method.identifier entity.name.function#eeddcc
source.cs meta.method-call meta.method, source.cs entity.name.function#8cddf4
source.cs storage.type#fdd286
source.cs meta.method.return-type#fdd286
source.cs meta.preprocessor#685E79
source.cs entity.name.type.namespace#eeddcc
meta.jsx.children, SXNested#eeddcc
support.class.component#fdd286
source.cpp meta.block variable.other#eeddcc
source.python meta.member.access.python#eeddcc
source.python meta.function-call.python, meta.function-call.arguments#8cddf4
meta.block#eeddcc
entity.name.function.call#8cddf4
source.php support.other.namespace, source.php meta.use support.class#eeddcc
constant.keyword#FE9055italic
entity.name.function#8cddf4
Global settings#eeddcc
constant.other.placeholder#eeddcc
markup.deleted#321015
markup.inserted#72F1B8
markup.underlineunderline
keyword.control#FE9055regular
variable.parameterregular
variable.parameter.function.language.special.self.python#eeddccitalic
constant.character.format.placeholder.other.python#FE9055
markup.quote#eeddccitalic
markup.fenced_code.block#eeddcc
punctuation.definition.quote#eeddcc
meta.structure.dictionary.json support.type.property-name.json#C792EA
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#fdd286
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#FE9055
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#FE9055
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#C792EA
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#72F1B8