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#0c0e10
  • activityBar.foreground#dfdfdf
  • activityBarBadge.background#007aae8e
  • activityBarBadge.foreground#dfdfdf
  • badge.background#007aae8e
  • badge.foreground#dfdfdf
  • button.background#8a9daf
  • button.foreground#dfdfdf
  • dropdown.background#0c0e10
  • dropdown.border#0c0e10
  • dropdown.foreground#dfdfdf
  • editor.background#101316
  • editor.foreground#dfdfdf
  • editor.hoverHighlightBackground#007aae8e
  • editor.lineHighlightBackground#1b2025
  • editor.selectionBackground#007aae8e
  • editor.wordHighlightBackground#d2e0ff2f
  • editor.wordHighlightStrongBackground#abb2bf26
  • editorBracketMatch.background#007aae8e
  • editorBracketMatch.border#8a9daf
  • editorCursor.foreground#dfdfdf
  • editorGroup.border#3b4651
  • editorGroupHeader.tabsBackground#1b2025
  • editorGutter.addedBackground#a7da1e
  • editorGutter.background#0c0e10
  • editorGutter.deletedBackground#e61f44
  • editorGutter.modifiedBackground#f7b83d
  • editorIndentGuide.activeBackground#dfdfdf
  • editorIndentGuide.background#3b4651
  • editorLineNumber.activeForeground#dfdfdf
  • editorLineNumber.foreground#3b4651
  • editorLink.activeForeground#007aae8e
  • editorOverviewRuler.addedForeground#a7da1e
  • editorOverviewRuler.deletedForeground#e61f44
  • editorOverviewRuler.errorForeground#e61f44
  • editorOverviewRuler.findMatchForeground#8a9daf
  • editorOverviewRuler.infoForeground#dfdfdf
  • editorOverviewRuler.modifiedForeground#f7b83d
  • editorOverviewRuler.warningForeground#f7b83d
  • editorRuler.foreground#101316
  • editorSuggestWidget.foreground#dfdfdf
  • editorSuggestWidget.highlightForeground#007aae8e
  • editorSuggestWidget.selectedBackground#3b4651
  • editorWhitespace.foreground#3b4651
  • editorWidget.background#101316
  • editorWidget.border#3b4651
  • extensionButton.prominentBackground#007aae8e
  • extensionButton.prominentForeground#dfdfdf
  • extensionButton.prominentHoverBackground#edce72
  • focusBorder#007aae8e
  • foreground#dfdfdf
  • gitDecoration.conflictingResourceForeground#dfdfdf
  • gitDecoration.deletedResourceForeground#e61f44
  • gitDecoration.ignoredResourceForeground#3b4651
  • gitDecoration.modifiedResourceForeground#f7b83d
  • gitDecoration.untrackedResourceForeground#a7da1e
  • input.background#0c0e10
  • input.border#3b4651
  • input.foreground#dfdfdf
  • input.placeholderForeground#3b4651
  • inputOption.activeBorder#8a9daf
  • list.activeSelectionBackground#8a9daf
  • list.activeSelectionForeground#101316
  • list.focusBackground#3b4651
  • list.hoverBackground#1b2025
  • list.inactiveSelectionBackground#242b31
  • notifications.background#1b2025
  • notifications.foreground#dfdfdf
  • panel.background#0c0e10
  • panel.border#3b4651
  • panelTitle.activeBorder#007aae8e
  • panelTitle.inactiveForeground#60778c
  • peekView.border#007aae8e
  • peekViewEditor.background#07090a
  • peekViewEditor.matchHighlightBackground#8a9daf
  • peekViewEditorGutter.background#0c0e10
  • peekViewResult.background#1b2025
  • peekViewResult.fileForeground#dfdfdf
  • peekViewResult.lineForeground#8a9daf
  • peekViewResult.matchHighlightBackground#8a9daf
  • peekViewResult.selectionBackground#101316
  • peekViewResult.selectionForeground#dfdfdf
  • peekViewTitle.background#0c0e10
  • peekViewTitleDescription.foreground#dfdfdf
  • peekViewTitleLabel.foreground#dfdfdf
  • progressBar.background#dfdfdf
  • scrollbar.shadow#0c0e10
  • scrollbarSlider.activeBackground#007aae8e
  • scrollbarSlider.background#3b4651
  • scrollbarSlider.hoverBackground#007aae8e
  • sideBar.background#101316
  • sideBar.foreground#dfdfdf
  • sideBarSectionHeader.background#0c0e10
  • sideBarSectionHeader.foreground#dfdfdf
  • statusBar.background#007aae8e
  • statusBar.foreground#dfdfdf
  • statusBar.noFolderBackground#8a9daf
  • tab.activeBackground#007aae8e
  • tab.inactiveBackground#1b2025
  • tab.inactiveForeground#60778c
  • terminal.ansiBlack#1b2025
  • terminal.ansiBlue#007aae8e
  • terminal.ansiBrightBlack#3b4651
  • terminal.ansiBrightBlue#dfdfdf
  • terminal.ansiBrightCyan#00eeff
  • terminal.ansiBrightGreen#00c200
  • terminal.ansiBrightMagenta#edce72
  • terminal.ansiBrightRed#e61f44
  • terminal.ansiBrightWhite#dfdfdf
  • terminal.ansiBrightYellow#dfdfdf
  • terminal.ansiCyan#0490a0
  • terminal.ansiGreen#019d76
  • terminal.ansiMagenta#9100ae
  • terminal.ansiRed#e61f44
  • terminal.ansiWhite#dfdfdf
  • terminal.ansiYellow#a7da1e
  • terminal.background#0c0e10
  • terminal.foreground#dfdfdf
  • titleBar.activeBackground#07090a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#60778c
