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#DDBBA50D
  • activityBar.activeBorder#CDB7E6
  • activityBar.background#36453D
  • activityBar.foreground#DDBBA5
  • activityBar.inactiveForeground#AEB5B0
  • activityBarBadge.background#DDBBA5
  • activityBarBadge.foreground#28332E
  • activityBarTop.activeBorder#DDBBA5
  • activityBarTop.background#36453D
  • activityBarTop.foreground#DDBBA5
  • activityBarTop.inactiveForeground#AEB5B0
  • badge.background#DDBBA5
  • badge.foreground#28332E
  • breadcrumb.background#28332E
  • breadcrumb.foreground#AEB5B0
  • button.background#DDBBA5
  • button.foreground#28332E
  • button.hoverBackground#E3C7B5
  • button.secondaryBackground#4E5047
  • button.secondaryForeground#EAF0E9
  • button.secondaryHoverBackground#202A25
  • commandCenter.background#36453D
  • commandCenter.border#5A675F
  • commandCenter.foreground#EAF0E9
  • debugConsole.errorForeground#FC96A5
  • debugConsole.warningForeground#F4CB6D
  • descriptionForeground#AEB5B0
  • diffEditor.insertedLineBackground#78E4A10D
  • diffEditor.insertedTextBackground#78E4A121
  • diffEditor.removedLineBackground#FC96A50D
  • diffEditor.removedTextBackground#FC96A521
  • disabledForeground#AEB5B0
  • dropdown.background#36453D
  • dropdown.border#5A675F
  • dropdown.foreground#EAF0E9
  • editor.background#28332E
  • editor.findMatchBackground#53555E
  • editor.findMatchBorder#CDB7E6
  • editor.findMatchHighlightBackground#DDBBA528
  • editor.findMatchHighlightBorder#DDBBA555
  • editor.foreground#EAF0E9
  • editor.inactiveSelectionBackground#DDBBA528
  • editor.lineHighlightBackground#324038
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#4E5047
  • editor.selectionForeground#EAF0E9
  • editor.selectionHighlightBackground#DDBBA528
  • editor.selectionHighlightBorder#DDBBA544
  • editor.wordHighlightBackground#DDBBA528
  • editor.wordHighlightStrongBackground#DDBBA528
  • editorBracketHighlight.foreground1#DDBBA5
  • editorBracketHighlight.foreground2#DDBBA5
  • editorBracketHighlight.foreground3#CDB7E6
  • editorBracketHighlight.foreground4#D3DEDB
  • editorBracketHighlight.foreground5#CBD8D7
  • editorBracketHighlight.foreground6#EAF0E9
  • editorCodeLens.foreground#AEB5B0
  • editorCursor.foreground#CDB7E6
  • editorError.foreground#FC96A5
  • editorGhostText.background#00000000
  • editorGhostText.foreground#AEB5B0
  • editorGroup.border#5A675F
  • editorGroupHeader.tabsBackground#202A25
  • editorGutter.addedBackground#78E4A1
  • editorGutter.deletedBackground#FC96A5
  • editorGutter.foldingControlForeground#AEB5B0
  • editorGutter.modifiedBackground#CDB7E6
  • editorHint.foreground#AEB5B0
  • editorHoverWidget.background#36453D
  • editorHoverWidget.border#CDB7E6
  • editorHoverWidget.foreground#EAF0E9
  • editorIndentGuide.activeBackground1#DDBBA566
  • editorIndentGuide.background1#5A675F
  • editorInfo.foreground#CDB7E6
  • editorInlayHint.background#36453D
  • editorInlayHint.foreground#AEB5B0
  • editorLineNumber.activeForeground#DDBBA5
  • editorLineNumber.foreground#AEB5B0
  • editorLink.activeForeground#DDBBA5
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.errorForeground#FC96A5
  • editorOverviewRuler.infoForeground#CDB7E6
  • editorOverviewRuler.warningForeground#F4CB6D
  • editorRuler.foreground#5A675F
  • editorStickyScroll.background#28332E
  • editorStickyScroll.border#5A675F
  • editorStickyScrollHover.background#36453D
  • editorSuggestWidget.background#36453D
  • editorSuggestWidget.border#5A675F
  • editorSuggestWidget.foreground#EAF0E9
  • editorSuggestWidget.highlightForeground#DDBBA5
  • editorSuggestWidget.selectedBackground#4E5047
  • editorSuggestWidget.selectedForeground#EAF0E9
  • editorUnicodeHighlight.background#D3DEDB12
  • editorUnicodeHighlight.border#D3DEDB
  • editorWarning.foreground#F4CB6D
  • editorWhitespace.foreground#5A675F
  • editorWidget.background#36453D
  • editorWidget.border#5A675F
  • editorWidget.foreground#EAF0E9
  • focusBorder#DDBBA5
  • foreground#EAF0E9
  • gitDecoration.addedResourceForeground#78E4A1
  • gitDecoration.deletedResourceForeground#FC96A5
  • gitDecoration.ignoredResourceForeground#AEB5B0
  • gitDecoration.modifiedResourceForeground#CDB7E6
  • input.background#36453D
  • input.border#5A675F
  • input.foreground#EAF0E9
  • input.placeholderForeground#AEB5B0
  • inputOption.activeBackground#DDBBA528
  • inputOption.activeBorder#DDBBA5
  • inputOption.activeForeground#EAF0E9
  • list.activeSelectionBackground#4E5047
  • list.activeSelectionForeground#EAF0E9
  • list.focusBackground#4E5047
  • list.focusForeground#EAF0E9
  • list.focusHighlightForeground#DDBBA5
  • list.focusOutline#DDBBA566
  • list.highlightForeground#DDBBA5
  • list.hoverBackground#DDBBA514
  • list.hoverForeground#EAF0E9
  • list.inactiveSelectionBackground#4E5047
  • list.inactiveSelectionForeground#EAF0E9
  • menu.background#36453D
  • menu.border#5A675F
  • menu.foreground#EAF0E9
  • merge.currentContentBackground#CBD8D714
  • merge.currentHeaderBackground#CBD8D730
  • merge.incomingContentBackground#CDB7E614
  • merge.incomingHeaderBackground#CDB7E630
  • minimap.selectionHighlight#DDBBA577
  • notebook.cellBorderColor#5A675F
  • notebook.cellEditorBackground#28332E
  • notebook.focusedCellBorder#DDBBA5
  • notebook.selectedCellBackground#4E5047
  • notificationCenterHeader.background#36453D
  • notifications.background#36453D
  • notifications.border#5A675F
  • notifications.foreground#EAF0E9
  • panel.background#232A29
  • panel.border#5A675F
  • panelTitle.activeBorder#DDBBA5
  • panelTitle.activeForeground#DDBBA5
  • panelTitle.inactiveForeground#AEB5B0
  • peekView.border#DDBBA5
  • peekViewEditor.background#36453D
  • peekViewResult.background#36453D
  • peekViewResult.fileForeground#EAF0E9
  • peekViewResult.lineForeground#EAF0E9
  • pickerGroup.foreground#DDBBA5
  • progressBar.background#DDBBA5
  • quickInput.background#36453D
  • quickInput.foreground#EAF0E9
  • quickInputList.focusBackground#4E5047
  • quickInputList.focusForeground#EAF0E9
  • scrollbarSlider.activeBackground#DDBBA566
  • scrollbarSlider.background#5A675F99
  • scrollbarSlider.hoverBackground#AEB5B066
  • settings.dropdownBackground#36453D
  • settings.modifiedItemIndicator#DDBBA5
  • sideBar.background#36453D
  • sideBar.border#5A675F
  • sideBar.foreground#EAF0E9
  • sideBarSectionHeader.background#36453D
  • sideBarSectionHeader.border#5A675F
  • sideBarSectionHeader.foreground#EAF0E9
  • sideBarTitle.foreground#EAF0E9
  • statusBar.background#3E4139
  • statusBar.border#5A675F
  • statusBar.debuggingBackground#DDBBA5
  • statusBar.debuggingForeground#28332E
  • statusBar.foreground#EAF0E9
  • statusBar.noFolderBackground#3E4139
  • statusBarItem.hoverBackground#DDBBA514
  • statusBarItem.hoverForeground#EAF0E9
  • statusBarItem.prominentBackground#4E5047
  • statusBarItem.prominentForeground#EAF0E9
  • statusBarItem.remoteBackground#DDBBA5
  • statusBarItem.remoteForeground#28332E
  • tab.activeBackground#28332E
  • tab.activeBorder#DDBBA5
  • tab.activeBorderTop#00000000
  • tab.activeForeground#EAF0E9
  • tab.border#5A675F
  • tab.hoverBackground#4E5047
  • tab.inactiveBackground#36453D
  • tab.inactiveForeground#AEB5B0
  • tab.unfocusedActiveBorder#5A675F
  • terminal.ansiBlack#AEB5B0
  • terminal.ansiBlue#84B5FD
  • terminal.ansiBrightBlack#AEB5B0
  • terminal.ansiBrightBlue#9DC4FD
  • terminal.ansiBrightCyan#88E0F0
  • terminal.ansiBrightGreen#93E9B4
  • terminal.ansiBrightMagenta#D7C5EB
  • terminal.ansiBrightRed#FDABB7
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#F6D58A
  • terminal.ansiCyan#6AD8EC
  • terminal.ansiGreen#78E4A1
  • terminal.ansiMagenta#CDB7E6
  • terminal.ansiRed#FC96A5
  • terminal.ansiWhite#EAF0E9
  • terminal.ansiYellow#F4CB6D
  • terminal.background#232A29
  • terminal.foreground#EAF0E9
  • terminal.selectionBackground#4E5047
  • terminalCursor.background#28332E
  • terminalCursor.foreground#CDB7E6
  • testing.iconFailed#FC96A5
  • testing.iconPassed#78E4A1
  • textBlockQuote.background#36453D
  • textBlockQuote.border#DDBBA5
  • textCodeBlock.background#36453D
  • textLink.activeForeground#CDB7E6
  • textLink.foreground#DDBBA5
  • titleBar.activeBackground#202A25
  • titleBar.activeForeground#EAF0E9
  • titleBar.border#5A675F
  • titleBar.inactiveBackground#28332E
  • titleBar.inactiveForeground#AEB5B0
  • toolbar.hoverBackground#DDBBA514
  • tree.indentGuidesStroke#5A675F

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#AEB5B0
keyword, storage#CDB7E6
keyword.operator#EAF0E9
string#CBD8D7
constant.numeric, constant.language, constant.character, constant.other#D3DEDB
entity.name.function, support.function#DDBBA5
entity.name.type, entity.name.class, support.type, support.class, entity.name.namespace#CDB7E6
variable, meta.definition.variable#EAF0E9
variable.parameter#EAF0E9
support.type.property-name, entity.other.attribute-name, meta.object-literal.key#CDB7E6
punctuation#EAF0E9
punctuation.section.interpolation, keyword.other.template, meta.interpolation punctuation#DDBBA5
constant.character.escape#DDBBA5
entity.name.tag#CDB7E6
storage.type.terraform, keyword.control.terraform, keyword.other.terraform#CDB7E6
variable.other.property.terraform, variable.other.readwrite.terraform#EAF0E9
support.function.builtin.shell, support.function.powershell#DDBBA5
markup.heading, entity.name.section#DDBBA5bold
markup.bold#EAF0E9bold
markup.italic#EAF0E9italic
markup.inline.raw, markup.fenced_code.block#CBD8D7
markup.underline.link#DDBBA5
markup.inserted#78E4A1
markup.deleted#FC96A5
invalid#FC96A5
support.type.property-name.json, entity.name.tag.yaml, entity.name.tag.yml#CDB7E6
keyword.other.sql, keyword.other.DML.sql, keyword.other.DDL.sql#CDB7E6
string.regexp, constant.other.character-class.regexp#CBD8D7