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#111827
  • activityBar.background#030712
  • activityBar.border#00000000
  • activityBar.foreground#d1d5db
  • activityBar.inactiveForeground#6b7280
  • activityBarBadge.background#14b8a6
  • activityBarBadge.foreground#f9fafb
  • badge.background#4d4d4d
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#f9fafb
  • breadcrumb.background#030712
  • breadcrumb.focusForeground#f9fafb
  • breadcrumb.foreground#6b7280
  • button.background#0f766e
  • button.foreground#f9fafb
  • button.hoverBackground#0d9488
  • button.secondaryBackground#111827
  • button.secondaryForeground#f9fafb
  • button.secondaryHoverBackground#1f2937
  • checkbox.background#030712
  • checkbox.border#374151
  • checkbox.foreground#cccccc
  • debugExceptionWidget.background#333333
  • debugExceptionWidget.border#474747
  • debugToolBar.background#333333
  • debugToolBar.border#474747
  • diffEditor.border#444444
  • diffEditor.insertedTextBackground#06b6d43f
  • diffEditor.removedTextBackground#f43f5e33
  • dropdown.background#030712
  • dropdown.border#374151
  • dropdown.foreground#cccccc
  • editor.background#000000
  • editor.findMatchBackground#f59e0b3f
  • editor.findMatchBorder#14b8a6
  • editor.findMatchHighlightBackground#14b8a63f
  • editor.findMatchHighlightBorder#ffffff00
  • editor.findRangeHighlightBackground#3a3d4166
  • editor.findRangeHighlightBorder#ffffff00
  • editor.foldBackground#264f784d
  • editor.foreground#d1d5db
  • editor.hoverHighlightBackground#264f7840
  • editor.inactiveSelectionBackground#6b72803f
  • editor.lineHighlightBackground#6b72803f
  • editor.lineHighlightBorder#000000d1
  • editor.rangeHighlightBackground#ffffff0b
  • editor.rangeHighlightBorder#ffffff00
  • editor.selectionBackground#14b8a63f
  • editor.selectionHighlightBackground#6b72803f
  • editor.selectionHighlightBorder#6b7280
  • editor.wordHighlightBackground#575757b8
  • editor.wordHighlightStrongBackground#004972b8
  • editorBracketHighlight.foreground1#d1d5db
  • editorBracketHighlight.foreground2#FACF85
  • editorBracketHighlight.foreground3#88DCC0
  • editorBracketHighlight.foreground4#87D2F4
  • editorBracketHighlight.foreground5#D4AAFB
  • editorBracketHighlight.foreground6#F6A4CC
  • editorBracketHighlight.unexpectedBracket.foreground#ef4444
  • editorBracketMatch.background#1f2937
  • editorBracketMatch.border#00000000
  • editorCodeLens.foreground#6b7280
  • editorCursor.background#000000
  • editorCursor.foreground#aeafad
  • editorError.background#f43f5e3f
  • editorError.border#ffffff00
  • editorError.foreground#f43f5e
  • editorGroup.border#030712
  • editorGroup.emptyBackground#000000
  • editorGroupHeader.tabsBackground#030712
  • editorGutter.addedBackground#06b6d4
  • editorGutter.background#000000
  • editorGutter.commentRangeForeground#374151
  • editorGutter.deletedBackground#f43f5e
  • editorGutter.foldingControlForeground#374151
  • editorGutter.modifiedBackground#f59e0b
  • editorHoverWidget.background#111827
  • editorHoverWidget.border#1f2937
  • editorHoverWidget.foreground#6b7280
  • editorIndentGuide.activeBackground#1f2937
  • editorIndentGuide.background#111827
  • editorInfo.background#4490BF00
  • editorInfo.border#4490BF00
  • editorInfo.foreground#75beff
  • editorLineNumber.activeForeground#6b7280
  • editorLineNumber.foreground#374151
  • editorLink.activeForeground#14b8a6
  • editorMarkerNavigation.background#111827
  • editorMarkerNavigationError.background#f43f5e
  • editorMarkerNavigationInfo.background#75beff
  • editorMarkerNavigationWarning.background#cca700
  • editorOverviewRuler.background#25252500
  • editorOverviewRuler.border#7f7f7f4d
  • editorRuler.foreground#111827
  • editorSuggestWidget.background#111827
  • editorSuggestWidget.border#4b5563
  • editorSuggestWidget.foreground#d1d5db
  • editorSuggestWidget.highlightForeground#14b8a6
  • editorSuggestWidget.selectedBackground#14b8a63f
  • editorWarning.background#eab3083f
  • editorWarning.border#ffffff00
  • editorWarning.foreground#eab308
  • editorWhitespace.foreground#14b8a63f
  • editorWidget.background#111827
  • editorWidget.foreground#d1d5db
  • editorWidget.resizeBorder#5F5F5F
  • focusBorder#1f2937
  • foreground#d1d5db
  • gitDecoration.addedResourceForeground#06b6d4
  • gitDecoration.conflictingResourceForeground#d946ef
  • gitDecoration.deletedResourceForeground#f43f5e
  • gitDecoration.ignoredResourceForeground#6b7280
  • gitDecoration.modifiedResourceForeground#f59e0b
  • gitDecoration.stageDeletedResourceForeground#f43f5e
  • gitDecoration.stageModifiedResourceForeground#e2c08d
  • gitDecoration.submoduleResourceForeground#ec4899
  • gitDecoration.untrackedResourceForeground#14b8a6
  • icon.foreground#d1d5db
  • input.background#030712
  • input.border#374151
  • input.foreground#cccccc
  • input.placeholderForeground#6b7280
  • inputOption.activeBackground#14b8a67f
  • inputOption.activeBorder#007acc00
  • inputOption.activeForeground#ffffff
  • list.activeSelectionBackground#14b8a63f
  • list.activeSelectionForeground#f9fafb
  • list.dropBackground#111827
  • list.focusBackground#10b9813f
  • list.focusForeground#cccccc
  • list.highlightForeground#10b981
  • list.hoverBackground#14b8a61f
  • list.hoverForeground#f9fafb
  • list.inactiveSelectionBackground#1f2937
  • list.inactiveSelectionForeground#d1d5db
  • listFilterWidget.background#6b72803f
  • listFilterWidget.noMatchesOutline#f43f5e
  • listFilterWidget.outline#10b981
  • menu.background#252526
  • menu.border#00000085
  • menu.foreground#cccccc
  • menu.selectionBackground#14b8a67f
  • menu.selectionBorder#00000000
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#bbbbbb
  • menubar.selectionBackground#ffffff1a
  • menubar.selectionForeground#cccccc
  • merge.commonContentBackground#111827
  • merge.commonHeaderBackground#1f2937
  • merge.currentContentBackground#022c22
  • merge.currentHeaderBackground#064e3b
  • merge.incomingContentBackground#172554
  • merge.incomingHeaderBackground#1e3a8a
  • minimap.background#000000
  • minimap.errorHighlight#f48771
  • minimap.findMatchHighlight#f59e0b3f
  • minimap.selectionHighlight#14b8a63f
  • minimap.warningHighlight#cca700
  • minimapGutter.addedBackground#06b6d4
  • minimapGutter.deletedBackground#f43f5e
  • minimapGutter.modifiedBackground#f59e0b
  • notificationCenter.border#1f2937
  • notificationCenterHeader.background#1f2937
  • notificationCenterHeader.foreground#f9fafb
  • notifications.background#111827
  • notifications.border#1f2937
  • notifications.foreground#d1d5db
  • notificationsErrorIcon.foreground#f43f5e
  • notificationsInfoIcon.foreground#14b8a6
  • notificationsWarningIcon.foreground#f59e0b
  • notificationToast.border#1f2937
  • panel.background#000000
  • panel.border#1f2937
  • panelSection.border#80808059
  • panelTitle.activeBorder#e7e7e7
  • panelTitle.activeForeground#e7e7e7
  • panelTitle.inactiveForeground#e7e7e799
  • peekView.border#374151
  • peekViewEditor.background#111827
  • peekViewEditor.matchHighlightBackground#14b8a63f
  • peekViewEditor.matchHighlightBorder#14b8a6
  • peekViewEditorGutter.background#111827
  • peekViewResult.background#252526
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#1e1e1e
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#374151
  • pickerGroup.foreground#14b8a6
  • progressBar.background#14b8a6
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#14b8a67f
  • scrollbarSlider.background#14b8a63f
  • scrollbarSlider.hoverBackground#14b8a67f
  • selection.background#14b8a63f
  • settings.focusedRowBackground#ffffff07
  • settings.headerForeground#d1d5db
  • sideBar.background#030712
  • sideBar.border#00000000
  • sideBar.dropBackground#111827
  • sideBar.foreground#d1d5db
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.border#111827
  • sideBarSectionHeader.foreground#d1d5db
  • sideBarTitle.foreground#f9fafb
  • statusBar.background#030712
  • statusBar.debuggingBackground#134e4a
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#d1d5db
  • statusBar.noFolderBackground#030712
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.activeBackground#FFFFFF25
  • statusBarItem.hoverBackground#ffffff1f
  • statusBarItem.remoteBackground#0f766e
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#111827
  • tab.activeBorder#14b8a6
  • tab.activeBorderTop#00000000
  • tab.activeForeground#f9fafb
  • tab.border#00000000
  • tab.inactiveBackground#00000000
  • tab.inactiveForeground#6b7280
  • terminal.ansiBlack#3f3f46
  • terminal.ansiBlue#2563eb
  • terminal.ansiBrightBlack#71717a
  • terminal.ansiBrightBlue#60a5fa
  • terminal.ansiBrightCyan#22d3ee
  • terminal.ansiBrightGreen#34d399
  • terminal.ansiBrightMagenta#e879f9
  • terminal.ansiBrightRed#fb7185
  • terminal.ansiBrightWhite#f9fafb
  • terminal.ansiBrightYellow#fbbf24
  • terminal.ansiCyan#0891b2
  • terminal.ansiGreen#059669
  • terminal.ansiMagenta#c026d3
  • terminal.ansiRed#cd3131
  • terminal.ansiWhite#d1d5db
  • terminal.ansiYellow#d97706
  • terminal.border#111827
  • terminal.foreground#d1d5db
  • terminal.selectionBackground#14b8a63f
  • terminalCursor.background#6b7280
  • terminalCursor.foreground#ffffff
  • textLink.foreground#14b8a6
  • titleBar.activeBackground#030712
  • titleBar.activeForeground#d1d5db
  • titleBar.border#00000000
  • titleBar.inactiveBackground#3c3c3c99
  • titleBar.inactiveForeground#cccccc99
  • tree.indentGuidesStroke#374151
  • walkThrough.embeddedEditorBackground#00000050
  • widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#8B949E
