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.

  • actionBar.toggledBackground#ffffff26
  • activityBar.background#2e2e32
  • activityBar.border#ffffff00
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#ffffff66
  • activityBarBadge.background#3584e4
  • activityBarBadge.foreground#ffffff
  • badge.background#ffffff66
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#ffffff
  • breadcrumb.background#1d1d20
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#ffffff8c
  • button.background#3584e4
  • button.foreground#ffffff
  • button.hoverBackground#62a0ea
  • button.secondaryBackground#ffffff00
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#ffffff26
  • checkbox.background#404045
  • checkbox.border#ffffff26
  • checkbox.foreground#ffffff
  • debugExceptionWidget.background#36363a
  • debugExceptionWidget.border#ffffff00
  • debugToolBar.background#36363a
  • debugToolBar.border#ffffff00
  • descriptionForeground#bbd1e5
  • diffEditor.border#ffffff26
  • diffEditor.insertedTextBackground#26a26933
  • diffEditor.removedTextBackground#c01c2833
  • dropdown.background#404045
  • dropdown.border#ffffff26
  • dropdown.foreground#ffffff
  • editor.background#1d1d20
  • editor.findMatchBackground#515c6a
  • editor.findMatchBorder#74879f
  • editor.findMatchHighlightBackground#ea5c0055
  • editor.findMatchHighlightBorder#ffffff00
  • editor.findRangeHighlightBackground#3a3d4166
  • editor.findRangeHighlightBorder#ffffff00
  • editor.foldBackground#3584e426
  • editor.foreground#bbd1e5
  • editor.hoverHighlightBackground#264f7840
  • editor.inactiveSelectionBackground#5e5c6426
  • editor.lineHighlightBackground#ffffff0A
  • editor.lineHighlightBorder#282828
  • editor.rangeHighlightBackground#ffffff0b
  • editor.rangeHighlightBorder#ffffff00
  • editor.selectionBackground#9a999626
  • editor.selectionHighlightBackground#add6ff26
  • editor.selectionHighlightBorder#495F77
  • editor.wordHighlightBackground#575757b8
  • editor.wordHighlightBorder#ffffff00
  • editor.wordHighlightStrongBackground#004972b8
  • editor.wordHighlightStrongBorder#ffffff00
  • editorBracketHighlight.foreground1#ffffff8c
  • editorBracketHighlight.foreground2#ffffff8c
  • editorBracketHighlight.foreground3#ffffff8c
  • editorBracketHighlight.foreground4#ffffff8c
  • editorBracketHighlight.foreground5#ffffff8c
  • editorBracketHighlight.foreground6#ffffff8c
  • editorBracketHighlight.unexpectedBracket.foreground#c01c28
  • editorBracketMatch.background#0064001a
  • editorBracketMatch.border#888888
  • editorCodeLens.foreground#ffffff8c
  • editorCursor.background#000000
  • editorCursor.foreground#ffffff8c
  • editorError.background#B73A3400
  • editorError.border#ffffff00
  • editorError.foreground#ff938ce6
  • editorGroup.border#ffffff26
  • editorGroup.emptyBackground#1d1d20
  • editorGroupHeader.border#ff000000
  • editorGroupHeader.tabsBackground#2e2e32
  • editorGutter.addedBackground#8ff0a480
  • editorGutter.background#1d1d20
  • editorGutter.commentRangeForeground#ffffff8c
  • editorGutter.deletedBackground#f6615180
  • editorGutter.foldingControlForeground#ffffff8c
  • editorGutter.modifiedBackground#ffbe6f80
  • editorHoverWidget.background#36363a
  • editorHoverWidget.border#ffffff26
  • editorHoverWidget.foreground#ffffff
  • editorHoverWidget.highlightForeground#ffffff26
  • editorIndentGuide.activeBackground1#707070
  • editorIndentGuide.background1#404040
  • editorInfo.background#4490BF00
  • editorInfo.border#4490BF00
  • editorInfo.foreground#81d0ffe6
  • editorInlayHint.background#36363a
  • editorInlayHint.foreground#ffffff
  • editorLineNumber.activeForeground#ffffff80
  • editorLineNumber.foreground#ffffff26
  • editorLink.activeForeground#3584e4
  • editorMarkerNavigation.background#222226
  • editorMarkerNavigationError.background#ff938c
  • editorMarkerNavigationInfo.background#81d0ff
  • editorMarkerNavigationWarning.background#ffc252
  • editorOverviewRuler.background#25252500
  • editorOverviewRuler.border#7f7f7f4d
  • editorRuler.foreground#5a5a5a
  • editorSuggestWidget.background#36363a
  • editorSuggestWidget.border#ffffff26
  • editorSuggestWidget.foreground#d4d4d4
  • editorSuggestWidget.highlightForeground#3584e4
  • editorSuggestWidget.selectedBackground#062f4a
  • editorWarning.background#A9904000
  • editorWarning.border#ffffff00
  • editorWarning.foreground#ffc252e6
  • editorWhitespace.foreground#ffffff26
  • editorWidget.background#36363a
  • editorWidget.foreground#ffffff
  • editorWidget.resizeBorder#ffffff26
  • focusBorder#3584e4
  • foreground#cccccc
  • gitDecoration.addedResourceForeground#8ff0a4
  • gitDecoration.conflictingResourceForeground#dc8add
  • gitDecoration.deletedResourceForeground#f66151
  • gitDecoration.ignoredResourceForeground#ffffff8c
  • gitDecoration.modifiedResourceForeground#ffbe6f
  • gitDecoration.stageDeletedResourceForeground#ed333b
  • gitDecoration.stageModifiedResourceForeground#ff7800
  • gitDecoration.submoduleResourceForeground#99c1f1
  • gitDecoration.untrackedResourceForeground#2ec27e
  • icon.foreground#cccccc
  • input.background#404045
  • input.border#ffffff26
  • input.foreground#ffffff
  • input.placeholderForeground#ffffff8c
  • inputOption.activeBackground#3584e4
  • inputOption.activeBorder#ffffff00
  • inputOption.activeForeground#ffffff
  • list.activeSelectionBackground#ffffff4d
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#36363a
  • list.focusBackground#3584e426
  • list.focusForeground#ffffff
  • list.highlightForeground#3584e4
  • list.hoverBackground#ffffff26
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#ffffff26
  • list.inactiveSelectionForeground#ffffff8c
  • list.warningForeground#ffc252
  • listFilterWidget.background#63452c
  • listFilterWidget.noMatchesOutline#c01c28
  • listFilterWidget.outline#00000000
  • menu.background#36363a
  • menu.border#ffffff00
  • menu.foreground#ffffff
  • menu.selectionBackground#ffffff26
  • menu.selectionBorder#00000000
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#ffffff26
  • menubar.selectionBackground#ffffff26
  • menubar.selectionBorder#ff000000
  • menubar.selectionForeground#ffffff
  • merge.commonContentBackground#2828288c
  • merge.commonHeaderBackground#3838388c
  • merge.currentContentBackground#27403B8c
  • merge.currentHeaderBackground#3673668c
  • merge.incomingContentBackground#28384B8c
  • merge.incomingHeaderBackground#395F8F8c
  • minimap.background#1d1d20
  • minimap.errorHighlight#ff938ce6
  • minimap.findMatchHighlight#515c6a8c
  • minimap.selectionHighlight#9a999626
  • minimap.warningHighlight#ffc252e6
  • minimapGutter.addedBackground#8ff0a480
  • minimapGutter.deletedBackground#f6615180
  • minimapGutter.modifiedBackground#ffbe6f80
  • multiDiffEditor.headerBackground#ffffff00
  • notificationCenter.border#ffffff00
  • notificationCenterHeader.background#36363a
  • notificationCenterHeader.foreground#ffffff
  • notifications.background#36363a
  • notifications.border#ffffff00
  • notifications.foreground#ffffffe6
  • notificationsErrorIcon.foreground#ff938c
  • notificationsInfoIcon.foreground#81d0ff
  • notificationsWarningIcon.foreground#ffc252
  • notificationToast.border#ffffff00
  • panel.background#1d1d20
  • panel.border#ffffff26
  • panelSection.border#ffffff26
  • panelSectionHeader.background#1d1d20
  • panelTitle.activeBorder#ffffff
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#ffffff8c
  • peekView.border#3584e4
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditor.matchHighlightBorder#ee931e
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#36363a
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#ffffff8c
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3584e426
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#1e1e1e
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#ffffff26
  • pickerGroup.foreground#3584e4
  • progressBar.background#ffffff
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#bfbfbf66
  • scrollbarSlider.background#79797966
  • scrollbarSlider.hoverBackground#646464b3
  • selection.background#3584e48c
  • settings.focusedRowBackground#ffffff07
  • settings.headerForeground#cccccc
  • sideBar.background#2e2e32
  • sideBar.border#ffffff00
  • sideBar.dropBackground#36363a
  • sideBar.foreground#ffffff8c
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.border#ffffff26
  • sideBarSectionHeader.foreground#ffffff8c
  • sideBarTitle.foreground#bbbbbb
  • statusBar.background#2e2e32
  • statusBar.debuggingBackground#cd9309
  • statusBar.debuggingBorder#00000000
  • statusBar.debuggingForeground#000000cc
  • statusBar.foreground#ffffff8c
  • statusBar.noFolderBackground#2e2e32
  • statusBar.noFolderForeground#ffffff8c
  • statusBarItem.activeBackground#ffffff26
  • statusBarItem.hoverBackground#ffffff26
  • statusBarItem.remoteBackground#2e2e32
  • statusBarItem.remoteForeground#ffffff8c
  • tab.activeBackground#1d1d20
  • tab.activeBorder#00000000
  • tab.activeBorderTop#00000000
  • tab.activeForeground#ffffff
  • tab.border#ffffff00
  • tab.hoverBackground#ffffff26
  • tab.hoverBorder#ff000000
  • tab.hoverForeground#ffffff
  • tab.inactiveBackground#2e2e32
  • tab.inactiveForeground#ffffff80
  • tab.unfocusedHoverBackground#ffffff26
  • terminal.ansiBlack#5e5c64
  • terminal.ansiBlue#3584e4
  • terminal.ansiBrightBlack#77767b
  • terminal.ansiBrightBlue#81d0ff
  • terminal.ansiBrightCyan#7bdff4
  • terminal.ansiBrightGreen#8de698
  • terminal.ansiBrightMagenta#fba7ff
  • terminal.ansiBrightRed#ff888c
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffc057
  • terminal.ansiCyan#2190a4
  • terminal.ansiGreen#3a944a
  • terminal.ansiMagenta#9141ac
  • terminal.ansiRed#e62d42
  • terminal.ansiWhite#f6f5f4
  • terminal.ansiYellow#c88800
  • terminal.background#1d1d20
  • terminal.border#ffffff26
  • terminal.foreground#f6f5f4
  • terminal.selectionBackground#ffffff26
  • terminalCursor.background#3584e4
  • terminalCursor.foreground#f6f5f4
  • textLink.foreground#81d0ff
  • textPreformat.foreground#2ec27e
  • titleBar.activeBackground#2e2e32
  • titleBar.activeForeground#ffffff8c
  • titleBar.border#ffffff00
  • titleBar.inactiveBackground#222226
  • titleBar.inactiveForeground#ffffff80
  • tree.indentGuidesStroke#ffffff26
  • walkThrough.embeddedEditorBackground#00000050
  • widget.shadow#0000005c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#ffffff8citalic
