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#3D1632
  • activityBar.foreground#FFC2D9
  • activityBar.inactiveForeground#FFC2D980
  • activityBarBadge.background#6A9A6C
  • activityBarBadge.foreground#FFFFFF
  • badge.background#6A9A6C
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#DC548F
  • breadcrumb.background#1E1A1D
  • breadcrumb.focusForeground#FFC2D9
  • breadcrumb.foreground#E5E5E5
  • button.background#DC548F
  • button.foreground#FFF0F5
  • button.hoverBackground#D23B80
  • button.secondaryBackground#6A9A6C
  • button.secondaryForeground#FFFFFF
  • button.secondaryHoverBackground#518053
  • editor.background#1E1A1D
  • editor.findMatchBackground#D23B80
  • editor.findMatchHighlightBackground#DC548F40
  • editor.foreground#E5E5E5
  • editor.lineHighlightBackground#DC548F10
  • editor.lineHighlightBorder#DC548F00
  • editor.selectionBackground#502F41
  • editor.selectionHighlightBackground#6A9A6C40
  • editor.wordHighlightBackground#D4E6D580
  • editorCursor.foreground#DC548F
  • editorGroup.border#3D1632
  • editorGroup.dropBackground#DC548F20
  • editorGroupHeader.tabsBackground#2A1F24
  • editorLineNumber.activeForeground#DC548F
  • editorLineNumber.foreground#7A7A7A
  • editorSuggestWidget.background#2A1F24
  • editorSuggestWidget.border#3D1632
  • editorSuggestWidget.highlightForeground#DC548F
  • editorSuggestWidget.selectedBackground#502F41
  • editorWidget.background#2A1F24
  • editorWidget.border#3D1632
  • gitDecoration.addedResourceForeground#6A9A6C
  • gitDecoration.conflictingResourceForeground#E0BD6C
  • gitDecoration.deletedResourceForeground#D23B80
  • gitDecoration.ignoredResourceForeground#7A7A7A
  • gitDecoration.modifiedResourceForeground#8CAFF0
  • gitDecoration.untrackedResourceForeground#8AB68C
  • input.background#2A1F24
  • input.border#3D1632
  • input.foreground#E5E5E5
  • input.placeholderForeground#8AB68C
  • inputOption.activeBackground#DC548F50
  • inputOption.activeBorder#DC548F00
  • inputOption.activeForeground#FFFFFF
  • list.activeSelectionBackground#7A3154
  • list.activeSelectionForeground#FFC2D9
  • list.dropBackground#502F41
  • list.focusBackground#502F41
  • list.focusForeground#FFC2D9
  • list.highlightForeground#DC548F
  • list.hoverBackground#3D1632
  • list.hoverForeground#FFC2D9
  • list.inactiveSelectionBackground#3D1632
  • list.inactiveSelectionForeground#E5E5E5
  • menu.background#2A1F24
  • menu.foreground#E5E5E5
  • menu.selectionBackground#502F41
  • menu.selectionForeground#FFC2D9
  • menu.separatorBackground#DC548F50
  • menubar.selectionBackground#502F41
  • menubar.selectionForeground#FFC2D9
  • notificationCenter.border#3D1632
  • notificationLink.foreground#DC548F
  • notifications.background#2A1F24
  • notifications.border#3D1632
  • notificationsErrorIcon.foreground#D23B80
  • notificationsInfoIcon.foreground#8CAFF0
  • notificationsWarningIcon.foreground#E0BD6C
  • panel.background#2A1F24
  • panel.border#3D1632
  • panelTitle.activeBorder#DC548F
  • panelTitle.activeForeground#DC548F
  • panelTitle.inactiveForeground#E5E5E5
  • peekView.border#DC548F
  • peekViewEditor.background#1E1A1D
  • peekViewEditor.matchHighlightBackground#502F41
  • peekViewResult.background#2A1F24
  • peekViewResult.matchHighlightBackground#DC548F40
  • peekViewResult.selectionBackground#502F41
  • peekViewTitle.background#3D1632
  • peekViewTitleLabel.foreground#FFC2D9
  • pickerGroup.border#3D1632
  • pickerGroup.foreground#DC548F
  • progressBar.background#DC548F
  • scrollbarSlider.activeBackground#DC548F80
  • scrollbarSlider.background#DC548F40
  • scrollbarSlider.hoverBackground#DC548F60
  • settings.headerForeground#DC548F
  • settings.modifiedItemIndicator#DC548F
  • sideBar.background#2A1F24
  • sideBar.foreground#E5E5E5
  • sideBarSectionHeader.background#3D1632
  • sideBarSectionHeader.foreground#FFC2D9
  • sideBarTitle.foreground#DC548F
  • statusBar.background#3D1632
  • statusBar.debuggingBackground#D23B80
  • statusBar.foreground#FFC2D9
  • statusBar.noFolderBackground#306932
  • statusBarItem.activeBackground#DC548F50
  • statusBarItem.hoverBackground#DC548F30
  • statusBarItem.remoteBackground#6A9A6C
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#1E1A1D
  • tab.activeBorder#DC548F
  • tab.activeBorderTop#00000000
  • tab.activeForeground#DC548F
  • tab.border#2A1F24
  • tab.inactiveBackground#2A1F24
  • tab.inactiveForeground#E5E5E5
  • tab.unfocusedActiveBorder#DC548F80
  • terminal.ansiBlack#2A1F24
  • terminal.ansiBlue#8CAFF0
  • terminal.ansiBrightBlack#7A7A7A
  • terminal.ansiBrightBlue#7A9FE8
  • terminal.ansiBrightCyan#7ACAD5
  • terminal.ansiBrightGreen#8AB68C
  • terminal.ansiBrightMagenta#FFB8D9
  • terminal.ansiBrightRed#FF8AC8
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#F0CB7A
  • terminal.ansiCyan#4DACB8
  • terminal.ansiGreen#6A9A6C
  • terminal.ansiMagenta#DC548F
  • terminal.ansiRed#D23B80
  • terminal.ansiWhite#E5E5E5
  • terminal.ansiYellow#E0BD6C
  • terminal.background#1E1A1D
  • terminal.foreground#E5E5E5
  • terminal.selectionBackground#502F41
  • titleBar.activeBackground#3D1632
  • titleBar.activeForeground#FFC2D9
  • titleBar.inactiveBackground#2A1F24
  • titleBar.inactiveForeground#FFC2D980

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#678D69italic
string, punctuation.definition.string#8AB68C
keyword, storage.type, storage.modifier#DC548F
entity.name.function, support.function#8CAFF0
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution#E0BD6C
variable, entity.name.variable#E5E5E5
variable.other.constant, support.constant#FFB8D9
constant.numeric#FFB8D9
punctuation#AAAAAA
meta.brace.square, punctuation.definition.bracket#7ACAD5
meta.brace.curly, punctuation.definition.block#F0CB7A
meta.brace.round, punctuation.definition.parameters, punctuation.definition.group#FF8AC8
entity.name.tag, punctuation.definition.tag#DC548F
entity.other.attribute-name#E0BD6C
markup.heading#DC548Fbold
markup.bold#E5E5E5bold
markup.italic#E5E5E5italic
markup.underline.link#8CAFF0
string.regexp#4DACB8
constant.character.escape#4DACB8
support.type.property-name.json#DC548F
string.quoted.double.json#8AB68C
support.type.property-name.css#FFB8D9
support.constant.property-value.css#8AB68C
entity.name.tag.css, entity.other.attribute-name.class.css#DC548F
entity.name.tag.html#DC548F
entity.other.attribute-name.html#E0BD6C
variable.other.readwrite.js, variable.other.object.js#E5E5E5
support.type.primitive.ts, support.type.builtin.ts#E0BD6C
variable.parameter.function.language.python#E0BD6C
meta.function-call.python#8CAFF0
markup.underline.link.markdown#8CAFF0
markup.heading.markdown#DC548F
markup.bold.markdown#FFB8D9bold
markup.italic.markdown#FFB8D9italic
markup.inline.raw.markdown#8AB68C