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#D5E59A0D
  • activityBar.activeBorder#CCBFEC
  • activityBar.background#18281F
  • activityBar.foreground#D5E59A
  • activityBar.inactiveForeground#A0AB9E
  • activityBarBadge.background#D5E59A
  • activityBarBadge.foreground#18281F
  • activityBarTop.activeBorder#D5E59A
  • activityBarTop.background#273A2D
  • activityBarTop.foreground#D5E59A
  • activityBarTop.inactiveForeground#A0AB9E
  • badge.background#D5E59A
  • badge.foreground#18281F
  • breadcrumb.background#18281F
  • breadcrumb.foreground#A0AB9E
  • button.background#D5E59A
  • button.foreground#18281F
  • button.hoverBackground#DDEAAC
  • button.secondaryBackground#405039
  • button.secondaryForeground#EAF2E2
  • button.secondaryHoverBackground#121F17
  • commandCenter.background#273A2D
  • commandCenter.border#4E5F51
  • commandCenter.foreground#EAF2E2
  • debugConsole.errorForeground#FB7E91
  • debugConsole.warningForeground#F4CC6E
  • descriptionForeground#A0AB9E
  • diffEditor.insertedLineBackground#78E5A10D
  • diffEditor.insertedTextBackground#78E5A121
  • diffEditor.removedLineBackground#FB7E910D
  • diffEditor.removedTextBackground#FB7E9121
  • disabledForeground#A0AB9E
  • dropdown.background#273A2D
  • dropdown.border#4E5F51
  • dropdown.foreground#EAF2E2
  • editor.background#18281F
  • editor.findMatchBackground#4B5A51
  • editor.findMatchBorder#CCBFEC
  • editor.findMatchHighlightBackground#D5E59A28
  • editor.findMatchHighlightBorder#D5E59A55
  • editor.foreground#EAF2E2
  • editor.inactiveSelectionBackground#D5E59A28
  • editor.lineHighlightBackground#223529
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#405039
  • editor.selectionForeground#EAF2E2
  • editor.selectionHighlightBackground#D5E59A28
  • editor.selectionHighlightBorder#D5E59A44
  • editor.wordHighlightBackground#D5E59A28
  • editor.wordHighlightStrongBackground#D5E59A28
  • editorBracketHighlight.foreground1#D5E59A
  • editorBracketHighlight.foreground2#D5E59A
  • editorBracketHighlight.foreground3#D5E59A
  • editorBracketHighlight.foreground4#E0EBDF
  • editorBracketHighlight.foreground5#DCE9DE
  • editorBracketHighlight.foreground6#EAF2E2
  • editorCodeLens.foreground#A0AB9E
  • editorCursor.foreground#CCBFEC
  • editorError.foreground#FB7E91
  • editorGhostText.background#00000000
  • editorGhostText.foreground#A0AB9E
  • editorGroup.border#4E5F51
  • editorGroupHeader.tabsBackground#121F17
  • editorGutter.addedBackground#78E5A1
  • editorGutter.deletedBackground#FB7E91
  • editorGutter.foldingControlForeground#A0AB9E
  • editorGutter.modifiedBackground#D5E59A
  • editorHint.foreground#A0AB9E
  • editorHoverWidget.background#273A2D
  • editorHoverWidget.border#CCBFEC
  • editorHoverWidget.foreground#EAF2E2
  • editorIndentGuide.activeBackground1#D5E59A66
  • editorIndentGuide.background1#4E5F51
  • editorInfo.foreground#D5E59A
  • editorInlayHint.background#273A2D
  • editorInlayHint.foreground#A0AB9E
  • editorLineNumber.activeForeground#D5E59A
  • editorLineNumber.foreground#A0AB9E
  • editorLink.activeForeground#D5E59A
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.errorForeground#FB7E91
  • editorOverviewRuler.infoForeground#D5E59A
  • editorOverviewRuler.warningForeground#F4CC6E
  • editorRuler.foreground#4E5F51
  • editorStickyScroll.background#18281F
  • editorStickyScroll.border#4E5F51
  • editorStickyScrollHover.background#273A2D
  • editorSuggestWidget.background#273A2D
  • editorSuggestWidget.border#4E5F51
  • editorSuggestWidget.foreground#EAF2E2
  • editorSuggestWidget.highlightForeground#D5E59A
  • editorSuggestWidget.selectedBackground#405039
  • editorSuggestWidget.selectedForeground#EAF2E2
  • editorUnicodeHighlight.background#E0EBDF12
  • editorUnicodeHighlight.border#E0EBDF
  • editorWarning.foreground#F4CC6E
  • editorWhitespace.foreground#4E5F51
  • editorWidget.background#273A2D
  • editorWidget.border#4E5F51
  • editorWidget.foreground#EAF2E2
  • focusBorder#D5E59A
  • foreground#EAF2E2
  • gitDecoration.addedResourceForeground#78E5A1
  • gitDecoration.deletedResourceForeground#FB7E91
  • gitDecoration.ignoredResourceForeground#A0AB9E
  • gitDecoration.modifiedResourceForeground#D5E59A
  • input.background#273A2D
  • input.border#4E5F51
  • input.foreground#EAF2E2
  • input.placeholderForeground#A0AB9E
  • inputOption.activeBackground#D5E59A28
  • inputOption.activeBorder#D5E59A
  • inputOption.activeForeground#EAF2E2
  • list.activeSelectionBackground#405039
  • list.activeSelectionForeground#EAF2E2
  • list.focusBackground#405039
  • list.focusForeground#EAF2E2
  • list.focusHighlightForeground#D5E59A
  • list.focusOutline#D5E59A66
  • list.highlightForeground#D5E59A
  • list.hoverBackground#D5E59A14
  • list.hoverForeground#EAF2E2
  • list.inactiveSelectionBackground#405039
  • list.inactiveSelectionForeground#EAF2E2
  • menu.background#273A2D
  • menu.border#4E5F51
  • menu.foreground#EAF2E2
  • merge.currentContentBackground#DCE9DE14
  • merge.currentHeaderBackground#DCE9DE30
  • merge.incomingContentBackground#CCBFEC14
  • merge.incomingHeaderBackground#CCBFEC30
  • minimap.selectionHighlight#D5E59A77
  • notebook.cellBorderColor#4E5F51
  • notebook.cellEditorBackground#18281F
  • notebook.focusedCellBorder#D5E59A
  • notebook.selectedCellBackground#405039
  • notificationCenterHeader.background#273A2D
  • notifications.background#273A2D
  • notifications.border#4E5F51
  • notifications.foreground#EAF2E2
  • panel.background#142119
  • panel.border#4E5F51
  • panelTitle.activeBorder#D5E59A
  • panelTitle.activeForeground#D5E59A
  • panelTitle.inactiveForeground#A0AB9E
  • peekView.border#D5E59A
  • peekViewEditor.background#273A2D
  • peekViewResult.background#273A2D
  • peekViewResult.fileForeground#EAF2E2
  • peekViewResult.lineForeground#EAF2E2
  • pickerGroup.foreground#D5E59A
  • progressBar.background#D5E59A
  • quickInput.background#273A2D
  • quickInput.foreground#EAF2E2
  • quickInputList.focusBackground#405039
  • quickInputList.focusForeground#EAF2E2
  • scrollbarSlider.activeBackground#D5E59A66
  • scrollbarSlider.background#4E5F5199
  • scrollbarSlider.hoverBackground#A0AB9E66
  • settings.dropdownBackground#273A2D
  • settings.modifiedItemIndicator#D5E59A
  • sideBar.background#273A2D
  • sideBar.border#4E5F51
  • sideBar.foreground#EAF2E2
  • sideBarSectionHeader.background#273A2D
  • sideBarSectionHeader.border#4E5F51
  • sideBarSectionHeader.foreground#EAF2E2
  • sideBarTitle.foreground#EAF2E2
  • statusBar.background#313F2C
  • statusBar.border#4E5F51
  • statusBar.debuggingBackground#D5E59A
  • statusBar.debuggingForeground#18281F
  • statusBar.foreground#EAF2E2
  • statusBar.noFolderBackground#313F2C
  • statusBarItem.hoverBackground#D5E59A14
  • statusBarItem.hoverForeground#EAF2E2
  • statusBarItem.prominentBackground#405039
  • statusBarItem.prominentForeground#EAF2E2
  • statusBarItem.remoteBackground#D5E59A
  • statusBarItem.remoteForeground#18281F
  • tab.activeBackground#18281F
  • tab.activeBorder#D5E59A
  • tab.activeBorderTop#00000000
  • tab.activeForeground#EAF2E2
  • tab.border#4E5F51
  • tab.hoverBackground#405039
  • tab.inactiveBackground#273A2D
  • tab.inactiveForeground#A0AB9E
  • tab.unfocusedActiveBorder#4E5F51
  • terminal.ansiBlack#A0AB9E
  • terminal.ansiBlue#78AEFD
  • terminal.ansiBrightBlack#A0AB9E
  • terminal.ansiBrightBlue#93BEFD
  • terminal.ansiBrightCyan#88E1F1
  • terminal.ansiBrightGreen#93EAB4
  • terminal.ansiBrightMagenta#D6CCF0
  • terminal.ansiBrightRed#FC98A7
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#F6D68B
  • terminal.ansiCyan#6AD9ED
  • terminal.ansiGreen#78E5A1
  • terminal.ansiMagenta#CCBFEC
  • terminal.ansiRed#FB7E91
  • terminal.ansiWhite#EAF2E2
  • terminal.ansiYellow#F4CC6E
  • terminal.background#142119
  • terminal.foreground#EAF2E2
  • terminal.selectionBackground#405039
  • terminalCursor.background#18281F
  • terminalCursor.foreground#CCBFEC
  • testing.iconFailed#FB7E91
  • testing.iconPassed#78E5A1
  • textBlockQuote.background#273A2D
  • textBlockQuote.border#D5E59A
  • textCodeBlock.background#273A2D
  • textLink.activeForeground#D5E59A
  • textLink.foreground#D5E59A
  • titleBar.activeBackground#121F17
  • titleBar.activeForeground#EAF2E2
  • titleBar.border#4E5F51
  • titleBar.inactiveBackground#18281F
  • titleBar.inactiveForeground#A0AB9E
  • toolbar.hoverBackground#D5E59A14
  • tree.indentGuidesStroke#4E5F51

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A0AB9E
keyword, storage#CCBFEC
keyword.operator#EAF2E2
string#DCE9DE
constant.numeric, constant.language, constant.character, constant.other#E0EBDF
entity.name.function, support.function#D5E59A
entity.name.type, entity.name.class, support.type, support.class, entity.name.namespace#D5E59A
variable, meta.definition.variable#EAF2E2
variable.parameter#EAF2E2
support.type.property-name, entity.other.attribute-name, meta.object-literal.key#D5E59A
punctuation#EAF2E2
punctuation.section.interpolation, keyword.other.template, meta.interpolation punctuation#D5E59A
constant.character.escape#D5E59A
entity.name.tag#CCBFEC
storage.type.terraform, keyword.control.terraform, keyword.other.terraform#CCBFEC
variable.other.property.terraform, variable.other.readwrite.terraform#EAF2E2
support.function.builtin.shell, support.function.powershell#D5E59A
markup.heading, entity.name.section#D5E59Abold
markup.bold#EAF2E2bold
markup.italic#EAF2E2italic
markup.inline.raw, markup.fenced_code.block#DCE9DE
markup.underline.link#D5E59A
markup.inserted#78E5A1
markup.deleted#FB7E91
invalid#FB7E91
support.type.property-name.json, entity.name.tag.yaml, entity.name.tag.yml#D5E59A
keyword.other.sql, keyword.other.DML.sql, keyword.other.DDL.sql#CCBFEC
string.regexp, constant.other.character-class.regexp#DCE9DE