Skip to main content
Coding Theme

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#1A1F28
  • activityBar.border#1A1F28
  • activityBar.foreground#738699
  • activityBarBadge.background#FFCC66
  • activityBarBadge.foreground#1A1F28
  • badge.background#FFAE57
  • badge.foreground#1A1F28
  • button.background#FFAE57
  • button.foreground#1A1F28
  • button.hoverBackground#FFCC66BB
  • debugExceptionWidget.background#272D38
  • debugExceptionWidget.border#343D4A
  • debugToolBar.background#272D38
  • diffEditor.insertedTextBackground#95E6CB44
  • diffEditor.removedTextBackground#F0717844
  • dropdown.background#212733
  • dropdown.listBackground#212733
  • editor.background#212733
  • editor.findMatchBackground#FFCC6633
  • editor.findMatchHighlightBackground#242B38
  • editor.findRangeHighlightBackground#242B38
  • editor.foreground#D9D7CE
  • editor.lineHighlightBackground#242B38
  • editor.rangeHighlightBackground#242B38
  • editor.selectionBackground#343F4C
  • editor.wordHighlightBackground#242B38
  • editor.wordHighlightStrongBackground#242B38
  • editorBracketHighlight.foreground1#efeb8c
  • editorBracketHighlight.foreground2#efeb8c
  • editorBracketHighlight.foreground3#efeb8c
  • editorBracketMatch.border#3D4752
  • editorCursor.foreground#fae6be
  • editorError.foreground#f86a6a
  • editorGroup.border#343D4A
  • editorGroupHeader.noTabsBackground#212733
  • editorGroupHeader.tabsBackground#1A1F28
  • editorGroupHeader.tabsBorder#212733
  • editorGutter.addedBackground#BAE67E
  • editorGutter.deletedBackground#fd6b6b
  • editorGutter.modifiedBackground#5CCFE6
  • editorHoverWidget.background#272D38
  • editorHoverWidget.border#343D4A
  • editorInlayHint.background#1A1F28
  • editorInlayHint.parameterBackground#1A1F28
  • editorInlayHint.typeBackground#1A1F28
  • editorLineNumber.foreground#3D4752
  • editorLink.activeForeground#FFCC66
  • editorMarkerNavigation.background#272D38
  • editorOverviewRuler.border#343D4A
  • editorOverviewRuler.errorForeground#f96e6e
  • editorOverviewRuler.warningForeground#FFCC66
  • editorRuler.foreground#343D4A
  • editorSuggestWidget.background#272D38
  • editorSuggestWidget.border#343D4A
  • editorSuggestWidget.highlightForeground#FFCC66
  • editorSuggestWidget.selectedBackground#303540
  • editorWarning.foreground#FFCC66
  • editorWhitespace.foreground#3D4752
  • editorWidget.background#272D38
  • extensionButton.prominentBackground#FFCC66AA
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#FFCC66BB
  • focusBorder#7386998A
  • foreground#738699
  • gitDecoration.ignoredResourceForeground#73869977
  • input.background#272D38
  • input.border#7386994C
  • input.foreground#D9D7CE
  • input.placeholderForeground#7386998A
  • inputOption.activeBorder#7386998A
  • inputValidation.errorBackground#212733
  • inputValidation.errorBorder#fd6c6c
  • inputValidation.infoBackground#212733
  • inputValidation.infoBorder#5CCFE6
  • inputValidation.warningBackground#212733
  • inputValidation.warningBorder#FFD580
  • list.activeSelectionBackground#343D4A
  • list.activeSelectionForeground#D9D7CE
  • list.focusBackground#303540
  • list.focusForeground#D9D7CE
  • list.highlightForeground#FFCC66
  • list.hoverBackground#303540
  • list.hoverForeground#D9D7CE
  • list.inactiveSelectionBackground#1A1F28
  • list.inactiveSelectionForeground#D9D7CE
  • notificationCenter.border#1A1F28
  • notificationCenterHeader.background#1A1F28
  • notificationCenterHeader.foreground#FFCC66
  • notificationLink.foreground#FFAE57
  • notifications.background#343D4A
  • notifications.foreground#FFFFFF
  • notificationToast.border#1A1F28
  • panel.background#1A1F28
  • panel.border#11141AB3
  • panelTitle.activeBorder#1A1F28
  • panelTitle.activeForeground#FFAE57
  • panelTitle.inactiveForeground#5f7284
  • peekView.border#343D4A
  • peekViewEditor.background#272D38
  • peekViewEditor.matchHighlightBackground#242B38
  • peekViewResult.background#272D38
  • peekViewResult.fileForeground#5f7284
  • peekViewResult.matchHighlightBackground#242B38
  • peekViewTitle.background#272D38
  • peekViewTitleDescription.foreground#5f7284
  • peekViewTitleLabel.foreground#5f7284
  • pickerGroup.border#343D4A
  • pickerGroup.foreground#FFCC66
  • progressBar.background#FFCC66
  • scrollbar.shadow#11141A11
  • scrollbarSlider.activeBackground#FFFFFF22
  • scrollbarSlider.background#FFFFFF11
  • scrollbarSlider.hoverBackground#FFFFFF22
  • selection.background#343F4CFD
  • sideBar.background#1A1F28
  • sideBar.border#11141AB3
  • sideBar.foreground#5f7284
  • sideBarSectionHeader.background#1A1F28
  • sideBarSectionHeader.foreground#FFCC66
  • sideBarTitle.foreground#FFCC6699
  • statusBar.background#1A1F28
  • statusBar.border#1A1F28
  • statusBar.debuggingBackground#1A1F28
  • statusBar.debuggingForeground#90a8c1
  • statusBar.foreground#5f7284
  • statusBar.noFolderBackground#272D38
  • statusBarItem.activeBackground#343D4A
  • statusBarItem.hoverBackground#303540
  • statusBarItem.prominentBackground#343D4A
  • statusBarItem.prominentHoverBackground#303540
  • statusBarItem.remoteBackground#272D38
  • statusBarItem.remoteForeground#5f7284
  • tab.activeBackground#212733
  • tab.activeForeground#FFCC66
  • tab.border#1A1F28
  • tab.inactiveBackground#1A1F28
  • tab.inactiveForeground#5f7284
  • tab.unfocusedActiveForeground#D9D7CEAA
  • tab.unfocusedInactiveForeground#5f7284
  • terminal.ansiBlack#343D4A
  • terminal.ansiBlue#36A3D9
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#6871FF
  • terminal.ansiBrightCyan#A6FDE1
  • terminal.ansiBrightGreen#BAE67E
  • terminal.ansiBrightMagenta#FF77FF
  • terminal.ansiBrightRed#F07178
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFDF80
  • terminal.ansiCyan#95E6CB
  • terminal.ansiGreen#BAE67E
  • terminal.ansiMagenta#D4BFFF
  • terminal.ansiRed#F07178
  • terminal.ansiWhite#C7C7C7
  • terminal.ansiYellow#FFCC66
  • terminal.background#1A1F28
  • terminal.border#343D4A
  • terminal.foreground#D9D7CE
  • textBlockQuote.background#272D38
  • textLink.activeForeground#FFCC66
  • textLink.foreground#FFCC66
  • textPreformat.foreground#D9D7CE
  • titleBar.activeBackground#1A1F28
  • titleBar.activeForeground#5f7284
  • titleBar.border#1A1F28
  • titleBar.inactiveBackground#1A1F28
  • titleBar.inactiveForeground#5f7284
  • walkThrough.embeddedEditorBackground#272D38
  • widget.shadow#11141AB3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#d9d7ceff
