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.activeBackground#2C3539
  • activityBar.activeBorder#00BFFF
  • activityBar.background#080a0c
  • activityBar.border#36454F
  • activityBar.foreground#4682B4
  • activityBar.inactiveForeground#6a6a6a
  • activityBarBadge.background#1E90FF
  • activityBarBadge.foreground#ffffff
  • badge.background#1E90FF
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#1E90FF
  • breadcrumb.focusForeground#00BFFF
  • breadcrumb.foreground#8a8a8a
  • button.background#1E90FF
  • button.foreground#ffffff
  • button.hoverBackground#00BFFF
  • button.secondaryBackground#3a3a3a
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#4a4a4a
  • debugExceptionWidget.background#3a2020
  • debugExceptionWidget.border#DC143C
  • debugToolBar.background#2C3539
  • debugToolBar.border#00BFFF
  • diffEditor.border#36454F
  • diffEditor.insertedTextBackground#00BFFF20
  • diffEditor.removedTextBackground#DC143C20
  • dropdown.background#2C3539
  • dropdown.border#00BFFF
  • dropdown.foreground#ffffff
  • editor.background#0f1214
  • editor.findMatchBackground#87CEEB80
  • editor.findMatchHighlightBackground#87CEEB50
  • editor.foreground#C0C0C0
  • editor.inactiveSelectionBackground#87CEEB30
  • editor.lineHighlightBackground#1a1f22
  • editor.selectionBackground#4682B460
  • editor.selectionHighlightBackground#B0C4DE40
  • editor.wordHighlightBackground#A9A9A930
  • editor.wordHighlightStrongBackground#A9A9A950
  • editorBracketMatch.background#00BFFF50
  • editorBracketMatch.border#1E90FF
  • editorCursor.foreground#87CEEB
  • editorError.background#DC143C80
  • editorError.border#DC143C
  • editorError.foreground#DC143C
  • editorGroupHeader.tabsBackground#080a0c
  • editorGroupHeader.tabsBorder#36454F
  • editorHint.foreground#C0C0C0
  • editorIndentGuide.activeBackground1#00BFFF
  • editorIndentGuide.background1#3a3a3a
  • editorInfo.foreground#A8A8A8
  • editorLineNumber.activeForeground#1E90FF
  • editorLineNumber.foreground#6a6a6a
  • editorSuggestWidget.background#2C3539
  • editorSuggestWidget.border#00BFFF
  • editorSuggestWidget.foreground#E0E0E0
  • editorSuggestWidget.highlightForeground#1E90FF
  • editorSuggestWidget.selectedBackground#00BFFF60
  • editorWarning.foreground#00BFFF
  • editorWhitespace.foreground#3a3a3a
  • editorWidget.background#2C3539
  • editorWidget.border#00BFFF
  • editorWidget.foreground#E0E0E0
  • focusBorder#00BFFF
  • gitDecoration.conflictingResourceForeground#00BFFF
  • gitDecoration.deletedResourceForeground#DC143C
  • gitDecoration.ignoredResourceForeground#6a6a6a
  • gitDecoration.modifiedResourceForeground#1E90FF
  • gitDecoration.untrackedResourceForeground#A8A8A8
  • input.background#2C3539
  • input.border#00BFFF
  • input.foreground#ffffff
  • input.placeholderForeground#6a6a6a
  • inputOption.activeBorder#1E90FF
  • inputValidation.errorBackground#3a2020
  • inputValidation.errorBorder#DC143C
  • inputValidation.warningBackground#202a3a
  • inputValidation.warningBorder#00BFFF
  • list.activeSelectionBackground#00BFFF80
  • list.activeSelectionForeground#ffffff
  • list.errorForeground#ff8888
  • list.focusBackground#00BFFF80
  • list.focusForeground#ffffff
  • list.highlightForeground#1E90FF
  • list.hoverBackground#2C3539
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#3a3a3a
  • list.inactiveSelectionForeground#ffffff
  • list.warningForeground#00BFFF
  • merge.border#1E90FF
  • merge.currentContentBackground#00BFFF30
  • merge.currentHeaderBackground#00BFFF70
  • merge.incomingContentBackground#DC143C30
  • merge.incomingHeaderBackground#DC143C70
  • minimap.errorHighlight#DC143C
  • minimap.findMatchHighlight#00BFFF80
  • minimap.selectionHighlight#1E90FF80
  • minimap.warningHighlight#00BFFF
  • minimapGutter.addedBackground#1E90FF
  • minimapGutter.deletedBackground#DC143C
  • minimapGutter.modifiedBackground#00BFFF
  • notificationCenter.border#36454F
  • notificationCenterHeader.background#2C3539
  • notificationLink.foreground#1E90FF
  • notifications.background#2C3539
  • notifications.border#00BFFF
  • notifications.foreground#ffffff
  • panel.background#1C1C1C
  • panel.border#36454F
  • panelTitle.activeBorder#00BFFF
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#8a8a8a
  • peekView.border#00BFFF
  • peekViewEditor.background#2C3539
  • peekViewEditor.matchHighlightBackground#00BFFF50
  • peekViewResult.background#1C1C1C
  • peekViewResult.matchHighlightBackground#00BFFF50
  • peekViewResult.selectionBackground#1E90FF60
  • peekViewTitle.background#2C3539
  • peekViewTitleDescription.foreground#8a8a8a
  • peekViewTitleLabel.foreground#1E90FF
  • progressBar.background#00BFFF
  • scrollbarSlider.activeBackground#00BFFFA0
  • scrollbarSlider.background#36454F60
  • scrollbarSlider.hoverBackground#36454F80
  • sideBar.background#0d1012
  • sideBar.border#2F4F4F
  • sideBar.foreground#A8A8A8
  • sideBarSectionHeader.background#2C3539
  • sideBarSectionHeader.border#36454F
  • sideBarSectionHeader.foreground#00BFFF
  • sideBarTitle.foreground#1E90FF
  • statusBar.background#708090
  • statusBar.border#36454F
  • statusBar.debuggingBackground#87CEEB
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#F0F8FF
  • statusBar.noFolderBackground#2F4F4F
  • statusBarItem.errorBackground#DC143C
  • statusBarItem.errorForeground#ffffff
  • statusBarItem.prominentBackground#87CEEB
  • statusBarItem.prominentHoverBackground#B0C4DE
  • statusBarItem.warningBackground#00BFFF
  • statusBarItem.warningForeground#000000
  • tab.activeBackground#2C3539
  • tab.activeBorder#0f0f0f
  • tab.activeBorderTop#00BFFF
  • tab.activeForeground#ffffff
  • tab.border#1a1a1a
  • tab.hoverBackground#2C3539
  • tab.hoverBorder#1E90FF
  • tab.hoverForeground#ffffff
  • tab.inactiveBackground#1C1C1C
  • tab.inactiveForeground#8a8a8a
  • terminal.ansiBlack#1a1a1a
  • terminal.ansiBlue#00BFFF
  • terminal.ansiBrightBlack#4a4a4a
  • terminal.ansiBrightBlue#40C8FF
  • terminal.ansiBrightCyan#50B0FF
  • terminal.ansiBrightGreen#C8C8C8
  • terminal.ansiBrightMagenta#6B20B2
  • terminal.ansiBrightRed#ff6666
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#E8E8E8
  • terminal.ansiCyan#1E90FF
  • terminal.ansiGreen#A8A8A8
  • terminal.ansiMagenta#4B0082
  • terminal.ansiRed#DC143C
  • terminal.ansiWhite#E0E0E0
  • terminal.ansiYellow#C0C0C0
  • terminal.background#1C1C1C
  • terminal.foreground#E0E0E0
  • terminalCursor.foreground#00BFFF
  • titleBar.activeBackground#080a0c
  • titleBar.activeForeground#A8A8A8
  • titleBar.border#36454F
  • titleBar.inactiveBackground#050607
  • titleBar.inactiveForeground#6a6a6a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6a6a6aitalic
