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#202426
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#ffffff66
  • activityBarBadge.background#0e9292
  • activityBarBadge.foreground#ffffff
  • badge.background#882034
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#202426
  • breadcrumb.focusForeground#e0e0e0
  • breadcrumb.foreground#cccccccc
  • button.background#128490
  • button.foreground#ffffff
  • button.hoverBackground#00647b
  • button.secondaryBackground#434c51
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#384045
  • checkbox.background#202426
  • checkbox.border#00000000
  • checkbox.foreground#d2dde2
  • debugExceptionWidget.background#202426
  • debugExceptionWidget.border#365966
  • debugToolBar.background#202426
  • debugToolBar.border#365966
  • diffEditor.border#444444
  • diffEditor.insertedTextBackground#58907833
  • diffEditor.removedTextBackground#a5153033
  • dropdown.background#202426
  • dropdown.border#00000000
  • dropdown.foreground#d2dde2
  • editor.background#202426
  • editor.findMatchBackground#27414d
  • editor.findMatchBorder#50696f
  • editor.findMatchHighlightBackground#274b5c
  • editor.findMatchHighlightBorder#ffffff00
  • editor.findRangeHighlightBackground#3a3d4166
  • editor.findRangeHighlightBorder#ffffff00
  • editor.foldBackground#266c7840
  • editor.foreground#d4d4d4
  • editor.hoverHighlightBackground#264f7840
  • editor.inactiveSelectionBackground#ffffff10
  • editor.lineHighlightBackground#0000001c
  • editor.lineHighlightBorder#13151730
  • editor.rangeHighlightBackground#ffffff0b
  • editor.rangeHighlightBorder#ffffff00
  • editor.selectionBackground#244352
  • editor.selectionHighlightBackground#add6ff26
  • editor.selectionHighlightBorder#495e65
  • editor.wordHighlightBackground#575757b8
  • editor.wordHighlightStrongBackground#25464db8
  • editorBracketMatch.background#9beadf16
  • editorBracketMatch.border#888888
  • editorCodeLens.foreground#999999
  • editorCursor.background#000000
  • editorCursor.foreground#aeafad
  • editorError.background#B73A3400
  • editorError.border#ffffff00
  • editorError.foreground#f47171
  • editorGroup.border#b4eef044
  • editorGroup.emptyBackground#232629
  • editorGroupHeader.tabsBackground#2c2f32
  • editorGutter.addedBackground#57c041
  • editorGutter.background#202426
  • editorGutter.commentRangeForeground#b8cad3
  • editorGutter.deletedBackground#e0343c
  • editorGutter.foldingControlForeground#b8cad3
  • editorGutter.modifiedBackground#2399ba
  • editorHoverWidget.background#202426
  • editorHoverWidget.border#d2dde23e
  • editorHoverWidget.foreground#d2dde2
  • editorIndentGuide.activeBackground#c1e6ee3e
  • editorIndentGuide.background#c1e6ee1c
  • editorInfo.background#4490BF00
  • editorInfo.border#4490BF00
  • editorInfo.foreground#75beff
  • editorLineNumber.activeForeground#c6c6c6
  • editorLineNumber.foreground#858585
  • editorLink.activeForeground#4eb0ce
  • editorMarkerNavigation.background#202426
  • editorMarkerNavigationError.background#a73c3c
  • editorMarkerNavigationInfo.background#09927f
  • editorMarkerNavigationWarning.background#bc8023
  • editorOverviewRuler.background#25252500
  • editorOverviewRuler.border#7f7f7f4d
  • editorRuler.foreground#c1e6ee16
  • editorSuggestWidget.background#202426
  • editorSuggestWidget.border#d2dde226
  • editorSuggestWidget.foreground#c6d2d7
  • editorSuggestWidget.highlightForeground#42b8b8
  • editorSuggestWidget.selectedBackground#00647b
  • editorWarning.background#A9904000
  • editorWarning.border#ffffff00
  • editorWarning.foreground#ffb542
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#202426
  • editorWidget.foreground#d2dde2
  • editorWidget.resizeBorder#3659669d
  • focusBorder#1c8a8a
  • foreground#d2dde2
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#8c8c8c
  • gitDecoration.modifiedResourceForeground#e2c08d
  • gitDecoration.stageDeletedResourceForeground#c74e39
  • gitDecoration.stageModifiedResourceForeground#e2c08d
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#73c991
  • icon.foreground#d2dde2
  • input.background#202426
  • input.border#00000000
  • input.foreground#d2dde2
  • input.placeholderForeground#d2dde281
  • inputOption.activeBackground#11a3a389
  • inputOption.activeBorder#007acc00
  • inputOption.activeForeground#ffffff
  • list.activeSelectionBackground#00647b
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#7b989f1e
  • list.focusBackground#00647b
  • list.focusForeground#d2dde2
  • list.highlightForeground#54afc4
  • list.hoverBackground#0000002e
  • list.hoverForeground#d2dde2
  • list.inactiveSelectionBackground#7b989f34
  • list.inactiveSelectionForeground#cccccc
  • listFilterWidget.background#a54444
  • listFilterWidget.noMatchesOutline#c48a92
  • listFilterWidget.outline#00000000
  • menu.background#262a2c
  • menu.border#ffffff16
  • menu.foreground#d2dde2
  • menu.selectionBackground#00647b
  • menu.selectionBorder#00000000
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#ffffff2a
  • menubar.selectionBackground#ffffff1a
  • menubar.selectionForeground#ffffff
  • merge.commonContentBackground#282828
  • merge.commonHeaderBackground#383838
  • merge.currentContentBackground#27403B
  • merge.currentHeaderBackground#367366
  • merge.incomingContentBackground#28384B
  • merge.incomingHeaderBackground#395F8F
  • minimap.background#232629
  • minimap.errorHighlight#f47171
  • minimap.findMatchHighlight#27414d
  • minimap.selectionHighlight#0000003a
  • minimap.warningHighlight#ffb542
  • minimapGutter.addedBackground#57c041
  • minimapGutter.deletedBackground#e0343c
  • minimapGutter.modifiedBackground#2399ba
  • notificationCenter.border#d2dde236
  • notificationCenterHeader.background#202426
  • notificationCenterHeader.foreground#e7f0f0
  • notifications.background#202426
  • notifications.border#d2dde226
  • notifications.foreground#d2dde2
  • notificationsErrorIcon.foreground#f48771
  • notificationsInfoIcon.foreground#75beff
  • notificationsWarningIcon.foreground#cca700
  • notificationToast.border#d2dde236
  • panel.background#202426
  • panel.border#424a4d
  • panelSection.border#424a4d54
  • panelTitle.activeBorder#e02a55
  • panelTitle.activeForeground#e7e7e7
  • panelTitle.inactiveForeground#e7e7e799
  • peekView.border#27587562
  • peekViewEditor.background#162024
  • peekViewEditor.matchHighlightBackground#ff48005a
  • peekViewEditor.matchHighlightBorder#e8ceac4c
  • peekViewEditorGutter.background#10181b
  • peekViewResult.background#10181b
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#10181b
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#00000020
  • pickerGroup.foreground#3cc2c2
  • progressBar.background#11a3a3
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#bfbfbf66
  • scrollbarSlider.background#79797966
  • scrollbarSlider.hoverBackground#646464b3
  • selection.background#00647b
  • settings.focusedRowBackground#ffffff07
  • settings.headerForeground#d2dde2
  • sideBar.background#232729
  • sideBar.border#ff000000
  • sideBar.dropBackground#7b989f1e
  • sideBar.foreground#d2dde2
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.border#c4e9ff07
  • sideBarSectionHeader.foreground#d2dde2
  • sideBarTitle.foreground#d2dde2
  • statusBar.background#1e2224
  • statusBar.debuggingBackground#9b1e35
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#472471
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.activeBackground#FFFFFF25
  • statusBarItem.hoverBackground#ffffff1f
  • statusBarItem.remoteBackground#0c7154
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#202426
  • tab.activeBorder#00000000
  • tab.activeBorderTop#1c8a8a
  • tab.activeForeground#ffffff
  • tab.border#00000036
  • tab.hoverBackground#afd8ec14
  • tab.inactiveBackground#2c2f32
  • tab.inactiveForeground#ffffff80
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#2472c8
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#3b8eea
  • terminal.ansiBrightCyan#29b8db
  • terminal.ansiBrightGreen#23d18b
  • terminal.ansiBrightMagenta#d670d6
  • terminal.ansiBrightRed#f14c4c
  • terminal.ansiBrightWhite#e5e5e5
  • terminal.ansiBrightYellow#f5f543
  • terminal.ansiCyan#11a8cd
  • terminal.ansiGreen#0dbc79
  • terminal.ansiMagenta#bc3fbc
  • terminal.ansiRed#cd3131
  • terminal.ansiWhite#e5e5e5
  • terminal.ansiYellow#e5e510
  • terminal.border#424a4d54
  • terminal.foreground#cccccc
  • terminal.selectionBackground#85b5c01a
  • terminalCursor.background#0889a7
  • terminalCursor.foreground#ffffff
  • textLink.foreground#32a7c2
  • titleBar.activeBackground#202426
  • titleBar.activeForeground#d2dde2
  • titleBar.border#00000000
  • titleBar.inactiveBackground#2e313299
  • titleBar.inactiveForeground#d8dde099
  • tree.indentGuidesStroke#5ed1d14e
  • walkThrough.embeddedEditorBackground#00000050
  • widget.shadow#0000005c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#6a737d
