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#C45C6A
  • activityBar.background#18191C
  • activityBar.border#2A2C30
  • activityBar.foreground#D4D0CC
  • activityBar.inactiveForeground#6C6864
  • activityBarBadge.background#C45C6A
  • activityBarBadge.foreground#E8E4E0
  • badge.background#C45C6A
  • badge.foreground#E8E4E0
  • breadcrumb.activeSelectionForeground#D4D0CC
  • breadcrumb.background#1F2024
  • breadcrumb.foreground#6C6864
  • button.background#C45C6A
  • button.foreground#E8E4E0
  • button.hoverBackground#D46878
  • button.secondaryBackground#3A3C42
  • button.secondaryForeground#D4D0CC
  • button.secondaryHoverBackground#4A4C52
  • checkbox.background#2C2E32
  • checkbox.border#3A3C42
  • checkbox.foreground#D4D0CC
  • descriptionForeground#9C9894
  • dropdown.background#2C2E32
  • dropdown.border#3A3C42
  • dropdown.foreground#D4D0CC
  • editor.background#1B1C1F
  • editor.findMatchBackground#B8904088
  • editor.findMatchHighlightBackground#B8904030
  • editor.foreground#D4D0CC
  • editor.inactiveSelectionBackground#3A3C4288
  • editor.lineHighlightBackground#1F2024
  • editor.lineHighlightBorder#2A2C30
  • editor.selectionBackground#3A3C42
  • editor.selectionHighlightBackground#C45C6A20
  • editor.wordHighlightBackground#6B7F941C
  • editor.wordHighlightStrongBackground#8B4A5224
  • editorBracketMatch.border#C45C6A
  • editorCursor.foreground#C45C6A
  • editorError.foreground#C45C6A
  • editorGroupHeader.tabsBackground#1F2024
  • editorGutter.addedBackground#5E8A64
  • editorGutter.deletedBackground#C45C6A
  • editorGutter.modifiedBackground#6B7F94
  • editorHoverWidget.background#2C2E32
  • editorHoverWidget.border#3A3C42
  • editorHoverWidget.foreground#D4D0CC
  • editorIndentGuide.activeBackground1#4A4C50
  • editorIndentGuide.background1#2A2C30
  • editorInfo.foreground#6B7F94
  • editorInlayHint.background#1B1C1F
  • editorInlayHint.foreground#6C6864
  • editorLineNumber.activeForeground#9C9894
  • editorLineNumber.foreground#4C4844
  • editorLink.activeForeground#6B7F94
  • editorSuggestWidget.background#2C2E32
  • editorSuggestWidget.border#3A3C42
  • editorSuggestWidget.foreground#D4D0CC
  • editorSuggestWidget.highlightForeground#C45C6A
  • editorWarning.foreground#B89040
  • editorWhitespace.foreground#2A2C30
  • editorWidget.background#2C2E32
  • editorWidget.border#3A3C42
  • editorWidget.foreground#D4D0CC
  • errorForeground#C45C6A
  • focusBorder#C45C6A
  • foreground#D4D0CC
  • gitDecoration.addedResourceForeground#78A280
  • gitDecoration.deletedResourceForeground#D87080
  • gitDecoration.modifiedResourceForeground#8898AC
  • gitDecoration.untrackedResourceForeground#78A280
  • icon.foreground#9C9894
  • input.background#2C2E32
  • input.border#3A3C42
  • input.foreground#D4D0CC
  • input.placeholderForeground#6C6864
  • inputOption.activeBackground#C45C6A20
  • inputOption.activeBorder#C45C6A
  • inputOption.activeForeground#D4D0CC
  • inputValidation.errorBackground#2C1C22
  • inputValidation.errorBorder#C45C6A
  • inputValidation.infoBackground#1E2228
  • inputValidation.infoBorder#6B7F94
  • inputValidation.warningBackground#2C2618
  • inputValidation.warningBorder#B89040
  • list.activeSelectionBackground#3A3C42
  • list.activeSelectionForeground#D4D0CC
  • list.focusBackground#3A3C42
  • list.focusForeground#D4D0CC
  • list.highlightForeground#C45C6A
  • list.hoverBackground#2C2E32
  • list.hoverForeground#D4D0CC
  • list.inactiveSelectionBackground#2C2E32
  • list.inactiveSelectionForeground#D4D0CC
  • minimap.selectionHighlight#C45C6A38
  • notificationCenterHeader.background#2C2E32
  • notifications.background#2C2E32
  • notifications.border#3A3C42
  • notifications.foreground#D4D0CC
  • panel.background#1F2024
  • panel.border#2A2C30
  • panelTitle.activeForeground#D4D0CC
  • panelTitle.inactiveForeground#6C6864
  • peekView.border#3A3C42
  • peekViewEditor.background#1B1C1F
  • peekViewEditorGutter.background#1B1C1F
  • peekViewResult.background#1F2024
  • peekViewResult.selectionBackground#3A3C42
  • peekViewTitle.background#2C2E32
  • peekViewTitleLabel.foreground#D4D0CC
  • progressBar.background#C45C6A
  • scrollbarSlider.activeBackground#6A6C7077
  • scrollbarSlider.background#4A4C5055
  • scrollbarSlider.hoverBackground#5A5C6066
  • selection.background#3A3C42
  • sideBar.background#1F2024
  • sideBar.border#2A2C30
  • sideBar.foreground#9C9894
  • sideBarSectionHeader.background#2C2E32
  • sideBarSectionHeader.border#2A2C30
  • sideBarSectionHeader.foreground#D4D0CC
  • sideBarTitle.foreground#D4D0CC
  • statusBar.background#1F2024
  • statusBar.border#2A2C30
  • statusBar.debuggingBackground#6B7F94
  • statusBar.debuggingForeground#E8E4E0
  • statusBar.foreground#D4D0CC
  • statusBar.noFolderBackground#1F2024
  • tab.activeBackground#2C2E32
  • tab.activeBorderTop#C45C6A
  • tab.activeForeground#D4D0CC
  • tab.border#2A2C30
  • tab.inactiveBackground#1F2024
  • tab.inactiveForeground#6C6864
  • terminal.ansiBlack#1B1C1F
  • terminal.ansiBlue#6B7F94
  • terminal.ansiBrightBlack#6C6864
  • terminal.ansiBrightBlue#8898AC
  • terminal.ansiBrightCyan#72A0A0
  • terminal.ansiBrightGreen#78A280
  • terminal.ansiBrightMagenta#B48098
  • terminal.ansiBrightRed#D87080
  • terminal.ansiBrightWhite#E8E4E0
  • terminal.ansiBrightYellow#D0A850
  • terminal.ansiCyan#5A8A8A
  • terminal.ansiGreen#5E8A64
  • terminal.ansiMagenta#9C6880
  • terminal.ansiRed#C45C6A
  • terminal.ansiWhite#D4D0CC
  • terminal.ansiYellow#B89040
  • terminal.background#1B1C1F
  • terminal.foreground#D4D0CC
  • terminalCursor.foreground#C45C6A
  • textLink.activeForeground#C45C6A
  • textLink.foreground#6B7F94
  • titleBar.activeBackground#1F2024
  • titleBar.activeForeground#D4D0CC
  • titleBar.border#2A2C30
  • titleBar.inactiveBackground#1F2024
  • titleBar.inactiveForeground#6C6864
  • widget.border#3A3C42
  • widget.shadow#00000044

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6C6864italic
string, string.quoted, string.template#5E8A64
constant.numeric, constant.language, constant.character#B89040
constant.character.escape, constant.other.symbol#9C6880
keyword, storage, storage.modifier#C45C6A
keyword.operator, punctuation#9C9894
entity.name.function, support.function, meta.function-call#B89040
variable.parameter#5E8A64italic
entity.name.type, entity.name.class, support.type, support.class#6B7F94
entity.other.attribute-name, support.constant.property-value, meta.object-literal.key#B89040
variable, identifier#D4D0CC
entity.name.tag, punctuation.definition.tag#C45C6A
support.constant, support.variable#6B7F94
markup.heading, markup.bold#B89040bold
markup.italic#C45C6Aitalic
markup.inline.raw, markup.fenced_code#6B7F94
markup.quote#9C9894italic
invalid, invalid.illegal#E8E4E0