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#2F2F40
  • activityBar.foreground#F0E0B8
  • activityBarBadge.background#5D8091
  • activityBarBadge.foreground#F0E0B8
  • badge.background#2F2F40
  • button.background#2F2F40
  • button.secondaryBackground#273C59
  • button.secondaryForeground#F0E0B8
  • checkbox.border#273C59
  • debugToolBar.background#17171E
  • descriptionForeground#F0E0B8
  • diffEditor.insertedTextBackground#35442F
  • dropdown.background#17171E
  • dropdown.border#17171E
  • editor.background#212129
  • editor.findMatchBackground#375D78
  • editor.findMatchBorder#EA8F32
  • editor.findMatchHighlightBackground#375D78
  • editor.foreground#F0E0B8
  • editor.lineHighlightBackground#2F2F40
  • editor.selectionBackground#273C59
  • editor.selectionHighlightBackground#3C3C51
  • editor.selectionHighlightBorder#545474
  • editor.wordHighlightBackground#3C3C514d
  • editor.wordHighlightBorder#545474
  • editor.wordHighlightStrongBackground#3C3C514d
  • editor.wordHighlightStrongBorder#545474
  • editorBracketHighlight.foreground1#9074BC
  • editorBracketHighlight.foreground2#F0A273
  • editorBracketHighlight.foreground3#6A89C8
  • editorBracketHighlight.foreground4#F96575
  • editorBracketHighlight.foreground5#E192AB
  • editorBracketHighlight.foreground6#6FB7A9
  • editorBracketHighlight.unexpectedBracket.foreground#FC4C52
  • editorBracketMatch.background#17171E
  • editorBracketMatch.border#545474
  • editorBracketPairGuide.activeBackground1#9074BC
  • editorBracketPairGuide.activeBackground2#F0A273
  • editorBracketPairGuide.activeBackground3#6A89C8
  • editorBracketPairGuide.activeBackground4#F96575
  • editorBracketPairGuide.activeBackground5#E192AB
  • editorBracketPairGuide.activeBackground6#6FB7A9
  • editorCursor.background#F0E0B8
  • editorCursor.foreground#F0E0B8
  • editorError.foreground#D51F1F
  • editorGroup.border#17171E
  • editorGroupHeader.tabsBackground#17171E
  • editorGutter.addedBackground#73876A
  • editorGutter.deletedBackground#BD354B
  • editorGutter.modifiedBackground#C8985D
  • editorHoverWidget.background#212129
  • editorHoverWidget.border#2F2F40
  • editorHoverWidget.highlightForeground#5D8091
  • editorIndentGuide.activeBackground#3C3C51
  • editorIndentGuide.background#2F2F40
  • editorInlayHint.background#212129
  • editorInlayHint.foreground#6C6E73
  • editorLineNumber.activeForeground#9074BC
  • editorLineNumber.foreground#545474
  • editorMarkerNavigation.background#3C3C51
  • editorRuler.foreground#3C3C51
  • editorSuggestWidget.background#273C59
  • editorSuggestWidget.border#273C59
  • editorSuggestWidget.selectedBackground#375D78
  • editorWarning.foreground#EA8F32
  • editorWhitespace.foreground#212129
  • editorWidget.background#212129
  • focusBorder#273C59
  • gitDecoration.ignoredResourceForeground#6C6E73
  • input.background#17171E
  • list.activeSelectionBackground#3C3C51
  • list.activeSelectionForeground#F0E0B8
  • list.focusBackground#2F2F40
  • list.focusForeground#F0E0B8
  • list.highlightForeground#6A89C8
  • list.hoverBackground#3C3C51
  • list.hoverForeground#F0E0B8
  • list.inactiveSelectionBackground#2F2F40
  • list.inactiveSelectionForeground#F0E0B8
  • list.warningForeground#EA8F32
  • menu.foreground#F0E0B8
  • menu.separatorBackground#17171E
  • minimapGutter.addedBackground#73876A
  • minimapGutter.deletedBackground#BD354B
  • minimapGutter.modifiedBackground#C8985D
  • panel.border#17171E
  • panelSectionHeader.background#212129
  • peekView.border#545474
  • peekViewEditor.background#2F2F40
  • peekViewEditor.matchHighlightBackground#375D78
  • peekViewResult.background#3C3C51
  • scrollbar.shadow#3C3C51
  • scrollbarSlider.activeBackground#6f6f9080
  • scrollbarSlider.background#54547466
  • scrollbarSlider.hoverBackground#54547480
  • settings.focusedRowBackground#3C3C51
  • settings.headerForeground#F0E0B8
  • sideBar.background#212129
  • sideBar.border#17171E
  • sideBar.foreground#F0E0B8
  • sideBarSectionHeader.background#3C3C51
  • sideBarSectionHeader.foreground#F0E0B8
  • statusBar.background#17171E
  • statusBar.debuggingBackground#D51F1F
  • statusBar.debuggingBorder#9074BC
  • statusBar.debuggingForeground#F0E0B8
  • statusBar.foreground#BFB891
  • statusBar.noFolderBackground#212129
  • statusBarItem.hoverBackground#3C3C51
  • statusBarItem.remoteBackground#375D78
  • statusBarItem.remoteForeground#F0E0B8
  • tab.activeBackground#3C3C51
  • tab.activeForeground#F0E0B8
  • tab.border#17171E
  • tab.hoverBackground#545474
  • tab.inactiveBackground#212129
  • tab.unfocusedHoverBackground#2F2F40
  • terminal.ansiBlack#212129
  • terminal.ansiBlue#5D8091
  • terminal.ansiBrightBlack#2F2F40
  • terminal.ansiBrightBlue#71B5D2
  • terminal.ansiBrightCyan#B2E6E7
  • terminal.ansiBrightGreen#ABCE7F
  • terminal.ansiBrightMagenta#F96575
  • terminal.ansiBrightRed#FC4C52
  • terminal.ansiBrightWhite#F0E0B8
  • terminal.ansiBrightYellow#E192AB
  • terminal.ansiCyan#91A7D4
  • terminal.ansiGreen#73876A
  • terminal.ansiMagenta#9074BC
  • terminal.ansiRed#D51F1F
  • terminal.ansiWhite#F0E0B8
  • terminal.ansiYellow#EA8F32
  • terminal.background#212129
  • terminal.border#17171E
  • terminal.foreground#F0E0B8
  • terminal.selectionBackground#273C59
  • textBlockQuote.background#212129
  • textBlockQuote.border#17171E
  • textLink.foreground#5C8B7E
  • textPreformat.foreground#EA8F32
  • titleBar.activeBackground#3C3C51
  • titleBar.activeForeground#F0E0B8
  • titleBar.inactiveBackground#212129
  • titleBar.inactiveForeground#F0E0B8
  • walkThrough.embeddedEditorBackground#212129

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6C6E73
variable, string constant.other.placeholder#F0E0B8
constant.other.color#F0A273
invalid, invalid.illegal#D51F1F
storage.type#9074BC
storage.modifier#9074BC
keyword.control.flow, keyword.control.conditional, keyword.control.loop#9074BCbold
keyword.control, constant.other.color, meta.tag, keyword.other.template, keyword.other.substitution, keyword.other#9074BC
keyword.other.definition.ini#F0A273
keyword.control.trycatch#FC4C52bold
keyword.other.unit, keyword.operator#F4D191
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, meta.brace, keyword.operator.type.annotation, keyword.operator.namespace#91A7D4
entity.name.tag, meta.tag.sgml#E192AB
entity.name.tag.html#9074BC
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#6A89C8
entity.name.function.macro#F0A273
meta.block variable.other#F0E0B8
support.other.variable#F0E0B8
string.other.link#F0A273
constant.numeric, constant.language, support.constant, constant.character, constant.escape#71B5D2
constant.language.boolean#F0A273
constant.numeric#F96575
string, punctuation.definition.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, markup.inline.raw.string#ABCE7F
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, support.type.sys-types#6FB7A9
entity.name.type.module, entity.name.namespace#F0E0B8
entity.name.import.go#ABCE7F
variable.other.property#E192AB
keyword.control.import, keyword.import, meta.import#F0A273
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#6FB7A9
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FC4C52
variable.language#FC4C52
entity.name.method.js#6A89C8
meta.class-method.js entity.name.function.js, variable.function.constructor#6A89C8
entity.other.attribute-name#9074BC
entity.other.attribute-name.html, entity.other.attribute-name, invalid.deprecated.entity.other.attribute-name.html#E192AB
entity.other.attribute-name.class#E192AB
source.sass keyword.control#71B5D2
markup.inserted#73876A
markup.deleted#BD354B
markup.changed#C8985D
string.regexp#71B5D2
constant.character.escape#71B5D2
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#9074BC
source.js constant.other.object.key.js string.unquoted.label.js#FC4C52
source.json meta.structure.dictionary.json support.type.property-name.json#F96575
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#E192AB
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#F0A273
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#FC4C52
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#F0A273
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#6A89C8
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#F96575
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#9074BC
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#ABCE7F
text.html.markdown, punctuation.definition.list_item.markdown#F0E0B8
text.html.markdown markup.inline.raw.markdown#9074BC
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#9074BC
markdown.heading, entity.name.section.markdown, markup.heading.markdown#6A89C8
markup.italic#FC4C52italic
markup.bold, markup.bold stringbold
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#FC4C52bold
markup.underline#71B5D2underline
markup.quote punctuation.definition.blockquote.markdown#6C6E73
markup.quoteitalic
string.other.link.title.markdown#F0A273
string.other.link.description.title.markdown#9074BC
constant.other.reference.link.markdown#E192AB
markup.raw.block#9074BC
markup.raw.block.fenced.markdown#6C6E73
punctuation.definition.fenced.markdown#6C6E73
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#F0E0B8
variable.language.fenced.markdown#6C6E73
meta.separator#91A7D4bold
markup.table#F0E0B8
Hulcu by Slobodan Živanović - VS Code Theme