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#FFDCE9
  • activityBar.foreground#C01C65
  • activityBar.inactiveForeground#D23B80A0
  • activityBarBadge.background#518053
  • activityBarBadge.foreground#FFFFFF
  • badge.background#518053
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#C01C65
  • breadcrumb.background#FEF9FB
  • breadcrumb.focusForeground#C01C65
  • breadcrumb.foreground#2A1F24
  • button.background#DC548F
  • button.foreground#FFFFFF
  • button.hoverBackground#C01C65
  • button.secondaryBackground#518053
  • button.secondaryForeground#FFFFFF
  • button.secondaryHoverBackground#3F6841
  • editor.background#FEF9FB
  • editor.findMatchBackground#FF9CC7
  • editor.findMatchHighlightBackground#FF9CC780
  • editor.foreground#2A1F24
  • editor.lineHighlightBackground#FFD6E760
  • editor.lineHighlightBorder#FFD6E700
  • editor.selectionBackground#FF9CC780
  • editor.selectionHighlightBackground#C4DEC660
  • editor.wordHighlightBackground#C4DEC690
  • editorCursor.foreground#C01C65
  • editorGroup.border#FFDCE9
  • editorGroup.dropBackground#DC548F30
  • editorGroupHeader.tabsBackground#F9EDF2
  • editorLineNumber.activeForeground#C01C65
  • editorLineNumber.foreground#888888
  • editorSuggestWidget.background#F9EDF2
  • editorSuggestWidget.border#FFDCE9
  • editorSuggestWidget.highlightForeground#C01C65
  • editorSuggestWidget.selectedBackground#FF9CC780
  • editorWidget.background#F9EDF2
  • editorWidget.border#FFDCE9
  • gitDecoration.addedResourceForeground#3F6841
  • gitDecoration.conflictingResourceForeground#9A6800
  • gitDecoration.deletedResourceForeground#C01C65
  • gitDecoration.ignoredResourceForeground#888888
  • gitDecoration.modifiedResourceForeground#3057B0
  • gitDecoration.untrackedResourceForeground#679269
  • input.background#FFFFFF
  • input.border#FFDCE9
  • input.foreground#2A1F24
  • input.placeholderForeground#679269
  • inputOption.activeBackground#C01C6540
  • inputOption.activeBorder#C01C6500
  • inputOption.activeForeground#2A1F24
  • list.activeSelectionBackground#FFD6E7
  • list.activeSelectionForeground#C01C65
  • list.dropBackground#FF9CC780
  • list.focusBackground#FF9CC780
  • list.focusForeground#C01C65
  • list.highlightForeground#C01C65
  • list.hoverBackground#FFD6E7
  • list.hoverForeground#C01C65
  • list.inactiveSelectionBackground#FFD6E7
  • list.inactiveSelectionForeground#2A1F24
  • menu.background#F9EDF2
  • menu.foreground#2A1F24
  • menu.selectionBackground#FF9CC780
  • menu.selectionForeground#C01C65
  • menu.separatorBackground#C01C6540
  • menubar.selectionBackground#FFD6E7
  • menubar.selectionForeground#C01C65
  • notificationCenter.border#FFDCE9
  • notificationLink.foreground#DC548F
  • notifications.background#F9EDF2
  • notifications.border#FFDCE9
  • notificationsErrorIcon.foreground#C01C65
  • notificationsInfoIcon.foreground#3057B0
  • notificationsWarningIcon.foreground#9A6800
  • panel.background#F9EDF2
  • panel.border#FFDCE9
  • panelTitle.activeBorder#C01C65
  • panelTitle.activeForeground#C01C65
  • panelTitle.inactiveForeground#2A1F24
  • peekView.border#C01C65
  • peekViewEditor.background#FEF9FB
  • peekViewEditor.matchHighlightBackground#FF9CC780
  • peekViewResult.background#F9EDF2
  • peekViewResult.matchHighlightBackground#FF9CC780
  • peekViewResult.selectionBackground#FF9CC780
  • peekViewTitle.background#FFDCE9
  • peekViewTitleLabel.foreground#C01C65
  • pickerGroup.border#FFDCE9
  • pickerGroup.foreground#C01C65
  • progressBar.background#DC548F
  • scrollbarSlider.activeBackground#DC548F80
  • scrollbarSlider.background#DC548F40
  • scrollbarSlider.hoverBackground#DC548F60
  • settings.headerForeground#C01C65
  • settings.modifiedItemIndicator#C01C65
  • sideBar.background#F9EDF2
  • sideBar.foreground#2A1F24
  • sideBarSectionHeader.background#FFDCE9
  • sideBarSectionHeader.foreground#C01C65
  • sideBarTitle.foreground#C01C65
  • statusBar.background#FFDCE9
  • statusBar.debuggingBackground#C01C65
  • statusBar.foreground#C01C65
  • statusBar.noFolderBackground#D4E6D5
  • statusBarItem.activeBackground#C01C6530
  • statusBarItem.hoverBackground#C01C6520
  • statusBarItem.remoteBackground#518053
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#FEF9FB
  • tab.activeBorder#C01C65
  • tab.activeBorderTop#00000000
  • tab.activeForeground#C01C65
  • tab.border#F9EDF2
  • tab.inactiveBackground#F9EDF2
  • tab.inactiveForeground#2A1F24
  • tab.unfocusedActiveBorder#C01C65A0
  • terminal.ansiBlack#2A1F24
  • terminal.ansiBlue#3057B0
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#7A9FE8
  • terminal.ansiBrightCyan#7ACAD5
  • terminal.ansiBrightGreen#83AF85
  • terminal.ansiBrightMagenta#FFB8D9
  • terminal.ansiBrightRed#FF8AC8
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#E0BD6C
  • terminal.ansiCyan#1A7884
  • terminal.ansiGreen#3F6841
  • terminal.ansiMagenta#DC548F
  • terminal.ansiRed#C01C65
  • terminal.ansiWhite#EEEEEE
  • terminal.ansiYellow#9A6800
  • terminal.background#FEF9FB
  • terminal.foreground#2A1F24
  • terminal.selectionBackground#FF9CC780
  • titleBar.activeBackground#FFDCE9
  • titleBar.activeForeground#C01C65
  • titleBar.inactiveBackground#F9EDF2
  • titleBar.inactiveForeground#C01C65A0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#528454italic
