Skip to main content
CodingTheme

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#17171b
  • activityBar.border#111
  • activityBar.foreground#f13016
  • activityBarBadge.background#f13016
  • activityBarBadge.foreground#ffffff
  • badge.background#f13016
  • badge.foreground#ffffff
  • button.background#f13016
  • button.hoverBackground#991c0c
  • diffEditor.insertedTextBackground#24c41638
  • editor.background#1f1f25
  • editor.findMatchBackground#f13016
  • editor.findMatchHighlightBackground#500c03
  • editor.foreground#ffffff
  • editor.lineHighlightBackground#111111
  • editor.selectionBackground#4d4d4d
  • editor.selectionHighlightBackground#f13016
  • editorBracketMatch.border#f13016
  • editorCursor.foreground#f13016
  • editorGroup.border#f13016
  • editorLink.activeForeground#f13016
  • editorWhitespace.foreground#4d4d4d
  • foreground#ffffff
  • input.background#1f1f25
  • input.border#991c0c
  • inputOption.activeBorder#f13016
  • list.activeSelectionBackground#991c0c
  • list.dropBackground#f13016
  • list.focusBackground#991c0c
  • list.hoverBackground#991c0c
  • list.inactiveSelectionBackground#991c0c
  • panel.background#17171b
  • panelTitle.activeBorder#f13016
  • peekViewEditor.background#17171b
  • peekViewEditor.matchHighlightBackground#500c03
  • peekViewEditorGutter.background#17171b
  • peekViewResult.selectionBackground#17171b
  • pickerGroup.foreground#f13016
  • progressBar.background#f13016
  • scrollbarSlider.activeBackground#f13016
  • scrollbarSlider.background#991c0c
  • scrollbarSlider.hoverBackground#b8230f
  • selection.background#b8230f
  • sideBar.background#17171b
  • statusBar.background#111111
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#991c0c
  • tab.activeBackground#991c0c
  • tab.activeBorder#991c0c
  • textLink.activeForeground#991c0c
  • textLink.foreground#f13016

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#f8f8f2
comment#6272A4
string#FCFC60
constant.numeric#bd93f9
constant.language#bd93f9
constant.character, constant.other#bd93f9
variable
variable.other.readwrite.instance#ffb86c
constant.character.escaped, constant.character.escape, string source, string source.ruby#ff79c6
source.ruby string.regexp.classic.ruby, source.ruby string.regexp.mod-r.ruby#ff5555
keyword#ff79c6
storage#ff79c6
storage.type#8be9fditalic
storage.type.namespace#8be9fditalic
storage.type.class#ff79c6italic
entity.name.class#8be9fdunderline
meta.path#66d9efunderline
entity.other.inherited-class#8be9fditalic underline
entity.name.function#50fa7b
variable.parameter#ffb86citalic
entity.name.tag#ff79c6
entity.other.attribute-name#50fa7b
support.function#8be9fd
support.constant#6be5fd
support.type, support.class#66d9efitalic
support.other.variable
support.other.namespace#66d9efitalic
invalid#F8F8F0
invalid.deprecated#F8F8F0
meta.structure.dictionary.json string.quoted.double.json#CFCFC2
meta.diff, meta.diff.header#6272a4
markup.deleted#ff79c6
markup.inserted#50fa7b
markup.changed#E6DB74
constant.numeric.line-number.find-in-files - match#bd93f9
entity.name.filename#E6DB74
message.error#F83333
punctuation.definition.string.begin.json - meta.structure.dictionary.value.json, punctuation.definition.string.end.json - meta.structure.dictionary.value.json#EEEEEE
meta.structure.dictionary.json string.quoted.double.json#8be9fd
meta.structure.dictionary.value.json string.quoted.double.json#f1fa8c
meta meta meta meta meta meta meta.structure.dictionary.value string#50fa7b
meta meta meta meta meta meta.structure.dictionary.value string#ffb86c
meta meta meta meta meta.structure.dictionary.value string#ff79c6
meta meta meta meta.structure.dictionary.value string#bd93f9
meta meta meta.structure.dictionary.value string#50fa7b
meta meta.structure.dictionary.value string#ffb86c
markup.strike#FFB86Citalic
markup.bold#FFB86Cbold
markup.italic#FFB86Citalic
markup.heading#8BE9FD
punctuation.definition.list_item.markdown#FF79C6
markup.quote#6272A4italic
punctuation.definition.blockquote.markdown#6272A4italic
meta.separator#6272A4
text.html.markdown markup.raw.inline#50FA7B
markup.underline#BD93F9underline
markup.raw.block#CFCFC2
markup.raw.block.fenced.markdown source#F8F8F2
punctuation.definition.fenced.markdown, variable.language.fenced.markdown#6272A4italic
variable.language.fenced.markdown#6272A4italic
punctuation.accessor#FF79C6
meta.function.return-type#FF79C6
punctuation.section.block.begin#ffffff
punctuation.section.block.end#ffffff
punctuation.section.embedded.begin#ff79c6
punctuation.section.embedded.end#ff79c6
punctuation.separator.namespace#ff79c6
variable.function#50fa7b
variable.other#ffffff
variable.language#bd93f9
entity.name.module.ruby#8be9fd
entity.name.constant.ruby#bd93f9
support.function.builtin.ruby#ffffff
storage.type.namespace.cs#ff79c6
entity.name.namespace.cs#8be9fd

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

RedNeon by Futureglobe - VS Code Theme