keyword, storage.type, storage.modifier#E0E0E0bold
keyword.control, keyword.operator#C0C0C0bold
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#A8A8A8
string, string.quoted#D2B48C
string.template, string.quoted.template#DEB887
constant.character.escape#00BFFFbold
string.regexp#1E90FF
constant.numeric, constant.language#E8E8E8
constant.language.boolean#00BFFFbold
variable, variable.other#DC143Cbold
variable.parameter#ff6666italic
variable.other.property, support.variable.property#C0C0C0
entity.name.function, support.function#00BFFFbold
meta.function-call#40C8FF
entity.name.type, entity.name.class, support.class#C0C0C0
entity.other.inherited-class#A8A8A8italic
entity.name.tag#1E90FFbold
entity.other.attribute-name#00BFFFitalic
entity.name.tag.css, entity.other.attribute-name.class.css#1E90FF
support.type.property-name.css#A8A8A8
support.constant.property-value.css#00BFFF
support.type, support.class#B8B8B8
support.constant#E8E8E8
support.type.property-name.json#1E90FF
keyword.operator#00BFFF
punctuation#a8a8a8
punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.array#8a8a8a
meta.brace, punctuation.section#C0C0C0
invalid#ffffff
invalid.deprecated#6a6a6astrikethrough
markup.heading#1E90FFbold
markup.bold#00BFFFbold
markup.italic#A8A8A8italic
markup.inline.raw#D2B48C
markup.underline.link#00BFFFunderline
markup.list#C0C0C0
markup.inserted#00BFFF
markup.deleted#DC143C
markup.changed#1E90FF
variable.language.this#DC143Citalic
entity.name.type.ts, entity.name.type.tsx#A8A8A8
meta.decorator, punctuation.decorator#1E90FFbold
variable.language.special.self.python#DC143Citalic
entity.name.function.decorator.python#00BFFF
keyword.control.conditional, keyword.control.loop#C8C8C8bold
entity.name.exception, support.class.exception#DC143Cbold
storage.type.annotation, punctuation.definition.annotation#A8A8A8italic
entity.name.namespace#1E90FF
entity.name.tag#00BFFF
Naruto Shinobi Theme by Kushal Raj G S - VS Code Theme