string#5c921f
constant.numeric#15b8ae
constant.language#019d76
constant.character, constant.other#019d76
variable#ff4112
keyword#007aae
storage#9d0169italic
storage.type#007aae
entity.name.class#004eb4underline
entity.other.inherited-class#019d76
entity.name.function#95b815
variable.parameter#ff36dd
entity.name.tag#00b972
entity.other.attribute-name#a09e29
support.function#019d76
support.constant#019d76
support.type, support.class#019d76
support.other.variable
invalid#e61f44
invalid.deprecated#e61f44
meta.structure.dictionary.json string.quoted.double.json#15b8ae
meta.diff, meta.diff.header#60778c
markup.deleted#e61f44
markup.inserted#a7da1e
markup.changed#f7b83d
constant.numeric.line-number.find-in-files - match#a7da1e
entity.name.filename.find-in-files#edce72
keyword.other#ff90a3
meta.property-value, support.constant.property-value, constant.other.color#15B8AE
meta.structure.dictionary.json string.quoted.double.json#019d76
meta.structure.dictionary.value.json string.quoted.double.json#85bebb
meta.property-name support.type.property-name#578cffitalic
meta.property-value punctuation.separator.key-value#ff5555
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as#007aae
meta.use support.class.builtin, meta.other.inherited-class support.class.builtin#007aae
variable.other#50f9ff
variable.parameter.function.coffee#15b8ae
entity.name.section.markdown#019d76
punctuation.definition.heading.markdown#007aae
markup.raw.inline.markdown#15b8ae
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#007aae
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#007aae
punctuation.definition.metadata.markdown#007aae
markup.underline.link.markdown, markup.underline.link.image.markdown, meta.image.inline.markdown#007aae
markup.bold.markdown, markup.italic.markdown#007aae
markup.italic.markdownitalic
markup.bold.markdownbold
markup.raw.block.markdown#0490a0
markup.deleted.git_gutter#e61f44
markup.inserted.git_gutter#a7da1e
markup.changed.git_gutter#f7b83d
meta.template.expression#dfdfdf
meta.embedded.block.php#ef77ff
text.html.derivative#e3ffe2
Ramita Oliva by Cristofacha - VS Code Theme