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#122738
  • activityBar.border#0d3a58
  • activityBar.foreground#fff
  • activityBarBadge.background#ffc600
  • activityBarBadge.foreground#000
  • badge.background#ffc600
  • badge.foreground#000
  • button.background#0088ff
  • button.foreground#fff
  • button.hoverBackground#ff9d00
  • contrastActiveBorder#ffffff00
  • contrastBorder#ffffff00
  • debugExceptionWidget.background#193549
  • debugExceptionWidget.border#aaa
  • debugToolBar.background#193549
  • descriptionForeground#aaa
  • diffEditor.insertedTextBackground#3ad90033
  • diffEditor.insertedTextBorder#3ad90055
  • diffEditor.removedTextBackground#ee3a4333
  • diffEditor.removedTextBorder#ee3a4355
  • dropdown.background#193549
  • dropdown.border#15232d
  • dropdown.foreground#fff
  • editor.background#193549
  • editor.findMatchBackground#FF720066
  • editor.findMatchHighlightBackground#CAD40F66
  • editor.findRangeHighlightBackground#243E51
  • editor.foreground#fff
  • editor.hoverHighlightBackground#ffc60033
  • editor.inactiveSelectionBackground#003b8b
  • editor.lineHighlightBackground#1F4662
  • editor.lineHighlightBorder#234E6D
  • editor.rangeHighlightBackground#1F4662
  • editor.selectionBackground#0050A4
  • editor.selectionHighlightBackground#0050A480
  • editor.wordHighlightBackground#ffffff21
  • editor.wordHighlightStrongBackground#ffffff21
  • editorBracketMatch.background#0d3a58
  • editorBracketMatch.border#ffc60080
  • editorCodeLens.foreground#aaa
  • editorCursor.foreground#ffc600
  • editorError.border#0d3a58
  • editorError.foreground#A22929
  • editorGroup.border#122738
  • editorGroup.dropBackground#12273899
  • editorGroupHeader.noTabsBackground#193549
  • editorGroupHeader.tabsBackground#193549
  • editorGroupHeader.tabsBorder#15232d
  • editorGutter.addedBackground#3C9F4A
  • editorGutter.background#12273866
  • editorGutter.deletedBackground#A22929
  • editorGutter.modifiedBackground#26506D
  • editorHoverWidget.background#15232d
  • editorHoverWidget.border#0d3a58
  • editorIndentGuide.background#3B5364
  • editorLineNumber.foreground#aaa
  • editorLink.activeForeground#aaa
  • editorMarkerNavigation.background#3B536433
  • editorMarkerNavigationError.background#A22929
  • editorMarkerNavigationWarning.background#ffc600
  • editorOverviewRuler.border#0d3a58
  • editorOverviewRuler.commonContentForeground#ffc60055
  • editorOverviewRuler.currentContentForeground#ee3a4355
  • editorOverviewRuler.incomingContentForeground#3ad90055
  • editorRuler.foreground#1F4662
  • editorSuggestWidget.background#15232d
  • editorSuggestWidget.border#15232d
  • editorSuggestWidget.foreground#aaa
  • editorSuggestWidget.highlightForeground#ffc600
  • editorSuggestWidget.selectedBackground#193549
  • editorWarning.border#ffffff00
  • editorWarning.foreground#ffc600
  • editorWhitespace.foreground#ffffff1a
  • editorWidget.background#15232d
  • editorWidget.border#0d3a58
  • errorForeground#A22929
  • extensionButton.prominentBackground#0088ff
  • extensionButton.prominentForeground#fff
  • extensionButton.prominentHoverBackground#ff9d00
  • focusBorder#0d3a58
  • foreground#aaa
  • gitDecoration.conflictingResourceForeground#FF7200
  • gitDecoration.deletedResourceForeground#ff628c
  • gitDecoration.ignoredResourceForeground#747476
  • gitDecoration.modifiedResourceForeground#ffc600
  • gitDecoration.untrackedResourceForeground#3ad900
  • input.background#193549
  • input.border#0d3a58
  • input.foreground#ffc600
  • input.placeholderForeground#aaa
  • inputOption.activeBorder#8dffff
  • inputValidation.errorBackground#193549
  • inputValidation.errorBorder#ffc600
  • inputValidation.infoBackground#193549
  • inputValidation.infoBorder#0D3A58
  • inputValidation.warningBackground#193549
  • inputValidation.warningBorder#ffc600
  • list.activeSelectionBackground#193549
  • list.activeSelectionForeground#aaa
  • list.dropBackground#0d3a58
  • list.focusBackground#0d3a58
  • list.focusForeground#aaa
  • list.highlightForeground#ffc600
  • list.hoverBackground#193549
  • list.hoverForeground#aaa
  • list.inactiveSelectionBackground#0d3a58
  • list.inactiveSelectionForeground#aaa
  • menu.background#122738
  • merge.border#ffffff00
  • merge.commonContentBackground#c97d0c
  • merge.commonHeaderBackground#c97d0c
  • merge.currentContentBackground#2F7366
  • merge.currentHeaderBackground#2F7366
  • merge.incomingContentBackground#185294
  • merge.incomingHeaderBackground#185294
  • notificationCenter.border#ffc600
  • notificationCenterHeader.background#122738
  • notificationCenterHeader.foreground#aaa
  • notificationLink.foreground#ffc600
  • notifications.background#122738
  • notifications.border#ffc600
  • notifications.foreground#aaa
  • notificationToast.border#ffc600
  • panel.background#122738
  • panel.border#ffc600
  • panelTitle.activeBorder#ffc600
  • panelTitle.activeForeground#ffc600
  • panelTitle.inactiveForeground#aaa
  • peekView.border#ffc600
  • peekViewEditor.background#193549
  • peekViewEditor.matchHighlightBackground#19354900
  • peekViewEditorGutter.background#122738
  • peekViewResult.background#15232d
  • peekViewResult.fileForeground#aaa
  • peekViewResult.lineForeground#fff
  • peekViewResult.matchHighlightBackground#0d3a58
  • peekViewResult.selectionBackground#0d3a58
  • peekViewResult.selectionForeground#fff
  • peekViewTitle.background#15232d
  • peekViewTitleDescription.foreground#aaa
  • peekViewTitleLabel.foreground#ffc600
  • pickerGroup.border#0d3a58
  • pickerGroup.foreground#aaa
  • progressBar.background#ffc600
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#355166cc
  • scrollbarSlider.background#1F466280
  • scrollbarSlider.hoverBackground#406179cc
  • selection.background#027dff
  • sideBar.background#15232d
  • sideBar.border#0d3a58
  • sideBar.foreground#aaa
  • sideBarSectionHeader.background#193549
  • sideBarSectionHeader.foreground#aaaaaa
  • sideBarTitle.foreground#aaaaaa
  • statusBar.background#15232d
  • statusBar.border#0d3a58
  • statusBar.debuggingBackground#15232d
  • statusBar.debuggingBorder#ffc600
  • statusBar.debuggingForeground#ffc600
  • statusBar.foreground#aaa
  • statusBar.noFolderBackground#15232d
  • statusBar.noFolderBorder#0d3a58
  • statusBar.noFolderForeground#aaa
  • statusBarItem.activeBackground#0088ff
  • statusBarItem.hoverBackground#0d3a58
  • statusBarItem.prominentBackground#15232d
  • statusBarItem.prominentHoverBackground#0d3a58
  • tab.activeBackground#122738
  • tab.activeBorder#ffc600
  • tab.activeForeground#fff
  • tab.border#15232D
  • tab.inactiveBackground#193549
  • tab.inactiveForeground#aaa
  • tab.unfocusedActiveForeground#aaa
  • tab.unfocusedInactiveForeground#aaa
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#0088ff
  • terminal.ansiBrightBlack#0050A4
  • terminal.ansiBrightBlue#0088ff
  • terminal.ansiBrightCyan#80fcff
  • terminal.ansiBrightGreen#3ad900
  • terminal.ansiBrightMagenta#fb94ff
  • terminal.ansiBrightRed#ff628c
  • terminal.ansiBrightWhite#193549
  • terminal.ansiBrightYellow#ffc600
  • terminal.ansiCyan#80fcff
  • terminal.ansiGreen#3ad900
  • terminal.ansiMagenta#fb94ff
  • terminal.ansiRed#ff628c
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ffc600
  • terminal.background#122738
  • terminal.foreground#ffffff
  • terminalCursor.background#ffc600
  • terminalCursor.foreground#ffc600
  • textBlockQuote.background#193549
  • textBlockQuote.border#0088ff
  • textCodeBlock.background#193549
  • textLink.activeForeground#0088ff
  • textLink.foreground#0088ff
  • textPreformat.foreground#ffc600
  • textSeparator.foreground#0d3a58
  • titleBar.activeBackground#15232D
  • titleBar.activeForeground#ffffff
  • titleBar.inactiveBackground#193549
  • titleBar.inactiveForeground#ffffff33
  • walkThrough.embeddedEditorBackground#0d3a58
  • welcomePage.buttonBackground#193549
  • welcomePage.buttonHoverBackground#0d3a58
  • widget.shadow#00000026

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#0088ffitalic
constant#ff628c
entity#ffc600
entity.name.functionitalic
invalid#f44542 italic bold underline
invalid.deprecated#f44542 bold italic underline
modifier, this, comment, storage.modifier.js, storage.modifier.ts, storage.modifier.tsx, entity.other.attribute-name.js, entity.other.attribute-name.ts, entity.other.attribute-name.tsx, entity.other.attribute-name.htmlitalic
variable.other.object.js#fb94ffitalic
keyword, storage.type.class#ff9d00
storage.modifier, variable.language.this#fb94ffitalic
keyword, storage.type#00bff9italic
keyword.operator#fb94ffitalic
meta#9effff
punctuation.decorator#f7ecb5italic
meta.brace#e1efff
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx#fff
punctuation#e1efff
punctuation.definition.parameters#ffee80
punctuation.definition.template-expression#ffee80
markup.quoteitalic
storage, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type.js, storage.type.property.js, storage.type.property.ts#ffc600italic
storage.type.function.arrow#ffc600
storage.type.function#ff9d00
string, punctuation.definition.string#a5ff90
string.template, punctuation.definition.string.template#3ad900
support#80ffbb
support.function#ff9d00
support.variable.property.dom#e1efff
variable#e1efff
storage.type.cs#9effff
entity.name.variable.property.cs#9effff
storage.modifier.cs#80ffbb
storage.modifier.cs, keyword.type.cs#fb94ff
entity.name.type.namespace.cs, entity.name.variable.parameter.cs, entity.name.variable.field.cs, entity.name.variable.property.cs#e1efff
storage.type.cs#80ffbb
source.css constant, source.css support.constant, source.stylus constant, source.stylus support.constant#ffee80
entity.name.tag#9EFFFF
source.css entity, source.stylus entity#3ad900
entity.other.attribute-name.id.css#FFB454
source.css string, source.css punctuation.definition.string, source.stylus string, source.stylus punctuation.definition.string#ffee80
source.css support, source.stylus support#a5ff90
source.css variable, source.stylus variable#9effff
text.html.basic entity.name#9effff
text.html.basic entity.other#ffc600italic
meta.toc-list.id.html#A5FF90
punctuation.definition.string.begin, punctuation.definition.string.end#92fc79
meta.tag.metadata.script.html entity.name.tag.html#ffc600
source.ini entity#e1efff
source.ini keyword#ffc600
source.ini punctuation.definition#ffee80
source.ini punctuation.separator#ff9d00
entity.other.inherited-class.js#ccc
source.js storage.type.function#fb94ff
variable.language, entity.name.type.class.js#fb94ff
source.json string, source.json punctuation.definition.string#e1efff
source.json support#ffc600
markup.inline.raw.string.markdown, markup.fenced_code.block.markdown#ffc600italic
fenced_code.block.language, markup.inline.raw.markdown#9effff
markup.bold.markdown#9effffbold
markup.italic.markdown, punctuation.definition.italic.markdown#9effffitalic
entity.name.section.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#ffc600bold
punctuation.definition.heading.markdown#e1efff
fenced_code.block.language, markup.inline.raw.markdown#9effff
markup.underline.link.markdown, markup.underline.link.image.markdown#9effff
string.other.link.title.markdown#a5ff90
string.other.link.title.markdown, string.other.link.description.markdown, string.other.link.description.title.markdown#a5ff90
beginning.punctuation.definition.list.markdown#ffc600
meta.paragraph.markdown#e1efff
markup.quote.markdown meta.paragraph.markdown#9effffitalic
beginning.punctuation.definition.quote.markdown#ffc600
meta.separator.markdown#ffc600
source.php entity#9effff
variable.other.php#ffc600
text.jade entity.other.attribute-name.tagitalic
text.jade entity.name#9effff
text.jade string.interpolated#ffee80
variable.parameter.function.language.special.self.python#fb94ff
source.ts entity.name.type#80ffbb
entity.other.inherited-class.ts, entity.other.inherited-class.tsx#ccc
source.ts keyword#ffc600
meta.arrow.ts punctuation.definition.parameters#ffee80
source.ts punctuation.definition.parameters#e1efff
source.ts storage#9effff
variable.language, entity.name.type.class.ts, entity.name.type.class.tsx#fb94ff