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.background#F5E0E5
  • activityBar.border#E8D0D6
  • activityBar.dropBorder#7A2540
  • activityBar.foreground#7A2540
  • activityBar.inactiveForeground#A88890
  • activityBarBadge.background#7A2540
  • activityBarBadge.foreground#FCEAEE
  • badge.background#7A2540
  • badge.foreground#FFFFFF
  • button.background#7A2540
  • button.foreground#FCEAEE
  • button.hoverBackground#A8455F
  • checkbox.background#FFFFFF
  • checkbox.border#D9B8C0
  • descriptionForeground#5A3A42
  • diffEditor.insertedTextBackground#4A9A6A20
  • diffEditor.removedTextBackground#C42A2A20
  • dropdown.background#FFFFFF
  • dropdown.border#D9B8C0
  • dropdown.foreground#3A2028
  • editor.background#FFFAFA
  • editor.findMatchBackground#F0C4D080
  • editor.findMatchHighlightBackground#F0C4D040
  • editor.findRangeHighlightBackground#F0C4D030
  • editor.foreground#3A2028
  • editor.hoverHighlightBackground#F0C4D040
  • editor.inactiveSelectionBackground#F5D8E040
  • editor.lineHighlightBackground#FAF0F2
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#FBE8ED40
  • editor.selectionBackground#F0C4D060
  • editor.selectionHighlightBackground#F0C4D040
  • editor.wordHighlightBackground#E4F0DC40
  • editor.wordHighlightStrongBackground#E4F0DC60
  • editorBracketMatch.background#F0C4D040
  • editorBracketMatch.border#A8455F
  • editorCodeLens.foreground#A88890
  • editorCursor.foreground#7A2540
  • editorError.foreground#C42A2A
  • editorGroup.border#E8D0D6
  • editorGroup.dropBackground#F0C4D040
  • editorGroupHeader.tabsBackground#F5E0E5
  • editorGroupHeader.tabsBorder#E8D0D6
  • editorGutter.addedBackground#4A9A6A
  • editorGutter.background#FFFAFA
  • editorGutter.deletedBackground#C42A2A
  • editorGutter.modifiedBackground#A8455F
  • editorHint.foreground#8A6870
  • editorHoverWidget.background#F5E0E5
  • editorHoverWidget.border#D9B8C0
  • editorIndentGuide.activeBackground#D9B8C0
  • editorIndentGuide.background#E8D0D6
  • editorInfo.foreground#7A2540
  • editorLineNumber.activeForeground#A8455F
  • editorLineNumber.foreground#D9B8C0
  • editorLink.activeForeground#7A2540
  • editorOverviewRuler.addedForeground#4A9A6A
  • editorOverviewRuler.border#E8D0D6
  • editorOverviewRuler.deletedForeground#C42A2A
  • editorOverviewRuler.errorForeground#C42A2A
  • editorOverviewRuler.findMatchForeground#F0C4D080
  • editorOverviewRuler.infoForeground#A8455F
  • editorOverviewRuler.modifiedForeground#A8455F
  • editorOverviewRuler.rangeHighlightForeground#F0C4D080
  • editorOverviewRuler.selectionHighlightForeground#E4F0DC80
  • editorOverviewRuler.warningForeground#B8721E
  • editorOverviewRuler.wordHighlightForeground#E4F0DC60
  • editorOverviewRuler.wordHighlightStrongForeground#E4F0DC80
  • editorRuler.foreground#E8D0D6
  • editorSuggestWidget.background#F5E0E5
  • editorSuggestWidget.border#D9B8C0
  • editorSuggestWidget.foreground#3A2028
  • editorSuggestWidget.highlightForeground#7A2540
  • editorSuggestWidget.selectedBackground#F0C4D0
  • editorWarning.foreground#B8721E
  • editorWhitespace.foreground#F0C4D080
  • editorWidget.background#F5E0E5
  • editorWidget.border#D9B8C0
  • errorForeground#C42A2A
  • focusBorder#7A2540
  • foreground#3A2028
  • gitDecoration.conflictingResourceForeground#B8721E
  • gitDecoration.deletedResourceForeground#C42A2A
  • gitDecoration.ignoredResourceForeground#A88890
  • gitDecoration.modifiedResourceForeground#7A2540
  • gitDecoration.untrackedResourceForeground#4A9A6A
  • input.background#FFFFFF
  • input.border#D9B8C0
  • input.foreground#3A2028
  • input.placeholderForeground#A88890
  • inputOption.activeBorder#7A2540
  • inputValidation.errorBackground#FFE8E8
  • inputValidation.errorBorder#C42A2A
  • list.activeSelectionBackground#F0C4D0
  • list.activeSelectionForeground#3A2028
  • list.dropBackground#FBE8ED80
  • list.focusBackground#F5D8E0
  • list.focusForeground#3A2028
  • list.highlightForeground#7A2540
  • list.hoverBackground#FCEEF2
  • list.hoverForeground#3A2028
  • list.inactiveSelectionBackground#F5D8E0
  • list.inactiveSelectionForeground#5A3A42
  • menu.background#F5E0E5
  • menu.foreground#3A2028
  • menu.selectionBackground#F0C4D0
  • menu.selectionForeground#3A2028
  • menu.separatorBackground#D9B8C0
  • menubar.selectionBackground#F0C4D0
  • menubar.selectionBorder#D9B8C0
  • menubar.selectionForeground#3A2028
  • merge.border#D9B8C0
  • merge.currentContentBackground#4A9A6A20
  • merge.currentHeaderBackground#4A9A6A40
  • merge.incomingContentBackground#A8455F20
  • merge.incomingHeaderBackground#A8455F40
  • minimap.background#FAF0F2
  • minimap.errorHighlight#C42A2A
  • minimap.findMatchHighlight#B8721E80
  • minimap.selectionHighlight#8FBB6B80
  • notificationCenter.border#D9B8C0
  • notificationCenterHeader.background#F5E0E5
  • notificationCenterHeader.foreground#3A2028
  • notificationLink.foreground#7A2540
  • notifications.background#F5E0E5
  • notifications.border#D9B8C0
  • notifications.foreground#3A2028
  • notificationToast.border#D9B8C0
  • panel.background#F5E0E5
  • panel.border#E8D0D6
  • panelTitle.activeBorder#7A2540
  • panelTitle.activeForeground#3A2028
  • panelTitle.inactiveForeground#A88890
  • peekView.border#7A2540
  • peekViewEditor.background#F5E0E5
  • peekViewEditor.matchHighlightBackground#F0C4D040
  • peekViewEditorGutter.background#F5E4E8
  • peekViewResult.background#F5E4E8
  • peekViewResult.fileForeground#3A2028
  • peekViewResult.lineForeground#5A3A42
  • peekViewResult.matchHighlightBackground#F0C4D060
  • peekViewResult.selectionBackground#F0C4D0
  • peekViewResult.selectionForeground#3A2028
  • peekViewTitle.background#F5E4E8
  • peekViewTitleDescription.foreground#8A6870
  • peekViewTitleLabel.foreground#3A2028
  • progressBar.background#A8455F
  • scrollbar.shadow#FBE8ED33
  • scrollbarSlider.activeBackground#B8748AC0
  • scrollbarSlider.background#D9B8C080
  • scrollbarSlider.hoverBackground#C98FA0A0
  • sideBar.background#FAF0F2
  • sideBar.border#E8D0D6
  • sideBar.foreground#5A3A42
  • sideBarSectionHeader.background#FBE8ED
  • sideBarSectionHeader.border#E8D0D6
  • sideBarSectionHeader.foreground#3A2028
  • sideBarTitle.foreground#3A2028
  • statusBar.background#F5E0E5
  • statusBar.border#E8D0D6
  • statusBar.debuggingBackground#7A2540
  • statusBar.debuggingForeground#FCEAEE
  • statusBar.foreground#5A3A42
  • statusBar.noFolderBackground#F5E0E5
  • statusBar.noFolderForeground#5A3A42
  • statusBarItem.activeBackground#F0C4D0
  • statusBarItem.hoverBackground#F5D8E0
  • statusBarItem.prominentBackground#7A2540
  • statusBarItem.prominentHoverBackground#A8455F
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#7A2540
  • tab.activeForeground#3A2028
  • tab.border#E8D0D6
  • tab.hoverBackground#FFFFFF
  • tab.hoverForeground#3A2028
  • tab.inactiveBackground#F5E0E5
  • tab.inactiveForeground#A88890
  • tab.unfocusedActiveBorder#D9B8C0
  • tab.unfocusedActiveForeground#5A3A42
  • tab.unfocusedInactiveForeground#B598A0
  • terminal.ansiBlack#3A2028
  • terminal.ansiBlue#5560A0
  • terminal.ansiBrightBlack#8A6870
  • terminal.ansiBrightBlue#7580C0
  • terminal.ansiBrightCyan#5AC0B8
  • terminal.ansiBrightGreen#6ABF8F
  • terminal.ansiBrightMagenta#C15B72
  • terminal.ansiBrightRed#D44A4A
  • terminal.ansiBrightWhite#FCEAEE
  • terminal.ansiBrightYellow#D89838
  • terminal.ansiCyan#3A8A82
  • terminal.ansiGreen#4A9A6A
  • terminal.ansiMagenta#7A2540
  • terminal.ansiRed#B42A2A
  • terminal.ansiWhite#D9B8C0
  • terminal.ansiYellow#B8721E
  • terminal.background#F5E0E5
  • terminal.foreground#3A2028
  • terminal.selectionBackground#F0C4D060
  • textBlockQuote.background#FBE8ED
  • textCodeBlock.background#FBE8ED
  • textLink.activeForeground#A8455F
  • textLink.foreground#7A2540
  • textPreformat.foreground#B8721E
  • textSeparator.foreground#D9B8C0
  • titleBar.activeBackground#F0D4DE
  • titleBar.activeForeground#2A1218
  • titleBar.border#E0C4CE
  • titleBar.inactiveBackground#F8E4EC
  • titleBar.inactiveForeground#8A7078

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A4550italic
string, string.quoted#3A8A5A
constant.numeric, constant.language#B8721E
constant.character.escape#3A8A82
keyword, storage.type, storage.modifier#7A2540bold
keyword.control, keyword.operator.new#A8455Fbold
keyword.operator#5A3A42
entity.name.function, meta.function-call, support.function#7A2540bold
entity.name.type, entity.name.class, support.class#B8721E
variable, variable.other, variable.parameter#3A2028
variable.language#B8721Eitalic
support.type.property-name, meta.object-literal.key#3A8A82
entity.name.tag, meta.tag#7A2540
entity.other.attribute-name#7A2540
invalid#C42A2Abold
markup.heading#7A2540bold
markup.bold#B8721Ebold
markup.italic#A8455Fitalic
markup.underline.link#7A2540underline
markup.quote#8A6870italic
markup.inline.raw, markup.fenced_code#3A8A5A
entity.name.type.alias, entity.name.type.interface, support.type.primitive#3A8A82
entity.name.type.parameter#B8721Eitalic
meta.type.annotation, meta.return.type#3A8A82
support.type.builtin#3A8A82italic