constant.other.placeholder, constant.character#fb7185
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language, entity#38bdf8
entity.name, meta.export.default, meta.definition.variable#fb923c
variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression#d1d5db
entity.name.function#a78bfa
entity.name.tag, support.class.component#34d399
keyword#fb7185
storage, storage.type#fb7185
storage.modifier.package, storage.modifier.import, storage.type.java#d1d5db
string, string punctuation.section.embedded source#a3e635
support#38bdf8
meta.property-name#38bdf8
variable#fb923c
variable.other#d1d5db
invalid.broken#FFA198italic
invalid.deprecated#FFA198italic
invalid.illegal#FFA198italic
invalid.unimplemented#FFA198italic
carriage-return#F0F6FCitalic underline
message.error#FFA198
string variable#38bdf8
source.regexp, string.regexp#a3e635
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#a3e635
string.regexp constant.character.escape#34d399bold
support.constant#38bdf8
support.variable#38bdf8
support.type.property-name.json#34d399
meta.module-reference#38bdf8
punctuation.definition.list.begin.markdown#fb923c
markup.heading, markup.heading entity.name#38bdf8bold
markup.quote#34d399
markup.italic#d1d5dbitalic
markup.bold#d1d5dbbold
markup.underlineunderline
markup.strikethroughstrikethrough
markup.inline.raw#38bdf8
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#FFA198
punctuation.section.embedded#fb7185
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#34d399
markup.changed, punctuation.definition.changed#fb923c
markup.ignored, markup.untracked#161B22
meta.diff.range#a78bfabold
meta.diff.header#38bdf8
meta.separator#38bdf8bold
meta.output#38bdf8
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#8B949E
brackethighlighter.unmatched#FFA198
constant.other.reference.link, string.other.link#a3e635
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6