variable, string constant.other.placeholder#99c1f1
variable.other.constant#2190a4bold
variable.parameter#8ff0a4italic
constant.other.color#bbd1e5
invalid, invalid.illegal#c01c28
keyword, storage.type, storage.modifier#ffa0d8
keyword.control, constant.other.color, keyword.other.template, keyword.other.substitution#d56199
keyword.operator.address.go, keyword.operator.arithmetic.c, keyword.operator.arithmetic.cpp, keyword.operator.arithmetic.go, keyword.operator.arithmetic.php, keyword.operator.arithmetic, keyword.operator.assignment.c, keyword.operator.assignment.compound.js, keyword.operator.assignment.compound.ts, keyword.operator.assignment.compound, keyword.operator.assignment.cpp, keyword.operator.assignment.go, keyword.operator.assignment, keyword.operator.bitwise.php, keyword.operator.bitwise.shift.c, keyword.operator.bitwise.shift.cpp, keyword.operator.bitwise, keyword.operator.c, keyword.operator.channel, keyword.operator.comparison.c, keyword.operator.comparison.cpp, keyword.operator.comparison.php, keyword.operator.comparison, keyword.operator.cpp, keyword.operator.css, keyword.operator.decrement.c, keyword.operator.decrement.cpp, keyword.operator.decrement, keyword.operator.delete, keyword.operator.error-control.php, keyword.operator.expression.delete, keyword.operator.expression.import, keyword.operator.expression.in, keyword.operator.expression.instanceof, keyword.operator.expression.instanceof, keyword.operator.expression.is, keyword.operator.expression.keyof, keyword.operator.expression.of, keyword.operator.expression.typeof, keyword.operator.expression.void, keyword.operator.heredoc.php, keyword.operator.increment.c, keyword.operator.increment.cpp, keyword.operator.increment, keyword.operator.instanceof.java, keyword.operator.less, keyword.operator.logical.php, keyword.operator.logical.python, keyword.operator.logical, keyword.operator.misc.rust, keyword.operator.module, keyword.operator.new, keyword.operator.new, keyword.operator.nowdoc.php, keyword.operator.optional, keyword.operator.quantifier.regexp, keyword.operator.regexp.php, keyword.operator.relational, keyword.operator.scss, keyword.operator.sigil.rust, keyword.operator.sizeof.c, keyword.operator.sizeof.cpp, keyword.operator.ternary, keyword.operator.type.php, keyword.operator.word, keyword.operator#bbd1e5
meta.tag, punctuation, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded#ffffff8c
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#62a0eanormal
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#ffbe6fbold
meta.block variable.other#8ff0a4
support.other.variable, string.other.link#99c1f1
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other#ff888c
string, 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#cdab8f
entity.name, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#57e389bold
support.type#d56199
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#bbd1e5
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ff9c5b
variable.language#ff9c5bitalic
entity.name.method.js#ffbe6fitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#ffbe6f
entity.other.attribute-name#ffa0d8
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#ffbe6fitalic
entity.other.attribute-name.class#ffbe6f
source.sass keyword.control#57e389
markup.inserted#8ff0a4
markup.deleted#ff888c
markup.changed#dc8add
string.regexp#d56199
constant.character.escape#d56199
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#62a0eaitalic
source.js constant.other.object.key.js string.unquoted.label.js#ff888citalic
source.json meta.structure.dictionary.json support.type.property-name.json#99c1f1
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#8ff0a4
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#ffbe6f
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#ffa0d8
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#99c1f1
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#8ff0a4
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#ffbe6f
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#ffa0d8
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#99c1f1
text.html.markdown, punctuation.definition.list_item.markdown#bbd1e5
text.html.markdown markup.inline.raw.markdown#ffa0d8
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#ffffff8c
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#8ff0a4
markup.italic#ffbe6fitalic
markup.bold, markup.bold string#99c1f1bold
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#ff888cbold
markup.underline#ffa0d8underline
markup.quote punctuation.definition.blockquote.markdown#ffffff8c
markup.quoteitalic
string.other.link.title.markdown#62a0ea
string.other.link.description.title.markdown#d56199
constant.other.reference.link.markdown#ffbe6f
markup.raw.block#dc8add
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#bbd1e5
variable.language.fenced.markdown#ffffff8c
meta.separator#ffffff8cbold
markup.table#bbd1e5