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#0078D4
  • activityBar.background#181818
  • activityBar.border#616161
  • activityBar.foreground#D7D7D7
  • activityBar.inactiveForeground#868686
  • activityBarBadge.background#0078D4
  • activityBarBadge.foreground#FFFFFF
  • badge.background#616161
  • badge.foreground#F8F8F8
  • button.background#0078D4
  • button.border#FFFFFF12
  • button.foreground#FFFFFF
  • button.hoverBackground#026EC1
  • button.secondaryBackground#313131
  • button.secondaryForeground#CCCCCC
  • button.secondaryHoverBackground#3C3C3C
  • chat.slashCommandBackground#34414B
  • chat.slashCommandForeground#40A6FF
  • debugToolBar.background#252526
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#252526
  • dropdown.border#181A1F
  • editor.background#1e1e1e
  • editor.foreground#f1f1f1
  • editor.lineHighlightBackground#2d2d2d21
  • editor.selectionBackground#ffffff3b
  • editorBracketMatch.border#FF16B0
  • editorCursor.foreground#B3F361
  • editorGroup.border#181A1F
  • editorGroupHeader.tabsBackground#1e1e1e
  • editorHoverWidget.background#252526
  • editorHoverWidget.border#181A1F
  • editorIndentGuide.background1#2c394c8f
  • editorLineNumber.activeForeground#CCCCCC
  • editorLineNumber.foreground#6E7681
  • editorSuggestWidget.background#252526
  • editorSuggestWidget.border#181A1F
  • editorSuggestWidget.selectedBackground#37373d
  • editorWhitespace.foreground#2c394c8f
  • editorWidget.background#1e1e1e
  • extensionButton.prominentBackground#FF16B0
  • extensionButton.prominentHoverBackground#ff16b196
  • focusBorder#46BDFF
  • gitDecoration.addedResourceForeground#46BDFF
  • gitDecoration.deletedResourceForeground#FF16B0
  • gitDecoration.ignoredResourceForeground#D5D8DA59
  • gitDecoration.modifiedResourceForeground#fcee54
  • gitDecoration.untrackedResourceForeground#B3F361
  • input.background#3c3c3c
  • input.border#181A1F
  • list.activeSelectionBackground#37373d
  • list.activeSelectionForeground#D7DAE0
  • list.focusBackground#37373d
  • list.highlightForeground#D7DAE0
  • list.hoverBackground#37373d
  • list.inactiveSelectionBackground#37373d
  • list.inactiveSelectionForeground#D7DAE0
  • pickerGroup.border#FF16B0
  • scrollbarSlider.activeBackground#747D9180
  • scrollbarSlider.background#4E566680
  • scrollbarSlider.hoverBackground#5A637580
  • sideBar.background#252526
  • sideBarSectionHeader.background#252526
  • statusBar.background#1e1e1e
  • statusBar.debuggingBackground#FF16B0
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#b5becf
  • statusBar.noFolderBackground#1e1e1e
  • statusBarItem.hoverBackground#37373d
  • tab.activeBackground#1e1e1e
  • tab.border#1e1e1e
  • tab.inactiveBackground#252526
  • terminal.ansiBlue#46BDFF
  • terminal.ansiBrightBlue#46BDFF
  • terminal.ansiBrightCyan#6BE4E6
  • terminal.ansiBrightGreen#B3F361
  • terminal.ansiBrightMagenta#F806FA
  • terminal.ansiBrightRed#FF16B0
  • terminal.ansiBrightYellow#FFEA16
  • terminal.ansiCyan#59E1E3
  • terminal.ansiGreen#B3F361
  • terminal.ansiMagenta#F806FA
  • terminal.ansiRed#FF16B0
  • terminal.ansiYellow#FFEA16
  • terminal.foreground#f1f1f1
  • terminal.selectionBackground#ffffff3b
  • terminalCursor.background#1e1e1e
  • terminalCursor.foreground#B3F361
  • titleBar.activeBackground#1e1e1e
  • titleBar.activeForeground#b5becf
  • titleBar.inactiveBackground#252526
  • titleBar.inactiveForeground#7b7f86
  • walkThrough.embeddedEditorBackground#1e1e1e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#525863italic
string.quoted, string.template, punctuation.definition.string#DF81FC
string.template meta.embedded.line#fcfcfc
variable, entity.name.variable#96A1FF
variable.language, variable.other.object.js#46BDFF
variable.parameter#96A1FF
storage.type, storage.modifier#FF16B0
constant#96A1FF
string.regexp#96A1FF
meta.jsx.children.js, meta.property-value.css, text.html.derivative#fcfcfc
constant.numeric#FF16B0
constant.language#96A1FF
constant.character.escape#FFFFFF
entity.name#46BDFF
entity.name.tag#46BDFF
punctuation.definition.tag#FFFFFF
entity.other.attribute-name#96A1FF
entity.name.type#46BDFF
entity.other.inherited-class#F2F2F2
entity.name.function, variable.function#fcfcfc
keyword#FF16B0
keyword.control#FF16B0
keyword.operator#FF16B0
keyword.operator.new, keyword.operator.expression, keyword.operator.logical#FF16B0
keyword.other.unit#96A1FF
support#46BDFF
support.function#fcfcfc
support.variable#96A1FF
meta.object-literal.key, support.type.property-name#46BDFF
variable.other.property.js#FF16B0
punctuation.separator.key-value#FF16B0
punctuation.section.embedded#FF16B0
punctuation.section.embedded#FFFFFF
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#FF16B0
support.type.property-name.css, support.type.vendored.property-name.css#F2F2F2
constant.other.color#FF16B0
support.constant.font-name#96A1FF
entity.other.attribute-name.id#FF16B0
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#F2F2F2
support.function.misc.css#FF16B0
markup.heading, entity.name.section#96A1FF
markup.quote#FF407B
beginning.punctuation.definition.list#96A1FF
markup.underline.link#F2F2F2
string.other.link.description#96A1FF
meta.function-call.generic.python#fcfcfc
storage.type.cs#FF16B0
entity.name.variable.local.cs#96A1FF
entity.name.variable.field.cs, entity.name.variable.property.cs#96A1FF
source.cpp keyword.operator#FF16B0
punctuation.definition.heading.markdown#96a0ff7c
punctuation.definition.bold.markdown#ff16b17a
punctuation.definition.italic.markdown#ffffff7e
markup.bold.markdownbold
markup.italic.markdownitalic

Shiki preview

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

Loading...

2024 - Coding Theme