string, punctuation.definition.string#3F6841
keyword, storage.type, storage.modifier#B01A67
entity.name.function, support.function#2752B3
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution#9A6800
variable, entity.name.variable#2A1F24
variable.other.constant, support.constant#B01A67
constant.numeric#B01A67
punctuation#555555
meta.brace.square, punctuation.definition.bracket#1A7884
meta.brace.curly, punctuation.definition.block#9A6800
meta.brace.round, punctuation.definition.parameters, punctuation.definition.group#B01A67
entity.name.tag, punctuation.definition.tag#B01A67
entity.other.attribute-name#9A6800
markup.heading#B01A67bold
markup.bold#2A1F24bold
markup.italic#2A1F24italic
markup.underline.link#2752B3
string.regexp#1A7884
constant.character.escape#1A7884
support.type.property-name.json#B01A67
string.quoted.double.json#3F6841
support.type.property-name.css#B01A67
support.constant.property-value.css#3F6841
entity.name.tag.css, entity.other.attribute-name.class.css#B01A67
entity.name.tag.html#B01A67
entity.other.attribute-name.html#9A6800
variable.other.readwrite.js, variable.other.object.js#2A1F24
support.type.primitive.ts, support.type.builtin.ts#9A6800
variable.parameter.function.language.python#9A6800
meta.function-call.python#2752B3
markup.underline.link.markdown#2752B3
markup.heading.markdown#B01A67
markup.bold.markdown#B01A67bold
markup.italic.markdown#B01A67italic
markup.inline.raw.markdown#3F6841