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#0d1f2d33
  • activityBar.background#091827
  • activityBar.border#24aedd33
  • activityBar.foreground#24aedd
  • activityBar.inactiveForeground#3a6482aa
  • activityBarBadge.background#ffc410
  • activityBarBadge.foreground#0d1f2d
  • badge.background#24aedd
  • badge.foreground#0d1f2d
  • breadcrumb.activeSelectionForeground#24aedd
  • breadcrumb.background#091827
  • breadcrumb.focusForeground#c8e6f4
  • breadcrumb.foreground#7fb3cccc
  • button.background#24aedd
  • button.foreground#0d1f2d
  • button.hoverBackground#3bbee8
  • button.secondaryBackground#122435
  • button.secondaryForeground#c8e6f4
  • button.secondaryHoverBackground#1a3550
  • checkbox.background#091827
  • checkbox.border#24aedd44
  • checkbox.foreground#24aedd
  • debugExceptionWidget.background#091827
  • debugExceptionWidget.border#ffc410
  • debugIcon.pauseForeground#24aedd
  • debugIcon.restartForeground#4ec994
  • debugIcon.startForeground#4ec994
  • debugIcon.stopForeground#f07178
  • debugToolBar.background#0d1f2d
  • debugToolBar.border#24aedd
  • diffEditor.border#24aedd
  • diffEditor.insertedTextBackground#4ec99433
  • diffEditor.removedTextBackground#f0717833
  • dropdown.background#091827
  • dropdown.border#24aedd44
  • dropdown.foreground#c8e6f4
  • editor.background#0d1f2d
  • editor.findMatchBackground#ffffff00
  • editor.findMatchBorder#ffc410
  • editor.findMatchHighlightBackground#24aedd33
  • editor.findMatchHighlightBorder#24aedd00
  • editor.findRangeHighlightBackground#24aedd18
  • editor.findRangeHighlightBorder#ffffff00
  • editor.foldBackground#24aedd1a
  • editor.foreground#c8e6f4
  • editor.hoverHighlightBackground#24aedd22
  • editor.inactiveSelectionBackground#24aedd1a
  • editor.lineHighlightBackground#091827
  • editor.lineHighlightBorder#0a2337
  • editor.rangeHighlightBackground#09182744
  • editor.rangeHighlightBorder#24aedd44
  • editor.selectionBackground#24aedd33
  • editor.selectionHighlightBackground#24aedd22
  • editor.selectionHighlightBorder#24aedd55
  • editor.wordHighlightBackground#24aedd1c
  • editor.wordHighlightStrongBackground#24aedd30
  • editorBracketMatch.background#24aedd1a
  • editorBracketMatch.border#24aedd
  • editorCodeLens.foreground#5b7a8f
  • editorCursor.background#0d1f2d
  • editorCursor.foreground#24aedd
  • editorError.background#f0717800
  • editorError.border#ffffff00
  • editorError.foreground#f07178
  • editorGroup.border#24aedd44
  • editorGroup.emptyBackground#0d1f2d
  • editorGroupHeader.tabsBackground#091827
  • editorGutter.addedBackground#4ec994
  • editorGutter.background#0d1f2d
  • editorGutter.commentRangeForeground#5b7a8f
  • editorGutter.deletedBackground#f07178
  • editorGutter.foldingControlForeground#5b7a8f
  • editorGutter.modifiedBackground#24aedd
  • editorHoverWidget.background#091827ee
  • editorHoverWidget.border#24aedd44
  • editorHoverWidget.foreground#c8e6f4
  • editorIndentGuide.activeBackground#24aedd55
  • editorIndentGuide.activeBackground1#24aedd55
  • editorIndentGuide.background#1e3a4f
  • editorIndentGuide.background1#1e3a4f
  • editorInfo.background#24aedd00
  • editorInfo.border#24aedd00
  • editorInfo.foreground#24aedd
  • editorLineNumber.activeForeground#24aedd
  • editorLineNumber.foreground#3a6482aa
  • editorLink.activeForeground#24aedd
  • editorMarkerNavigation.background#091827
  • editorMarkerNavigationError.background#f07178
  • editorMarkerNavigationInfo.background#24aedd
  • editorMarkerNavigationWarning.background#ffc410
  • editorOverviewRuler.background#0d1f2d00
  • editorOverviewRuler.border#24aedd22
  • editorRuler.foreground#1e3a4f
  • editorSuggestWidget.background#091827ee
  • editorSuggestWidget.border#24aedd44
  • editorSuggestWidget.foreground#c8e6f4
  • editorSuggestWidget.highlightForeground#24aedd
  • editorSuggestWidget.selectedBackground#122435
  • editorWarning.background#ffc41000
  • editorWarning.border#ffffff00
  • editorWarning.foreground#ffc410
  • editorWhitespace.foreground#24aedd22
  • editorWidget.background#091827ee
  • editorWidget.foreground#c8e6f4
  • editorWidget.resizeBorder#24aedd
  • focusBorder#24aedd
  • foreground#c8e6f4
  • gitDecoration.addedResourceForeground#4ec994
  • gitDecoration.conflictingResourceForeground#bb9af7
  • gitDecoration.deletedResourceForeground#f07178
  • gitDecoration.ignoredResourceForeground#3a6482
  • gitDecoration.modifiedResourceForeground#ffc410
  • gitDecoration.stageDeletedResourceForeground#f07178
  • gitDecoration.stageModifiedResourceForeground#ffc410
  • gitDecoration.submoduleResourceForeground#24aedd
  • gitDecoration.untrackedResourceForeground#4ec994
  • icon.foreground#24aedd
  • input.background#122435
  • input.border#24aedd55
  • input.foreground#c8e6f4
  • input.placeholderForeground#5b7a8f
  • inputOption.activeBackground#24aedd22
  • inputOption.activeBorder#24aedd
  • inputOption.activeForeground#c8e6f4
  • list.activeSelectionBackground#1a3550
  • list.activeSelectionForeground#24aedd
  • list.dropBackground#091827
  • list.focusBackground#122435
  • list.focusForeground#c8e6f4
  • list.highlightForeground#ffc410
  • list.hoverBackground#122435
  • list.hoverForeground#c8e6f4
  • list.inactiveSelectionBackground#122435
  • list.inactiveSelectionForeground#24aedd
  • listFilterWidget.background#091827
  • listFilterWidget.noMatchesOutline#f07178
  • listFilterWidget.outline#24aedd
  • menu.background#0d1f2dcc
  • menu.border#24aedd33
  • menu.foreground#c8e6f4
  • menu.selectionBackground#122435
  • menu.selectionBorder#24aedd33
  • menu.selectionForeground#24aedd
  • menu.separatorBackground#1e3a4f
  • menubar.selectionBackground#24aedd1a
  • menubar.selectionForeground#c8e6f4
  • merge.commonContentBackground#12243566
  • merge.commonHeaderBackground#1e3a4f88
  • merge.currentContentBackground#4ec99422
  • merge.currentHeaderBackground#4ec99444
  • merge.incomingContentBackground#24aedd22
  • merge.incomingHeaderBackground#24aedd44
  • minimap.background#091827
  • minimap.errorHighlight#f07178
  • minimap.findMatchHighlight#ffc41055
  • minimap.selectionHighlight#24aedd44
  • minimap.warningHighlight#ffc410
  • minimapGutter.addedBackground#4ec994
  • minimapGutter.deletedBackground#f07178
  • minimapGutter.modifiedBackground#24aedd
  • notificationCenter.border#24aedd
  • notificationCenterHeader.background#091827
  • notificationCenterHeader.foreground#24aedd
  • notifications.background#0d1f2d
  • notifications.border#24aedd33
  • notifications.foreground#c8e6f4
  • notificationsErrorIcon.foreground#f07178
  • notificationsInfoIcon.foreground#24aedd
  • notificationsWarningIcon.foreground#ffc410
  • notificationToast.border#24aedd
  • panel.background#091827
  • panel.border#24aedd33
  • panelSection.border#1e3a4f
  • panelTitle.activeBorder#24aedd
  • panelTitle.activeForeground#c8e6f4
  • panelTitle.inactiveForeground#5b7a8f
  • peekView.border#24aedd
  • peekViewEditor.background#091827
  • peekViewEditor.matchHighlightBackground#ffc41044
  • peekViewEditor.matchHighlightBorder#ffc410
  • peekViewEditorGutter.background#091827
  • peekViewResult.background#091827
  • peekViewResult.fileForeground#c8e6f4
  • peekViewResult.lineForeground#7fb3cc
  • peekViewResult.matchHighlightBackground#24aedd33
  • peekViewResult.selectionBackground#24aedd22
  • peekViewResult.selectionForeground#c8e6f4
  • peekViewTitle.background#0d1f2d
  • peekViewTitleDescription.foreground#7fb3ccbb
  • peekViewTitleLabel.foreground#24aedd
  • pickerGroup.border#24aedd44
  • pickerGroup.foreground#24aedd
  • progressBar.background#24aedd
  • scrollbar.shadow#0d1f2d
  • scrollbarSlider.activeBackground#24aedd88
  • scrollbarSlider.background#24aedd33
  • scrollbarSlider.hoverBackground#24aedd55
  • selection.background#24aedd40
  • settings.focusedRowBackground#24aedd0a
  • settings.headerForeground#c8e6f4
  • sideBar.background#091827
  • sideBar.border#24aedd22
  • sideBar.dropBackground#24aedd22
  • sideBar.foreground#c8e6f4cc
  • sideBarSectionHeader.background#0d1f2d
  • sideBarSectionHeader.border#24aedd22
  • sideBarSectionHeader.foreground#24aedd
  • sideBarTitle.foreground#24aedd
  • statusBar.background#091827
  • statusBar.border#24aedd33
  • statusBar.debuggingBackground#091827
  • statusBar.debuggingForeground#ffc410
  • statusBar.foreground#24aedd
  • statusBar.noFolderBackground#091827
  • statusBar.noFolderForeground#24aedd
  • statusBarItem.activeBackground#24aedd25
  • statusBarItem.hoverBackground#24aedd1a
  • statusBarItem.remoteBackground#24aedd
  • statusBarItem.remoteForeground#0d1f2d
  • tab.activeBackground#0d1f2d
  • tab.activeBorder#0d1f2d00
  • tab.activeBorderTop#ffc410
  • tab.activeForeground#c8e6f4
  • tab.border#0d1f2d
  • tab.inactiveBackground#091827
  • tab.inactiveForeground#5b7a8f
  • terminal.ansiBlack#0d1f2d
  • terminal.ansiBlue#24aedd
  • terminal.ansiBrightBlack#3a6482
  • terminal.ansiBrightBlue#50d9ff
  • terminal.ansiBrightCyan#4dcfff
  • terminal.ansiBrightGreen#4ec994
  • terminal.ansiBrightMagenta#c792ea
  • terminal.ansiBrightRed#f07178
  • terminal.ansiBrightWhite#e8f4fd
  • terminal.ansiBrightYellow#ffc410
  • terminal.ansiCyan#24aedd
  • terminal.ansiGreen#4ec994
  • terminal.ansiMagenta#bb9af7
  • terminal.ansiRed#f07178
  • terminal.ansiWhite#c8e6f4
  • terminal.ansiYellow#ffc410
  • terminal.border#24aedd33
  • terminal.foreground#c8e6f4
  • terminal.selectionBackground#24aedd33
  • terminalCursor.background#0d1f2d
  • terminalCursor.foreground#24aedd
  • textLink.activeForeground#50d9ff
  • textLink.foreground#24aedd
  • titleBar.activeBackground#091827
  • titleBar.activeForeground#c8e6f4
  • titleBar.border#24aedd22
  • titleBar.inactiveBackground#091827
  • titleBar.inactiveForeground#c8e6f466
  • tree.indentGuidesStroke#1e3a4f
  • walkThrough.embeddedEditorBackground#00000050
  • widget.shadow#00000055

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#3a6482
variable, string constant.other.placeholder#c8e6f4
string constant.other.placeholder#c3e88d
constant.other.color#ffffff
invalid, invalid.illegal#f07178
keyword, storage.modifier#24aedd
storage.type#bb9af7bold
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.separator.inheritance.php, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#7fb3cc
keyword.control#24aeddbold
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#50d9ff
entity.name.function, variable.function, support.function, keyword.other.special-method#50d9ff
meta.function-call#4ec994
meta.block variable.other#c8e6f4
support.other.variable, string.other.link#c8e6f4
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#f78c6c
support.constant#ffc410
keyword.other.unit, keyword.other#4dcfff
constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#ffc410
string#c3e88d
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#ffc410
support.type#ffc410
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#c8e6f4
source.css support.type.property-name#24aeddbold
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#50d9ff
variable.language#24aedd
entity.name.method.js#50d9ff
meta.class-method.js entity.name.function.js, variable.function.constructor#4dcfff
entity.other.attribute-name#9dd8f5
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#ffc410
entity.other.attribute-name.class#ffc410
source.sass keyword.control#24aedd
markup.inserted#4ec994
markup.deleted#f07178
markup.changed#bb9af7
string.regexp#4dcfff
constant.character.escape#4dcfff
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#24aedd
source.js constant.other.object.key.js string.unquoted.label.js#f07178
source.json meta.structure.dictionary.json support.type.property-name.json#24aedd
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ffc410
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#50d9ff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#4ec994
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#bb9af7
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#f78c6c
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c8e6f4
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#24aedd
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#4ec994
text.html.markdown, punctuation.definition.list_item.markdown#c8e6f4
text.html.markdown markup.inline.raw.markdown#24aedd
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#3a6482
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#ffc410
markup.italic#24aedditalic
markup.bold, markup.bold string#ffc410bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#50d9ffbold
markup.underline#4dcfffunderline
markup.quote punctuation.definition.blockquote.markdown#3a6482
markup.quoteitalic
string.other.link.title.markdown#24aedd
string.other.link.description.title.markdown#24aedd
constant.other.reference.link.markdown#ffc410
markup.raw.block#4dcfff
markup.raw.block.fenced.markdown#1e3a4f
punctuation.definition.fenced.markdown#1e3a4f
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#c8e6f4
variable.language.fenced.markdown#3a6482
meta.separator#3a6482bold
markup.table#c8e6f4