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#ADEBC80D
  • activityBar.activeBorder#D2ACE4
  • activityBar.background#253C31
  • activityBar.foreground#ADEBC8
  • activityBar.inactiveForeground#A1AFA0
  • activityBarBadge.background#ADEBC8
  • activityBarBadge.foreground#162C1F
  • activityBarTop.activeBorder#ADEBC8
  • activityBarTop.background#253C31
  • activityBarTop.foreground#ADEBC8
  • activityBarTop.inactiveForeground#A1AFA0
  • badge.background#ADEBC8
  • badge.foreground#162C1F
  • breadcrumb.background#162C1F
  • breadcrumb.foreground#A1AFA0
  • button.background#ADEBC8
  • button.foreground#162C1F
  • button.hoverBackground#BCEFD2
  • button.secondaryBackground#365442
  • button.secondaryForeground#ECF5E5
  • button.secondaryHoverBackground#122419
  • commandCenter.background#253C31
  • commandCenter.border#4D6155
  • commandCenter.foreground#ECF5E5
  • debugConsole.errorForeground#FB7F92
  • debugConsole.warningForeground#F4CA6D
  • descriptionForeground#A1AFA0
  • diffEditor.insertedLineBackground#79E3A10D
  • diffEditor.insertedTextBackground#79E3A121
  • diffEditor.removedLineBackground#FB7F920D
  • diffEditor.removedTextBackground#FB7F9221
  • disabledForeground#A1AFA0
  • dropdown.background#253C31
  • dropdown.border#4D6155
  • dropdown.foreground#ECF5E5
  • editor.background#162C1F
  • editor.findMatchBackground#474D52
  • editor.findMatchBorder#D2ACE4
  • editor.findMatchHighlightBackground#ADEBC828
  • editor.findMatchHighlightBorder#ADEBC855
  • editor.foreground#ECF5E5
  • editor.inactiveSelectionBackground#ADEBC828
  • editor.lineHighlightBackground#21372C
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#365442
  • editor.selectionForeground#ECF5E5
  • editor.selectionHighlightBackground#ADEBC828
  • editor.selectionHighlightBorder#ADEBC844
  • editor.wordHighlightBackground#ADEBC828
  • editor.wordHighlightStrongBackground#ADEBC828
  • editorBracketHighlight.foreground1#ADEBC8
  • editorBracketHighlight.foreground2#ADEBC8
  • editorBracketHighlight.foreground3#D2ACE4
  • editorBracketHighlight.foreground4#E3EDD3
  • editorBracketHighlight.foreground5#E0EACD
  • editorBracketHighlight.foreground6#ECF5E5
  • editorCodeLens.foreground#A1AFA0
  • editorCursor.foreground#D2ACE4
  • editorError.foreground#FB7F92
  • editorGhostText.background#00000000
  • editorGhostText.foreground#A1AFA0
  • editorGroup.border#4D6155
  • editorGroupHeader.tabsBackground#122419
  • editorGutter.addedBackground#79E3A1
  • editorGutter.deletedBackground#FB7F92
  • editorGutter.foldingControlForeground#A1AFA0
  • editorGutter.modifiedBackground#D2ACE4
  • editorHint.foreground#A1AFA0
  • editorHoverWidget.background#253C31
  • editorHoverWidget.border#D2ACE4
  • editorHoverWidget.foreground#ECF5E5
  • editorIndentGuide.activeBackground1#ADEBC866
  • editorIndentGuide.background1#4D6155
  • editorInfo.foreground#D2ACE4
  • editorInlayHint.background#253C31
  • editorInlayHint.foreground#A1AFA0
  • editorLineNumber.activeForeground#ADEBC8
  • editorLineNumber.foreground#A1AFA0
  • editorLink.activeForeground#ADEBC8
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.errorForeground#FB7F92
  • editorOverviewRuler.infoForeground#D2ACE4
  • editorOverviewRuler.warningForeground#F4CA6D
  • editorRuler.foreground#4D6155
  • editorStickyScroll.background#162C1F
  • editorStickyScroll.border#4D6155
  • editorStickyScrollHover.background#253C31
  • editorSuggestWidget.background#253C31
  • editorSuggestWidget.border#4D6155
  • editorSuggestWidget.foreground#ECF5E5
  • editorSuggestWidget.highlightForeground#ADEBC8
  • editorSuggestWidget.selectedBackground#365442
  • editorSuggestWidget.selectedForeground#ECF5E5
  • editorUnicodeHighlight.background#E3EDD312
  • editorUnicodeHighlight.border#E3EDD3
  • editorWarning.foreground#F4CA6D
  • editorWhitespace.foreground#4D6155
  • editorWidget.background#253C31
  • editorWidget.border#4D6155
  • editorWidget.foreground#ECF5E5
  • focusBorder#ADEBC8
  • foreground#ECF5E5
  • gitDecoration.addedResourceForeground#79E3A1
  • gitDecoration.deletedResourceForeground#FB7F92
  • gitDecoration.ignoredResourceForeground#A1AFA0
  • gitDecoration.modifiedResourceForeground#D2ACE4
  • input.background#253C31
  • input.border#4D6155
  • input.foreground#ECF5E5
  • input.placeholderForeground#A1AFA0
  • inputOption.activeBackground#ADEBC828
  • inputOption.activeBorder#ADEBC8
  • inputOption.activeForeground#ECF5E5
  • list.activeSelectionBackground#365442
  • list.activeSelectionForeground#ECF5E5
  • list.focusBackground#365442
  • list.focusForeground#ECF5E5
  • list.focusHighlightForeground#ADEBC8
  • list.focusOutline#ADEBC866
  • list.highlightForeground#ADEBC8
  • list.hoverBackground#ADEBC814
  • list.hoverForeground#ECF5E5
  • list.inactiveSelectionBackground#365442
  • list.inactiveSelectionForeground#ECF5E5
  • menu.background#253C31
  • menu.border#4D6155
  • menu.foreground#ECF5E5
  • merge.currentContentBackground#E0EACD14
  • merge.currentHeaderBackground#E0EACD30
  • merge.incomingContentBackground#D2ACE414
  • merge.incomingHeaderBackground#D2ACE430
  • minimap.selectionHighlight#ADEBC877
  • notebook.cellBorderColor#4D6155
  • notebook.cellEditorBackground#162C1F
  • notebook.focusedCellBorder#ADEBC8
  • notebook.selectedCellBackground#365442
  • notificationCenterHeader.background#253C31
  • notifications.background#253C31
  • notifications.border#4D6155
  • notifications.foreground#ECF5E5
  • panel.background#241F2B
  • panel.border#4D6155
  • panelTitle.activeBorder#ADEBC8
  • panelTitle.activeForeground#ADEBC8
  • panelTitle.inactiveForeground#A1AFA0
  • peekView.border#ADEBC8
  • peekViewEditor.background#253C31
  • peekViewResult.background#253C31
  • peekViewResult.fileForeground#ECF5E5
  • peekViewResult.lineForeground#ECF5E5
  • pickerGroup.foreground#ADEBC8
  • progressBar.background#ADEBC8
  • quickInput.background#253C31
  • quickInput.foreground#ECF5E5
  • quickInputList.focusBackground#365442
  • quickInputList.focusForeground#ECF5E5
  • scrollbarSlider.activeBackground#ADEBC866
  • scrollbarSlider.background#4D615599
  • scrollbarSlider.hoverBackground#A1AFA066
  • settings.dropdownBackground#253C31
  • settings.modifiedItemIndicator#ADEBC8
  • sideBar.background#253C31
  • sideBar.border#4D6155
  • sideBar.foreground#ECF5E5
  • sideBarSectionHeader.background#253C31
  • sideBarSectionHeader.border#4D6155
  • sideBarSectionHeader.foreground#ECF5E5
  • sideBarTitle.foreground#ECF5E5
  • statusBar.background#2B4435
  • statusBar.border#4D6155
  • statusBar.debuggingBackground#ADEBC8
  • statusBar.debuggingForeground#162C1F
  • statusBar.foreground#ECF5E5
  • statusBar.noFolderBackground#2B4435
  • statusBarItem.hoverBackground#ADEBC814
  • statusBarItem.hoverForeground#ECF5E5
  • statusBarItem.prominentBackground#365442
  • statusBarItem.prominentForeground#ECF5E5
  • statusBarItem.remoteBackground#ADEBC8
  • statusBarItem.remoteForeground#162C1F
  • tab.activeBackground#162C1F
  • tab.activeBorder#ADEBC8
  • tab.activeBorderTop#00000000
  • tab.activeForeground#ECF5E5
  • tab.border#4D6155
  • tab.hoverBackground#365442
  • tab.inactiveBackground#253C31
  • tab.inactiveForeground#A1AFA0
  • tab.unfocusedActiveBorder#4D6155
  • terminal.ansiBlack#A1AFA0
  • terminal.ansiBlue#79ADFD
  • terminal.ansiBrightBlack#A1AFA0
  • terminal.ansiBrightBlue#94BDFD
  • terminal.ansiBrightCyan#88DFF0
  • terminal.ansiBrightGreen#94E9B4
  • terminal.ansiBrightMagenta#DBBDE9
  • terminal.ansiBrightRed#FC99A8
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#F6D58A
  • terminal.ansiCyan#6AD7EC
  • terminal.ansiGreen#79E3A1
  • terminal.ansiMagenta#D2ACE4
  • terminal.ansiRed#FB7F92
  • terminal.ansiWhite#ECF5E5
  • terminal.ansiYellow#F4CA6D
  • terminal.background#241F2B
  • terminal.foreground#ECF5E5
  • terminal.selectionBackground#365442
  • terminalCursor.background#162C1F
  • terminalCursor.foreground#D2ACE4
  • testing.iconFailed#FB7F92
  • testing.iconPassed#79E3A1
  • textBlockQuote.background#253C31
  • textBlockQuote.border#ADEBC8
  • textCodeBlock.background#253C31
  • textLink.activeForeground#D2ACE4
  • textLink.foreground#ADEBC8
  • titleBar.activeBackground#122419
  • titleBar.activeForeground#ECF5E5
  • titleBar.border#4D6155
  • titleBar.inactiveBackground#162C1F
  • titleBar.inactiveForeground#A1AFA0
  • toolbar.hoverBackground#ADEBC814
  • tree.indentGuidesStroke#4D6155

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A1AFA0
keyword, storage#D2ACE4
keyword.operator#ECF5E5
string#E0EACD
constant.numeric, constant.language, constant.character, constant.other#E3EDD3
entity.name.function, support.function#ADEBC8
entity.name.type, entity.name.class, support.type, support.class, entity.name.namespace#D2ACE4
variable, meta.definition.variable#ECF5E5
variable.parameter#ECF5E5
support.type.property-name, entity.other.attribute-name, meta.object-literal.key#D2ACE4
punctuation#ECF5E5
punctuation.section.interpolation, keyword.other.template, meta.interpolation punctuation#ADEBC8
constant.character.escape#ADEBC8
entity.name.tag#D2ACE4
storage.type.terraform, keyword.control.terraform, keyword.other.terraform#D2ACE4
variable.other.property.terraform, variable.other.readwrite.terraform#ECF5E5
support.function.builtin.shell, support.function.powershell#ADEBC8
markup.heading, entity.name.section#ADEBC8bold
markup.bold#ECF5E5bold
markup.italic#ECF5E5italic
markup.inline.raw, markup.fenced_code.block#E0EACD
markup.underline.link#ADEBC8
markup.inserted#79E3A1
markup.deleted#FB7F92
invalid#FB7F92
support.type.property-name.json, entity.name.tag.yaml, entity.name.tag.yml#D2ACE4
keyword.other.sql, keyword.other.DML.sql, keyword.other.DDL.sql#D2ACE4
string.regexp, constant.other.character-class.regexp#E0EACD