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#193549
  • activityBar.background#193549
  • activityBar.border#ffc410
  • activityBar.foreground#ffc410
  • activityBar.inactiveForeground#b6b5b170
  • activityBarBadge.background#ffc410
  • activityBarBadge.foreground#ffffff
  • badge.background#193549
  • badge.foreground#ffc410
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#193549
  • breadcrumb.focusForeground#e0e0e0
  • breadcrumb.foreground#cccccccc
  • button.background#ffc410
  • button.foreground#091f2f
  • button.hoverBackground#ffc310c9
  • button.secondaryBackground#ffc410
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#ffc410
  • checkbox.background#091f2f
  • checkbox.border#00000000
  • checkbox.foreground#ffc410
  • debugExceptionWidget.background#333333
  • debugExceptionWidget.border#ffc410
  • debugIcon.pauseForeground#00ffff
  • debugIcon.restartForeground#1eff00
  • debugIcon.startForeground#ff8800
  • debugIcon.stopForeground#ff0000
  • debugToolBar.background#193549
  • debugToolBar.border#ffc410
  • diffEditor.border#ffc410
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#f2bcbc33
  • dropdown.background#091f2f
  • dropdown.border#00000000
  • dropdown.foreground#cccccc
  • editor.background#052842
  • editor.findMatchBackground#264f78
  • editor.findMatchBorder#264f78
  • editor.findMatchHighlightBackground#ffc4103e
  • editor.findMatchHighlightBorder#b82b2b00
  • editor.findRangeHighlightBackground#1d2b3f66
  • editor.findRangeHighlightBorder#ffffff00
  • editor.foldBackground#264f784d
  • editor.foreground#fff
  • editor.hoverHighlightBackground#0b3a68e7
  • editor.inactiveSelectionBackground#3a3d41
  • editor.lineHighlightBackground#091f2f
  • editor.lineHighlightBorder#091f2f
  • editor.rangeHighlightBackground#091f2f
  • editor.rangeHighlightBorder#264f78
  • editor.selectionBackground#264f78
  • editor.selectionHighlightBackground#0c3e61
  • editor.selectionHighlightBorder#ffc3103b
  • editor.wordHighlightBackground#264f78
  • editor.wordHighlightStrongBackground#004972b8
  • editorBracketMatch.background#0064001a
  • editorBracketMatch.border#888888
  • editorCodeLens.foreground#999999
  • editorCursor.background#ffffff
  • editorCursor.foreground#ffc410
  • editorError.background#B73A3400
  • editorError.border#ffffff00
  • editorError.foreground#ff0000
  • editorGroup.border#ffc410
  • editorGroup.emptyBackground#193549
  • editorGroupHeader.tabsBackground#091f2f
  • editorGutter.addedBackground#4ce74c
  • editorGutter.background#052842
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#db1a24
  • editorGutter.foldingControlForeground#c5c5c5
  • editorGutter.modifiedBackground#00ffff
  • editorHoverWidget.background#193549d5
  • editorHoverWidget.border#ffc3103b
  • editorHoverWidget.foreground#cccccc
  • editorIndentGuide.activeBackground#0064001a
  • editorIndentGuide.background#264f78
  • editorInfo.background#4490BF00
  • editorInfo.border#4490BF00
  • editorInfo.foreground#00ffff
  • editorLineNumber.activeForeground#ffc410
  • editorLineNumber.foreground#b3b2b18c
  • editorLink.activeForeground#ffc410
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#f48771
  • editorMarkerNavigationInfo.background#75beff
  • editorMarkerNavigationWarning.background#cca700
  • editorOverviewRuler.border#7f7f7f4d
  • editorRuler.foreground#ccc
  • editorSuggestWidget.background#091f2fb4
  • editorSuggestWidget.border#454545
  • editorSuggestWidget.foreground#d4d4d4
  • editorSuggestWidget.highlightForeground#0097fb
  • editorSuggestWidget.selectedBackground#062f4a
  • editorWarning.background#A9904000
  • editorWarning.border#ffffff00
  • editorWarning.foreground#ffc410
  • editorWhitespace.foreground#ffffff31
  • editorWidget.background#091f2f9a
  • editorWidget.foreground#cccccc
  • editorWidget.resizeBorder#5F5F5F
  • focusBorder#ffc410
  • foreground#fff
  • 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#ffc410
  • input.background#193549
  • input.border#ffc410
  • input.foreground#ffffffd7
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBackground#091f2f73
  • inputOption.activeBorder#ffc410
  • inputOption.activeForeground#ffffffd7
  • list.activeSelectionBackground#193549
  • list.activeSelectionForeground#ffc410
  • list.dropBackground#091f2f
  • list.focusBackground#062f4a
  • list.focusForeground#cccccc
  • list.highlightForeground#0097fb
  • list.hoverBackground#193549
  • list.hoverForeground#ffc410cf
  • list.inactiveSelectionBackground#193549
  • list.inactiveSelectionForeground#ffc410
  • listFilterWidget.background#653723
  • listFilterWidget.noMatchesOutline#be1100
  • listFilterWidget.outline#00000000
  • menu.background#091f2fc7
  • menu.border#ffc31046
  • menu.foreground#cccccc
  • menu.selectionBackground#193549
  • menu.selectionBorder#00000000
  • menu.selectionForeground#ffc410
  • menu.separatorBackground#bbbbbb
  • menubar.selectionBackground#ffffff1a
  • menubar.selectionForeground#cccccc
  • merge.commonContentBackground#282828
  • merge.commonHeaderBackground#383838
  • merge.currentContentBackground#27403B
  • merge.currentHeaderBackground#367366
  • merge.incomingContentBackground#28384B
  • merge.incomingHeaderBackground#395F8F
  • minimap.background#193549
  • minimap.errorHighlight#f48771
  • minimap.findMatchHighlight#ffc41034
  • minimap.selectionHighlight#264f78
  • minimap.warningHighlight#cca700
  • minimapGutter.addedBackground#587c0c
  • minimapGutter.deletedBackground#94151b
  • minimapGutter.modifiedBackground#0c7d9d
  • notificationCenter.border#FFC410
  • notificationCenterHeader.background#193549
  • notificationCenterHeader.foreground#FFC410
  • notifications.background#052842
  • notifications.border#ffc31056
  • notifications.foreground#cccccc
  • notificationsErrorIcon.foreground#ff0000
  • notificationsInfoIcon.foreground#00FFFF
  • notificationsWarningIcon.foreground#FFC410
  • notificationToast.border#ffc410
  • panel.background#091f2f
  • panel.border#ffc410
  • panelSection.border#80808059
  • panelTitle.activeBorder#e7e7e7
  • panelTitle.activeForeground#e7e7e7
  • panelTitle.inactiveForeground#e7e7e799
  • peekView.border#ffc410
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditor.matchHighlightBorder#ee931e
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#091f2f
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#091f2f
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffc410
  • pickerGroup.border#ffc31050
  • pickerGroup.foreground#3794ff
  • progressBar.background#ffc410
  • scrollbar.shadow#ffc410
  • scrollbarSlider.activeBackground#ffc310c5
  • scrollbarSlider.background#ffc31048
  • scrollbarSlider.hoverBackground#ffc3107c
  • selection.background#68b1ff72
  • settings.focusedRowBackground#ffffff07
  • settings.headerForeground#ffffff
  • sideBar.background#091f2f
  • sideBar.border#193549
  • sideBar.dropBackground#193549
  • sideBar.foreground#ffffffce
  • sideBarSectionHeader.background#193549
  • sideBarSectionHeader.border#ffffff00
  • sideBarSectionHeader.foreground#ffc410
  • sideBarTitle.foreground#ffc410
  • statusBar.background#091f2f
  • statusBar.border#ffc410
  • statusBar.debuggingBackground#091f2f
  • statusBar.debuggingForeground#ffc410
  • statusBar.foreground#ffc410
  • statusBar.noFolderBackground#091f2f
  • statusBar.noFolderForeground#ffc410
  • statusBarItem.activeBackground#FFFFFF25
  • statusBarItem.hoverBackground#ffffff1f
  • statusBarItem.remoteBackground#00ffff
  • statusBarItem.remoteForeground#ffc410
  • tab.activeBackground#193549
  • tab.activeBorder#ffc31000
  • tab.activeBorderTop#ffc410
  • tab.activeForeground#ffc310e3
  • tab.border#ffffff00
  • tab.inactiveBackground#091f2f
  • 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#fafafa
  • terminal.ansiBrightYellow#f5f543
  • terminal.ansiCyan#11a8cd
  • terminal.ansiGreen#0dbc79
  • terminal.ansiMagenta#bc3fbc
  • terminal.ansiRed#cd3131
  • terminal.ansiWhite#e5e5e5
  • terminal.ansiYellow#e5e510
  • terminal.border#ffc410
  • terminal.foreground#cccccc
  • terminal.selectionBackground#1a496b
  • terminalCursor.background#0087FF
  • terminalCursor.foreground#ffc410
  • textLink.activeForeground#ffc310a9
  • textLink.foreground#ffc410
  • titleBar.activeBackground#193549
  • titleBar.activeForeground#ccc
  • titleBar.border#091f2f00
  • titleBar.inactiveBackground#193549
  • titleBar.inactiveForeground#cccccc99
  • tree.indentGuidesStroke#585858
  • walkThrough.embeddedEditorBackground#00000050
  • widget.shadow#0000005c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#838383