variable.other.constant, variable.language#6e7ef5
constant, entity.name.constant#5cc4ba
entity, entity.name#b286f0
variable.parameter.function#a4bceb
entity.name.tag#4ecf97
keyword#f76d7c
storage, storage.type#f76d7c
storage.modifier.package, storage.modifier.import, storage.type.java#a4bceb
string, punctuation.definition.string, string punctuation.section.embedded source#e6c57e
support#51a4e8
meta.property-name#51a4e8
variable#ffa375
variable.other#a4bceb
invalid.broken#ed939ditalic
invalid.deprecated#ed939ditalic
invalid.illegal#ed939ditalic
invalid.unimplemented#ed939ditalic
carriage-return#24292eitalic underline
message.error#ed939d
string source#a4bceb
string variable#51a4e8
source.regexp, string.regexp#dbedff
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#dbedff
string.regexp constant.character.escape#6edb8dbold
support.constant#51a4e8
support.variable#51a4e8
meta.module-reference#51a4e8
punctuation.definition.list.begin.markdown#ffa375
markup.heading, markup.heading entity.name#51a4e8bold
markup.quote#6edb8d
markup.italic#a4bcebitalic
markup.bold#a4bcebbold
markup.raw#51a4e8
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#edabb2
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#93ccb0
markup.changed, punctuation.definition.changed#ebd598
markup.ignored, markup.untracked#2f363d
meta.diff.range#b286f0bold
meta.diff.header#51a4e8
meta.separator#51a4e8bold
meta.output#51a4e8
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#d1d5da
brackethighlighter.unmatched#ed939d
constant.other.reference.link, string.other.link#dbedffunderline
github-revamp by Avetis - VS Code Theme