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#23272e
  • activityBar.border#23272e
  • activityBarBadge.background#3e4556
  • badge.background#21242a
  • debugToolBar.background#21242a
  • editor.background#282c34
  • editor.findMatchBackground#2257a0
  • editor.foreground#bbc2cf
  • editor.selectionBackground#2257a0
  • editorCursor.foreground#51afef
  • editorError.foreground#ff6c6b
  • editorGroupHeader.tabsBackground#21242a
  • editorGutter.addedBackground#98be65
  • editorGutter.deletedBackground#ff6c6b
  • editorGutter.modifiedBackground#da8548
  • editorIndentGuide.background#3f444a
  • editorWarning.foreground#ecbe7b
  • list.hoverBackground#3f444a
  • list.inactiveSelectionBackground#2257a0
  • minimapGutter.addedBackground#98be65
  • minimapGutter.deletedBackground#ff6c6b
  • minimapGutter.modifiedBackground#da8548
  • panelTitle.activeBorder#51afef
  • scrollbarSlider.activeBackground#51afef
  • scrollbarSlider.hoverBackground#2257A0
  • sideBar.background#21242a
  • sideBar.foreground#bbc2cf
  • sideBarSectionHeader.background#21252b
  • sideBarSectionHeader.foreground#bbc2cf
  • sideBarTitle.foreground#bbc2cf
  • statusBar.background#23272e
  • statusBar.debuggingBackground#ff6c6b
  • statusBar.debuggingForeground#bbc2cf
  • statusBar.noFolderBackground#3e4556
  • statusBarItem.activeBackground#5b626880
  • statusBarItem.hoverBackground#282c34
  • statusBarItem.remoteBackground#51AFEF
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBorderTop#51afef
  • tab.hoverBackground#23272e
  • tab.inactiveBackground#21242a
  • terminal.ansiBlack#1B2229
  • terminal.ansiBlue#51afef
  • terminal.ansiBrightBlack#3f444a
  • terminal.ansiBrightBlue#51afef
  • terminal.ansiBrightCyan#46d9ff
  • terminal.ansiBrightGreen#98be65
  • terminal.ansiBrightMagenta#a9a1e1
  • terminal.ansiBrightRed#ff6c6b
  • terminal.ansiBrightWhite#efefef
  • terminal.ansiBrightYellow#ecbe7b
  • terminal.ansiCyan#46d9ff
  • terminal.ansiGreen#98be65
  • terminal.ansiMagenta#c678dd
  • terminal.ansiRed#ff6c6b
  • terminal.ansiWhite#bbc2cf
  • terminal.ansiYellow#ecbe7b
  • terminal.background#282c34
  • terminal.foreground#bbc2cf
  • titleBar.activeBackground#23272E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
punctuation.definition.comment#5B6268
comment#5B6268
punctuation.definition.directive#4BC4F7
keyword.control.directive#4BC4F7
meta.preprocessor#4BC4F7
punctuation.definition.string#98BE65
string#98BE65
punctuation.separator.delimiter#BBC2CF
punctuation.separator.scope-resolution#BBC2CF
storage.modifier.reference#BBC2CF
punctuation.vararg-ellipses#C678DD
punctuation.section.block.begin.bracket.curly, punctuation.section.block.end.bracket.curly#C678DD
punctuation.section.block.begin.bracket.round, punctuation.section.block.end.bracket.round#98BE65
punctuation.section.parens.begin.bracket.round, punctuation.section.parens.end.bracket.round#98BE65
punctuation.definition.begin.bracket.square, punctuation.definition.end.bracket.square#98BE65
storage.type.namespace.definition#51AFEF
entity.name.namespace#A9A1E1
punctuation.section.block.begin.bracket.curly.namespace, punctuation.section.block.end.bracket.curly.namespace#51AFEF
storage.type.template#51AFEF
entity.name.type.template#FFCB6B
punctuation.section.angle-brackets.start, punctuation.section.angle-brackets.end#98BE65
meta.template#C678DD
meta.template.call#98BE65
storage.type.class#51AFEF
entity.name.scope-resolution#A9A1E1
entity.name.type.class#FFCB6B
punctuation.section.block.begin.bracket.curly.class, punctuation.section.block.end.bracket.curly.class#C678DD
entity.name.operator#C678DD
keyword.other.operator#51AFEF
keyword.operator.cast#51AFEF
keyword.control#51AFEF
keyword.operator.bitwise, keyword.operator.assignment#BBC2CF
storage.modifier#51AFEF
storage.type.modifier#51AFEF
entity.name.type#FFCB6B
entity.name.function.definition, meta.function.python#C678DD
punctuation.section.parameters#98BE65
meta.parameter, variable.parameter.function.language.python#BBC2CF
entity.name.function.call#C678DD
variable.language, variable.language.special.self.python, variable.parameter.function.language.special.self.python#51AFEF
variable.other.local#BBC2CF
variable.other.global#BBC2CF
variable.other.property#DCAEEA
variable.other.enummember#DCAEEA
storage.type#51AFEF
storage.type.built-in, storage.type.primitive#FFCB6B
constant.numeric, constant.language.python#DA8548
keyword.other.unit#DA8548
keyword.cmake#C678DD
keyword.operator.logical.python#51AFEF
punctuation.definition.decorator.python#FFCB6B
support.function.builtin.python#FFCB6B
support.type.property-name.json#51AFEF
meta.structure.array.json#FFCB6B
meta.structure.dictionary.json#C678DD
punctuation.separator.dictionary.key-value.json, punctuation.separator.dictionary.pair.json, punctuation.separator.array.json#BBC2CF
markup.heading, markup.list#FF5F5F
punctuation.definition.heading.markdown, punctuation.definition.link, punctuation.definition.metadata.markdown#5B6268
markup.inline.raw.string, markup.fenced_code#98BE65
string.other.link#51AFEF
markup.underline.link#DCAEEA
markup.italicitalic
markup.boldbold
markup.strikethroughstrikethrough

Shiki preview

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

Loading...

Doom One Theme by L-Nafaryus - VS Code Theme