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.activeBorder#62FECA
  • activityBar.activeFocusBorder#62FECA
  • activityBar.background#0d0d10
  • activityBar.foreground#FFFFFF
  • activityBar.inactiveForeground#6D6D7A
  • activityBarBadge.background#62A8FE
  • activityBarBadge.foreground#18181C
  • badge.background#8974FF
  • badge.foreground#FFFFFF
  • button.background#62FECA
  • button.foreground#18181C
  • button.hoverBackground#9AFFDE
  • button.secondaryBackground#34343D
  • button.secondaryForeground#E0E0E0
  • button.secondaryHoverBackground#464652
  • descriptionForeground#A0A0AE
  • diffEditor.insertedTextBackground#1AFF9020
  • diffEditor.removedTextBackground#FE626220
  • dropdown.background#202026
  • dropdown.border#44444E
  • dropdown.foreground#E0E0E0
  • editor.background#18181C
  • editor.findMatchBackground#FEE462CC
  • editor.findMatchForeground#18181C
  • editor.findMatchHighlightBackground#FEE46255
  • editor.findRangeHighlightBackground#8974FF20
  • editor.foreground#E0E0E0
  • editor.hoverHighlightBackground#62FECA18
  • editor.inactiveSelectionBackground#383840
  • editor.lineHighlightBackground#212127
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#4D4D58
  • editor.selectionHighlightBackground#62A8FE4A
  • editor.wordHighlightBackground#62A8FE40
  • editor.wordHighlightStrongBackground#FE62B540
  • editorBracketHighlight.foreground1#FE62B5
  • editorBracketHighlight.foreground2#8974FF
  • editorBracketHighlight.foreground3#62A8FE
  • editorBracketHighlight.foreground4#62FECA
  • editorBracketHighlight.foreground5#FEE462
  • editorBracketHighlight.foreground6#FE6262
  • editorBracketHighlight.unexpectedBracket.foreground#FE6262
  • editorBracketPairGuide.background1#FE62B540
  • editorBracketPairGuide.background2#8974FF40
  • editorBracketPairGuide.background3#62A8FE40
  • editorBracketPairGuide.background4#62FECA40
  • editorBracketPairGuide.background5#FEE46240
  • editorBracketPairGuide.background6#FE626240
  • editorCursor.background#18181C
  • editorCursor.foreground#62FECA
  • editorError.foreground#FE6262
  • editorGroup.border#303038
  • editorGroupHeader.tabsBackground#111114
  • editorHint.foreground#62FECA
  • editorHoverWidget.background#202026
  • editorHoverWidget.border#44444E
  • editorIndentGuide.activeBackground1#62FECA80
  • editorIndentGuide.background1#44444E80
  • editorInfo.foreground#62A8FE
  • editorLineNumber.activeForeground#62FECA
  • editorLineNumber.foreground#666674
  • editorSuggestWidget.background#202026
  • editorSuggestWidget.border#44444E
  • editorSuggestWidget.foreground#E0E0E0
  • editorSuggestWidget.highlightForeground#62FECA
  • editorWarning.foreground#FEC062
  • editorWhitespace.foreground#44444E
  • editorWidget.background#202026
  • editorWidget.border#44444E
  • errorForeground#FE6262
  • focusBorder#62FECA99
  • foreground#E0E0E0
  • gitDecoration.addedResourceForeground#62FECA
  • gitDecoration.deletedResourceForeground#FE6262
  • gitDecoration.modifiedResourceForeground#FEE462
  • gitDecoration.renamedResourceForeground#62A8FE
  • gitDecoration.untrackedResourceForeground#1AFF90
  • icon.foreground#B8B8C4
  • input.background#24242B
  • input.border#44444E
  • input.foreground#E0E0E0
  • input.placeholderForeground#858594
  • inputOption.activeBackground#8974FF55
  • inputOption.activeBorder#8974FF
  • list.activeSelectionBackground#2A2A33
  • list.activeSelectionForeground#62FECA
  • list.focusHighlightForeground#62FECA
  • list.hoverBackground#25252C
  • list.hoverForeground#FFFFFF
  • list.inactiveSelectionBackground#222229
  • menu.background#202026
  • menu.foreground#E0E0E0
  • menu.selectionBackground#2A2A33
  • menu.selectionForeground#62FECA
  • menu.separatorBackground#44444E
  • minimap.errorHighlight#FE6262
  • minimap.findMatchHighlight#FEE462
  • minimap.selectionHighlight#8974FF88
  • minimap.warningHighlight#FEC062
  • notificationCenter.border#44444E
  • notificationCenterHeader.background#202026
  • notifications.background#202026
  • notifications.border#44444E
  • notifications.foreground#E0E0E0
  • panel.background#18181C
  • panel.border#303038
  • panelTitle.activeBorder#62FECA
  • panelTitle.activeForeground#62FECA
  • panelTitle.inactiveForeground#858594
  • peekView.border#62FECA
  • peekViewEditor.background#18181C
  • peekViewResult.background#202026
  • peekViewTitle.background#62FECA
  • peekViewTitleLabel.foreground#18181C
  • quickInput.background#202026
  • quickInput.foreground#E0E0E0
  • quickInputList.focusBackground#2A2A33
  • quickInputList.focusForeground#62FECA
  • scrollbar.shadow#00000050
  • scrollbarSlider.activeBackground#8974FF99
  • scrollbarSlider.background#55556566
  • scrollbarSlider.hoverBackground#73738288
  • selection.background#8974FF66
  • sideBar.background#18181C
  • sideBar.border#303038
  • sideBar.foreground#D8D8DE
  • sideBarSectionHeader.background#202026
  • sideBarSectionHeader.border#303038
  • sideBarSectionHeader.foreground#FFFFFF
  • sideBarTitle.foreground#A9A9B5
  • statusBar.background#18181C
  • statusBar.border#303038
  • statusBar.debuggingBackground#62FECA
  • statusBar.debuggingForeground#18181C
  • statusBar.foreground#D8D8DE
  • statusBar.noFolderBackground#111114
  • statusBarItem.hoverBackground#34343D
  • statusBarItem.prominentBackground#8974FF
  • statusBarItem.prominentForeground#FFFFFF
  • tab.activeBackground#18181C
  • tab.activeBorder#00000000
  • tab.activeBorderTop#62FECA
  • tab.activeForeground#FFFFFF
  • tab.border#303038
  • tab.hoverBackground#24242B
  • tab.hoverForeground#FFFFFF
  • tab.inactiveBackground#111114
  • tab.inactiveForeground#858594
  • tab.unfocusedActiveBorderTop#62FECA88
  • terminal.ansiBlack#18181C
  • terminal.ansiBlue#62A8FE
  • terminal.ansiBrightBlue#62A8FE
  • terminal.ansiBrightCyan#62FECA
  • terminal.ansiBrightGreen#62fe9b
  • terminal.ansiBrightMagenta#FE62B5
  • terminal.ansiBrightRed#FE6262
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FEE462
  • terminal.ansiCyan#62FECA
  • terminal.ansiGreen#1aff90
  • terminal.ansiMagenta#FE62B5
  • terminal.ansiRed#FE6262
  • terminal.ansiWhite#E0E0E0
  • terminal.ansiYellow#FEE462
  • terminal.background#18181C
  • terminal.foreground#E0E0E0
  • terminal.selectionBackground#8974FF55
  • terminalCursor.foreground#62FECA
  • titleBar.activeBackground#111114
  • titleBar.activeForeground#E0E0E0
  • titleBar.border#303038
  • titleBar.inactiveBackground#111114
  • titleBar.inactiveForeground#858594

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9393A3italic
variable, string constant.other.placeholder#e0e0e0—
constant.other.color#ffffff—
invalid, invalid.illegal#FE6262—
keyword, storage.type, storage.modifier#62A8FE—
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#62A8FE—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#62FECA—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#FEE462—
meta.block variable.other#FE6262—
support.other.variable, string.other.link#FE6262—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#62FECA—
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#1aff90—
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#62FECA—
support.type#B2CCD6—
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#B2CCD6—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FE6262—
variable.language#FE6262italic
entity.name.method.js#8974FFitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#62A8FE—
entity.other.attribute-name#FE62B5—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#ff36c3italic
entity.other.attribute-name.class#62feb3—
source.sass keyword.control#8974FF—
markup.inserted#62feb8—
markup.deleted#FE6262—
markup.changed#ff74ff—
string.regexp#62FECA—
constant.character.escape#62FECA—
*url*, *link*, *uri*—underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#8974FFitalic
source.js constant.other.object.key.js string.unquoted.label.js#FE6262italic
source.json meta.structure.dictionary.json support.type.property-name.json#8974FF—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#62fefb—
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#62f9fe—
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#FE6262—
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#62fe81—
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#8974FF—
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#FE62B5—
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#8974FF—
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#62feba—
text.html.markdown, punctuation.definition.list_item.markdown#e0e0e0—
text.html.markdown markup.inline.raw.markdown#8974FF—
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#62fe81—
markup.italic#62fecfitalic
markup.bold, markup.bold string#62fecfbold
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#62fecfbold
markup.underline#62fecfunderline
markup.quote punctuation.definition.blockquote.markdown#567b97—
markup.quote—italic
string.other.link.title.markdown#8974FF—
string.other.link.description.title.markdown#8974FF—
constant.other.reference.link.markdown#62cffe—
markup.raw.block#8974FF—
markup.raw.block.fenced.markdown#00000050—
punctuation.definition.fenced.markdown#00000050—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#e0e0e0—
variable.language.fenced.markdown#65737e—
meta.separator#65737ebold
markup.table#e0e0e0—
punctuation.parenthesis.python, punctuation.parenthesis.begin.python, punctuation.parenthesis.end.python, punctuation.definition.arguments.begin.python, punctuation.definition.arguments.end.python, punctuation.definition.parameters.begin.python, punctuation.definition.parameters.end.python, punctuation.definition.list.begin.python, punctuation.definition.list.end.python, punctuation.definition.dict.begin.python, punctuation.definition.dict.end.python, punctuation.separator.arguments.python, punctuation.separator.element.python, punctuation.separator.parameters.python, punctuation.section.class.begin.python#E0E0E0
support.type.python, support.type.exception.python, support.type.metaclass.python, meta.indexed-name.python#62FECA
entity.name.function.decorator.python, meta.function.decorator.python entity.name.function, meta.function-call.generic.python, support.function.builtin.python#FEE462
variable.parameter.function-call.python#FE62B5
constant.language.python#FE6262
string.quoted.single.python punctuation.definition.string, string.quoted.double.python punctuation.definition.string, string.quoted.multi.python punctuation.definition.string#1AFF90
meta.function-call.arguments.python#E0E0E0
Nicely Neon Theme by eight84 - VS Code Theme