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#14161C
  • activityBar.foreground#627DB4
  • activityBarBadge.background#D63667
  • activityBarBadge.foreground#ffffff
  • button.background#3EA7E0
  • button.foreground#000000
  • button.hoverBackground#00a6ff
  • debugToolBar.background#1C1E26
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#1C1E27
  • dropdown.border#000000
  • editor.background#22252F
  • editor.foreground#B4C8D4
  • editor.lineHighlightBackground#0f1a3121
  • editor.selectionBackground#ffffff3b
  • editorBracketMatch.border#85EEA7
  • editorCursor.foreground#85EEA7
  • editorGroup.border#000000
  • editorGroupHeader.tabsBackground#1C1E27
  • editorHoverWidget.background#1b1c27
  • editorHoverWidget.border#181A1F
  • editorIndentGuide.background#2c394c8f
  • editorLineNumber.foreground#34425E
  • editorSuggestWidget.background#1C1E27
  • editorSuggestWidget.border#000000
  • editorSuggestWidget.selectedBackground#2C313A
  • editorWhitespace.foreground#2c394c8f
  • editorWidget.background#1C1E27
  • extensionButton.prominentBackground#D63667
  • extensionButton.prominentHoverBackground#ff16b196
  • focusBorder#3EA7E0
  • gitDecoration.addedResourceForeground#3EA7E0
  • gitDecoration.deletedResourceForeground#D63667
  • gitDecoration.ignoredResourceForeground#D5D8DA59
  • gitDecoration.modifiedResourceForeground#EEE985
  • gitDecoration.untrackedResourceForeground#85EEA7
  • input.background#14161C
  • input.border#181A1F
  • list.activeSelectionBackground#2C313A
  • list.activeSelectionForeground#D7DAE0
  • list.focusBackground#2C313A
  • list.highlightForeground#D7DAE0
  • list.hoverBackground#2C313A
  • list.inactiveSelectionBackground#2C313A
  • list.inactiveSelectionForeground#D7DAE0
  • pickerGroup.border#D63667
  • scrollbarSlider.activeBackground#747D9180
  • scrollbarSlider.background#4E566680
  • scrollbarSlider.hoverBackground#5A637580
  • sideBar.background#1C1E27
  • sideBarSectionHeader.background#1C1E27
  • statusBar.background#1C1E27
  • statusBar.debuggingBackground#D63667
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#b5becf
  • statusBar.noFolderBackground#1C1E27
  • statusBarItem.hoverBackground#2C313A
  • tab.activeBackground#22252F
  • tab.border#070930
  • tab.inactiveBackground#1C1E27
  • terminal.ansiBlue#627DB4
  • terminal.ansiBrightBlue#627DB4
  • terminal.ansiBrightCyan#3EA7E0
  • terminal.ansiBrightGreen#85EEA7
  • terminal.ansiBrightMagenta#F806FA
  • terminal.ansiBrightRed#D63667
  • terminal.ansiBrightYellow#EEE985
  • terminal.ansiCyan#3EA7E0
  • terminal.ansiGreen#85EEA7
  • terminal.ansiMagenta#F806FA
  • terminal.ansiRed#D63667
  • terminal.ansiYellow#EEE985
  • terminal.foreground#B4C8D4
  • terminal.selectionBackground#ffffff3b
  • terminalCursor.background#070930
  • terminalCursor.foreground#B3F361
  • titleBar.activeBackground#22252F
  • titleBar.activeForeground#b5becf
  • titleBar.inactiveBackground#1C1E27
  • titleBar.inactiveForeground#7b7f86
  • walkThrough.embeddedEditorBackground#232530

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#525863italic
string.template meta.embedded.line#B4C8D4
variable.parameter#7A83D1italic
storage.type, storage.modifier#627DB4italic
string.regexp#7A83D1
meta.jsx.children.js, meta.property-value.css, text.html.derivative#B4C8D4
constant.language#96A1FF
constant.character.escape#FFFFFF
entity.name#3EA7E0
entity.name.tag#3EA7E0
punctuation.definition.tag, punctuation.definition.block.js, punctuation.definition.string.begin, punctuation.definition.string.end, meta.property-list.css, storage.type.function.arrow.js#FFFFFF
entity.other.attribute-name#627DB4italic
entity.name.function, variable.function, meta.export.default.js#fff
keyword#D63667italic
keyword.control#627DB4italic
keyword.operator#ffffff
keyword.other.unit#7A83D1
support#7A83D1
support.function#B4C8D4
support.variable#FFFFFF
meta.object-literal.key, support.type.property-name#627DB4
variable.other.property.js#7A83D1italic
punctuation.separator.key-value#D63667
punctuation.section.embedded#D63667
punctuation.section.embedded#FFFFFF
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#D63667
support.type.property-name.css, support.type.vendored.property-name.css#B4C8D4
support.constant.font-name#96A1FF
entity.other.attribute-name.id#D63667
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#F2F2F2
support.function.misc.css#D63667
markup.heading, entity.name.section#96A1FF
markup.quote#D63667
beginning.punctuation.definition.list#96A1FF
markup.underline.link#F2F2F2
string.other.link.description#96A1FF
meta.function-call.generic.python#B4C8D4
storage.type.cs#D63667
entity.name.variable.local.cs#96A1FF
entity.name.variable.field.cs, entity.name.variable.property.cs#96A1FF
source.cpp keyword.operator#D63667
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...

untitled by juanmnl - VS Code Theme