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#57F287
  • activityBar.inactiveForeground#737373
  • activityBarBadge.background#57F287
  • activityBarBadge.foreground#000000
  • badge.background#57F287
  • badge.foreground#000000
  • breadcrumb.activeSelectionForeground#57F287
  • breadcrumb.background#000000
  • breadcrumb.focusForeground#E5E5E5
  • breadcrumb.foreground#737373
  • breadcrumbPicker.background#000000
  • button.background#57F287
  • 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#57F287
  • editorGroup.border#000000
  • editorGroupHeader.tabsBackground#000000
  • editorGutter.addedBackground#00FF87
  • editorGutter.background#000000
  • editorGutter.deletedBackground#FF4757
  • editorGutter.modifiedBackground#00D9FF
  • editorHoverWidget.background#0A0A0A
  • editorHoverWidget.border#57F287
  • editorIndentGuide.activeBackground1#171717
  • editorIndentGuide.activeBackground2#0A0A0A
  • editorIndentGuide.activeBackground3#0A0A0A
  • editorIndentGuide.activeBackground4#0A0A0A
  • editorIndentGuide.activeBackground5#0A0A0A
  • editorIndentGuide.activeBackground6#0A0A0A
  • editorIndentGuide.background1#000000
  • editorLineNumber.activeForeground#57F287
  • editorLineNumber.foreground#171717
  • editorOverviewRuler.background#000000
  • editorOverviewRuler.border#000000
  • editorRuler.foreground#000000
  • editorSuggestWidget.background#0A0A0A
  • editorSuggestWidget.border#57F287
  • editorWhitespace.foreground#484F58
  • editorWidget.background#0A0A0A
  • editorWidget.border#000000
  • editorWidget.foreground#737373
  • editorWidget.resizeBorder#57F287
  • extensionButton.prominentBackground#57F287
  • extensionButton.prominentForeground#000000
  • extensionButton.prominentHoverBackground#b8d400
  • focusBorder#57F287
  • 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#57F287
  • inputOption.activeBorder#57F287
  • inputOption.activeForeground#000000
  • inputValidation.errorBackground#FF4757
  • inputValidation.errorBorder#FF4757
  • list.activeSelectionBackground#0A0A0A
  • list.focusBackground#0A0A0A
  • list.focusForeground#E5E5E5
  • list.hoverBackground#000000
  • list.hoverForeground#57F287
  • list.inactiveFocusOutline#57F287
  • list.inactiveSelectionBackground#0A0A0A
  • list.inactiveSelectionForeground#E5E5E5
  • menu.background#0A0A0A
  • menu.border#0A0A0A
  • menu.foreground#737373
  • menu.selectionBackground#000000
  • menu.selectionForeground#57F287
  • menu.separatorBackground#000000
  • menubar.selectionBackground#0A0A0A
  • menubar.selectionForeground#57F287
  • 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#57F287
  • panel.background#000000
  • panel.border#000000
  • panelTitle.activeBorder#000000
  • panelTitle.activeForeground#57F287
  • panelTitle.inactiveForeground#737373
  • peekView.border#57F287
  • peekViewEditor.background#000000
  • peekViewResult.background#000000
  • peekViewTitle.background#000000
  • pickerGroup.border#000000
  • pickerGroup.foreground#E5E5E5
  • progressBar.background#57F287
  • quickInput.background#0A0A0A
  • quickInput.foreground#737373
  • quickInputList.focusBackground#57F287
  • quickInputList.focusForeground#000000
  • quickInputTitle.background#0A0A0A
  • scrollbar.shadow#0a0a0a00
  • scrollbarSlider.activeBackground#57F287
  • scrollbarSlider.background#0A0A0A
  • scrollbarSlider.hoverBackground#171717
  • searchEditor.findMatchBackground#00D9FF60
  • searchEditor.findMatchBorder#00D9FF
  • searchEditor.textInputBorder#57F287
  • 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#57F287
  • 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#57F287
  • 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#57F287bold
markup.bold, markup.bold.markdown#57F287bold
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#57F287bold
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