comment, punctuation.definition.comment, comment.line.toml#798593
variable,#d9d7ceff
storage.modifier#57ff87
storage.type, keyword.other.rust#9b9dfc
keyword.operator.arrow.skinny.rust, punctuation.brackets.angle, keyword.operator.key-value, punctuation.comma#D9D7CE
keyword.other.fn#f7843d
entity.name.function#f4ae64
entity.name.type#6fddeb
keyword.operator.math#fbdeb0
constant.other.color, meta.tag, punctuation.separator.inheritance.php, punctuation.section.embedded, keyword.other.substitution#dbeff8
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#5CCFE6
meta.tag.jsx#D9D7CE
meta.attribute#949494
support.other.variable, string.other.link#F07178
constant.numeric, constant.language, support.constant, constant.character, variable.parameter, keyword.other.unit#e0aaff
string, keyword.other.template, 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#BAE67E
entity.name.class, entity.name.type.class, entity.name.instance, entity.name.type.instance, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter#5CCFE6
entity.name.module, entity.name.type.module, variable.import.parameter, variable.other.class#5CCFE6
variable.language#5CCFE6italic
invalid#f55454
invalid.deprecated#FFFFFF
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#5CCFE690
entity.other.attribute-name#FFAE57
markup.inserted#BAE67E
markup.deleted#5CCFE6
markup.changed#FFAE57
string.regexp, constant.character.escape#95E6CB
*url*, *link*, *uri*underline
constant.numeric.line-number.find-in-files - match#5C6773
entity.name.filename.find-in-files#BAE67E
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#4cffa5italic
source.js constant.other.object.key.js string.unquoted.label.js#5CCFE6italic
entity.name.method.js#FFC44C
markup.italic#F07178italic
markup.bold#F07178bold
markup.underline#D4BFFFunderline
markup.strike#FFC44C
markup.quote#80D4FFitalic
markup.fenced_code.block.markdown#FFAE57
markup.table#5CCFE6
text.html.markdown, punctuation.definition.list_item.markdown#D9D7CE
text.html.markdown markup.inline.raw.string.markdown#5CCFE6
text.html.markdown meta.dummy.line-break#5C6773
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#BAE67E
markup.quote, punctuation.definition.blockquote.markdown#80D4FFitalic
string.other.link.title.markdown#FFC44Cunderline
markup.raw.block.fenced.markdown#D9D7CE
punctuation.definition.fenced.markdown, variable.language.fenced.markdown#5C6773
variable.language.fenced.markdown#5C6773
meta.separator#5C6773bold
gutter_color#FFFFFF
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
markup.italic#F07178italic
markup.bold#F07178bold
markup.underline#D4BFFFunderline
markup.strike#FFC44C
markup.quote#80D4FFitalic
markup.fenced_code.block.markdown#FFAE57
markup.table#5CCFE6
text.html.markdown, punctuation.definition.list_item.markdown#D9D7CE
text.html.markdown markup.inline.raw.string.markdown#5CCFE6
text.html.markdown meta.dummy.line-break#5C6773
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#BAE67E
markup.quote, punctuation.definition.blockquote.markdown#80D4FFitalic
string.other.link.title.markdown#FFC44Cunderline
markup.raw.block.fenced.markdown#D9D7CE
punctuation.definition.fenced.markdown, variable.language.fenced.markdown#5C6773
variable.language.fenced.markdown#5C6773
meta.separator#5C6773bold
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#5CCFE6
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#5CCFE6
source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#5CCFE6
source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#5CCFE6
source.json meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#5CCFE6
source.json meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#5CCFE6
source.json meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#5CCFE6
source.json meta meta.structure.dictionary.json string.quoted.double.json - meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta.structure.dictionary.json punctuation.definition.string - meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#5CCFE6
source.json meta.structure.dictionary.json string.quoted.double.json - meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta.structure.dictionary.json punctuation.definition.string - meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#5CCFE6
acejump.label.blue#FFFFFF
acejump.label.green#FFFFFF
acejump.label.orange#FFFFFF
acejump.label.purple#FFFFFF
sublimelinter.mark.warning#5CCFE6
sublimelinter.gutter-mark#FFFFFF
sublimelinter.mark.error#FF3333
markup.ignored.git_gutter#5C6773
markup.untracked.git_gutter#5C6773
gutter_color#FFFFFF
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
darkoo by bambooyuh - VS Code Theme