variable, string constant.other.placeholder#EEFFFF
string constant.other.placeholder#fa71ff
constant.other.color#ffffff
invalid, invalid.illegal#FF5370
keyword, storage.modifier#ff0062
storage.type#c300ffbold
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#ffffff
keyword.control#ff006abold
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#00ffff
entity.name.function, variable.function, support.function, keyword.other.special-method#00ffff
meta.function-call#20dd20
meta.block variable.other#f07178
support.other.variable, string.other.link#f07178
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#f5ae3b
support.constant#fdfa66
keyword.other.unit, keyword.other#82fbff
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#ff0077
string#eeff00
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#FFCB6B
support.type#F0B565
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#ffffff
source.css support.type.property-name#00a6ffbold
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#fd0076
variable.language#FF5370
entity.name.method.js#fdff82
meta.class-method.js entity.name.function.js, variable.function.constructor#829fff
entity.other.attribute-name#ff4e4e
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#FFCB6B
entity.other.attribute-name.class#FFCB6B
source.sass keyword.control#82AAFF
markup.inserted#C3E88D
markup.deleted#FF5370
markup.changed#C792EA
string.regexp#89DDFF
constant.character.escape#89DDFF
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#82AAFF
source.js constant.other.object.key.js string.unquoted.label.js#FF5370
source.json meta.structure.dictionary.json support.type.property-name.json#C300FF
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#ffff00
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#33ff33
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#ff0000
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#f03353
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#f07178
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#ff0062
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#C3E88D
text.html.markdown, punctuation.definition.list_item.markdown#EEFFFF
text.html.markdown markup.inline.raw.markdown#ff0062
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#65737E
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#9ff026
markup.italic#f32b35italic
markup.bold, markup.bold string#f49effbold
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#f07178bold
markup.underline#F78C6Cunderline
markup.quote punctuation.definition.blockquote.markdown#65737E
markup.quoteitalic
string.other.link.title.markdown#ff0062
string.other.link.description.title.markdown#ff0062
constant.other.reference.link.markdown#FFCB6B
markup.raw.block#ff0062
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#EEFFFF
variable.language.fenced.markdown#65737E
meta.separator#65737Ebold
markup.table#EEFFFF