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#000000
  • activityBar.background#000000
  • activityBar.border#000000
  • activityBar.foreground#FF2E63
  • activityBar.inactiveForeground#737373
  • activityBarBadge.background#FF2E63
  • activityBarBadge.foreground#000000
  • badge.background#FF2E63
  • badge.foreground#000000
  • breadcrumb.activeSelectionForeground#FF2E63
  • breadcrumb.background#000000
  • breadcrumb.focusForeground#E5E5E5
  • breadcrumb.foreground#737373
  • breadcrumbPicker.background#000000
  • button.background#FF2E63
  • button.foreground#000000
  • button.hoverBackground#b8d400
  • button.secondaryBackground#000000
  • button.secondaryForeground#E5E5E5
  • button.secondaryHoverBackground#000000
  • disabledForeground#262626
  • dropdown.background#0A0A0A
  • dropdown.border#000000
  • editor.background#000000
  • editor.findMatchBackground#00D9FF60
  • editor.findMatchHighlightBackground#00D9FF30
  • editor.foreground#E5E5E5
  • editor.hoverHighlightBackground#17171700
  • editor.inactiveSelectionBackground#fff70015
  • editor.lineHighlightBackground#0A0A0A
  • editor.selectionBackground#171717
  • editor.wordHighlightBackground#FF6B9D30
  • editor.wordHighlightStrongBackground#FF6B9D50
  • editorBracketMatch.background#ff00006d
  • editorBracketMatch.border#FF0000
  • editorCursor.foreground#FF2E63
  • editorGroup.border#000000
  • editorGroupHeader.tabsBackground#000000
  • editorGutter.addedBackground#00FF87
  • editorGutter.background#000000
  • editorGutter.deletedBackground#FF4757
  • editorGutter.modifiedBackground#00D9FF
  • editorHoverWidget.background#0A0A0A
  • editorHoverWidget.border#FF2E63
  • editorIndentGuide.activeBackground1#171717
  • editorIndentGuide.activeBackground2#0A0A0A
  • editorIndentGuide.activeBackground3#0A0A0A
  • editorIndentGuide.activeBackground4#0A0A0A
  • editorIndentGuide.activeBackground5#0A0A0A
  • editorIndentGuide.activeBackground6#0A0A0A
  • editorIndentGuide.background1#000000
  • editorLineNumber.activeForeground#FF2E63
  • editorLineNumber.foreground#171717
  • editorOverviewRuler.background#000000
  • editorOverviewRuler.border#000000
  • editorRuler.foreground#000000
  • editorSuggestWidget.background#0A0A0A
  • editorSuggestWidget.border#FF2E63
  • editorWhitespace.foreground#484F58
  • editorWidget.background#0A0A0A
  • editorWidget.border#000000
  • editorWidget.foreground#737373
  • editorWidget.resizeBorder#FF2E63
  • extensionButton.prominentBackground#FF2E63
  • extensionButton.prominentForeground#000000
  • extensionButton.prominentHoverBackground#b8d400
  • focusBorder#FF2E63
  • gitDecoration.conflictingResourceForeground#FFFA65
  • gitDecoration.deletedResourceForeground#FF4757
  • gitDecoration.ignoredResourceForeground#7D8590
  • gitDecoration.modifiedResourceForeground#00D9FF
  • gitDecoration.untrackedResourceForeground#00FF87
  • input.background#000000
  • input.border#171717
  • input.foreground#E5E5E5
  • input.placeholderForeground#737373
  • inputOption.activeBackground#FF2E63
  • inputOption.activeBorder#FF2E63
  • inputOption.activeForeground#000000
  • inputValidation.errorBackground#FF4757
  • inputValidation.errorBorder#FF4757
  • list.activeSelectionBackground#0A0A0A
  • list.focusBackground#0A0A0A
  • list.focusForeground#E5E5E5
  • list.hoverBackground#000000
  • list.hoverForeground#FF2E63
  • list.inactiveFocusOutline#FF2E63
  • list.inactiveSelectionBackground#0A0A0A
  • list.inactiveSelectionForeground#E5E5E5
  • menu.background#0A0A0A
  • menu.border#0A0A0A
  • menu.foreground#737373
  • menu.selectionBackground#000000
  • menu.selectionForeground#FF2E63
  • menu.separatorBackground#000000
  • menubar.selectionBackground#0A0A0A
  • menubar.selectionForeground#FF2E63
  • merge.currentContentBackground#00FF8720
  • merge.currentHeaderBackground#00FF8740
  • merge.incomingContentBackground#00D9FF20
  • merge.incomingHeaderBackground#00D9FF40
  • notificationCenter.border#0A0A0A
  • notificationCenterHeader.background#000000
  • notifications.background#0A0A0A
  • notifications.border#0A0A0A
  • notifications.foreground#E5E5E5
  • notificationsInfoIcon.foreground#FF2E63
  • panel.background#000000
  • panel.border#000000
  • panelTitle.activeBorder#000000
  • panelTitle.activeForeground#FF2E63
  • panelTitle.inactiveForeground#737373
  • peekView.border#FF2E63
  • peekViewEditor.background#000000
  • peekViewResult.background#000000
  • peekViewTitle.background#000000
  • pickerGroup.border#000000
  • pickerGroup.foreground#E5E5E5
  • progressBar.background#FF2E63
  • quickInput.background#0A0A0A
  • quickInput.foreground#737373
  • quickInputList.focusBackground#FF2E63
  • quickInputList.focusForeground#000000
  • quickInputTitle.background#0A0A0A
  • scrollbar.shadow#0a0a0a00
  • scrollbarSlider.activeBackground#FF2E63
  • scrollbarSlider.background#0A0A0A
  • scrollbarSlider.hoverBackground#171717
  • searchEditor.findMatchBackground#00D9FF60
  • searchEditor.findMatchBorder#00D9FF
  • searchEditor.textInputBorder#FF2E63
  • selection.background#262626
  • sideBar.background#000000
  • sideBar.border#000000
  • sideBar.foreground#737373
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#000000
  • sideBarSectionHeader.foreground#E5E5E5
  • sideBarTitle.border#000000
  • sideBarTitle.foreground#FF2E63
  • statusBar.background#000000
  • statusBar.border#000000
  • statusBar.debuggingBackground#ff0015ab
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.focusBorder#000000
  • statusBar.foreground#737373
  • statusBar.noFolderBackground#000000
  • statusBarItem.activeBackground#0A0A0A
  • statusBarItem.hoverBackground#000000
  • tab.activeBackground#000000
  • tab.activeBorder#000000
  • tab.activeForeground#FF2E63
  • tab.border#000000
  • tab.hoverBackground#000000
  • tab.hoverForeground#E5E5E5
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#737373
  • tab.unfocusedActiveBorder#0A0A0A
  • terminal.ansiBlack#484F58
  • terminal.ansiBlue#00D9FF
  • terminal.ansiBrightBlack#7D8590
  • terminal.ansiBrightBlue#40E0FF
  • terminal.ansiBrightCyan#80FFE6
  • terminal.ansiBrightGreen#5EFFA3
  • terminal.ansiBrightMagenta#FF8FC7
  • terminal.ansiBrightRed#FF6B6B
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFFF80
  • terminal.ansiCyan#00FFCC
  • terminal.ansiGreen#00FF87
  • terminal.ansiMagenta#FF6B9D
  • terminal.ansiRed#FF4757
  • terminal.ansiWhite#E5E5E5
  • terminal.ansiYellow#FFFA65
  • terminal.background#000000
  • terminal.foreground#E5E5E5
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#E5E5E5
  • titleBar.border#000000
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#7D8590

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#262626italic
keyword, storage.type, storage.modifier#FF4757bold
string, string.quoted, string.template#00FF87—
constant.numeric, constant.language, constant.character#FFFA65—
entity.name.function, meta.function-call, support.function#00D9FF—
entity.name.class, entity.name.type, support.type, support.class#FF6B9Dbold
variable, meta.definition.variable#E5E5E5—
variable.parameter, meta.parameters#C7A3FFitalic
variable.object.property, meta.object-literal.key#FFB347—
keyword.operator, punctuation#00FF87—
entity.name.tag, punctuation.definition.tag#FF4757—
entity.other.attribute-name#00D9FF—
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF6B9D—
support.type.property-name.css#00FFCC—
support.type.property-name.json#FF6B9D—
support.type.property-name.json meta.structure.dictionary.json#00D9FF—
support.type.property-name.json meta.structure.dictionary.json meta.structure.dictionary.json#00FFCC—
markup.heading.1.markdown, entity.name.section.markdown#FF2E63bold
markup.bold, markup.bold.markdown#FF2E63bold
markup.italic, markup.italic.markdown#01ffd5italic
markup.bold markup.italic, markup.italic markup.bold#FF6B9Dbold italic
markup.strikethrough#7D8590strikethrough
markup.underline.link, markup.underline.link.markdown#00D9FFunderline
string.other.link.title.markdown, string.other.link.description.markdown#B57EDC—
constant.other.reference.link.markdown#00FFCC—
markup.underline.link.autolink.markdown#00D9FF—
punctuation.definition.list.begin.markdown#00FF87bold
markup.list.numbered.markdown#E5E5E5—
markup.list.unnumbered.markdown#E5E5E5—
markup.quote, markup.quote.markdown#737373italic bold
punctuation.definition.quote.begin.markdown#FF2E63bold
markup.table#E5E5E5—
meta.separator.markdown#404040bold
markup.frontmatter#7D8590—
markup.frontmatter.yaml#C7A3FF—
punctuation.definition.task.markdown#00FF87—
markup.task.complete.markdown#00FF87—
markup.task.incomplete.markdown#FF4757—
punctuation.definition.markdown#404040bold
punctuation.definition.bold.markdown#00FF87bold
punctuation.definition.italic.markdown#00FF87italic
punctuation.definition.heading.markdown#404040bold
meta.tag.inline.any.html, meta.tag.block.any.html#FF4757—
entity.other.attribute-name.html#00D9FF—
markup.inline.raw#00FF87—
variable.language.special.self.python#FF4757italic
entity.name.function.decorator.python#FFFA65—
variable.language.this#FF4757italic
keyword.control.import, keyword.control.export, keyword.control.from#FF4757—
entity.name.type.ts, entity.name.type.tsx, support.type.primitive#FF6B9D—