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#1C1E27
  • activityBar.foreground#85EEA7
  • activityBarBadge.background#85EEA7
  • activityBarBadge.foreground#1C1E27
  • button.background#85EEA7
  • button.foreground#1C1E27
  • button.hoverBackground#85EEA7
  • debugToolBar.background#1C1E26
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#1C1E27
  • dropdown.border#181A1F
  • editor.background#1C1E27
  • editor.foreground#f5f5f5
  • editor.lineHighlightBackground#0f1a3121
  • editor.selectionBackground#ffffff3b
  • editorBracketMatch.border#85EEA7
  • editorCursor.foreground#85EEA7
  • editorGroup.border#181A1F
  • editorGroupHeader.tabsBackground#1C1E27
  • editorHoverWidget.background#181A1F
  • editorHoverWidget.border#181A1F
  • editorIndentGuide.background#8f97ff28
  • editorLineNumber.foreground#8f97ff4d
  • editorSuggestWidget.background#1C1E27
  • editorSuggestWidget.border#181A1F
  • editorSuggestWidget.selectedBackground#2C313A
  • editorWhitespace.foreground#8f97ff28
  • editorWidget.background#181A1F
  • extensionButton.prominentBackground#85EEA7
  • extensionButton.prominentHoverBackground#ff16b196
  • focusBorder#85EEA7
  • gitDecoration.addedResourceForeground#78A8D6
  • gitDecoration.deletedResourceForeground#FF16B0
  • gitDecoration.ignoredResourceForeground#D5D8DA59
  • gitDecoration.modifiedResourceForeground#fcee54
  • gitDecoration.untrackedResourceForeground#85EEA7
  • input.background#1C1E27
  • input.border#1C1E27
  • list.activeSelectionBackground#2C313A
  • list.activeSelectionForeground#D7DAE0
  • list.focusBackground#2C313A
  • list.highlightForeground#D7DAE0
  • list.hoverBackground#2C313A
  • list.inactiveSelectionBackground#2C313A
  • list.inactiveSelectionForeground#D7DAE0
  • pickerGroup.border#85EEA7
  • scrollbarSlider.activeBackground#747D9180
  • scrollbarSlider.background#4E566680
  • scrollbarSlider.hoverBackground#5A637580
  • sideBar.background#15171d
  • sideBarSectionHeader.background#1C1E27
  • statusBar.background#1C1E27
  • statusBar.debuggingBackground#85EEA7
  • statusBar.debuggingForeground#1C1E27
  • statusBar.foreground#b5becf
  • statusBar.noFolderBackground#1C1E27
  • statusBarItem.hoverBackground#2C313A
  • tab.activeBackground#1C1E27
  • tab.border#070930
  • tab.inactiveBackground#15171d
  • terminal.ansiBlue#78A8D6
  • terminal.ansiBrightBlue#78A8D6
  • terminal.ansiBrightCyan#6BE4E6
  • terminal.ansiBrightGreen#85EEA7
  • terminal.ansiBrightMagenta#F806FA
  • terminal.ansiBrightRed#2C313A
  • terminal.ansiBrightYellow#FFEA16
  • terminal.ansiCyan#59E1E3
  • terminal.ansiGreen#85EEA7
  • terminal.ansiMagenta#F806FA
  • terminal.ansiRed#FF407B
  • terminal.ansiYellow#FFEA16
  • terminal.foreground#f1f1f1
  • terminal.selectionBackground#ffffff3b
  • terminalCursor.background#070930
  • terminalCursor.foreground#85EEA7
  • titleBar.activeBackground#1C1E27
  • titleBar.activeForeground#b5becf
  • titleBar.inactiveBackground#15171d
  • titleBar.inactiveForeground#7b7f86
  • walkThrough.embeddedEditorBackground#232530

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#525863italic
string.quoted, string.template, punctuation.definition.string, punctuation.definition.block.js#7ADAD1
string.template meta.embedded.line#f3f3f3
variable, entity.name.variable#85EEA7
variable.language, variable.other.object.js#78A8D6
variable.parameter#78A8D6bold
storage.type, storage.modifier#7ADAD1bold
constant#85EEA7
string.regexp#85EEA7
constant.numeric#7ADAD1bold
constant.language#7ADAD1
constant.character.escape#f2f2f2
entity.name#78A8D6
entity.name.tag#78A8D6bold
punctuation.definition.tag#bcd4cf
entity.other.attribute-name#BCD4CF
entity.name.type#78A8D6bold
entity.other.inherited-class#F2F2F2
entity.name.function, variable.function#85EEA7bold
keyword#7ADAD1bold
keyword.control#BCD4CFbold
keyword.operator#7ADAD1bold
keyword.operator.new, keyword.operator.expression, keyword.operator.logical#7ADAD1bold
keyword.other.unit#85EEA7
support#78A8D6bold
support.function#fcfcfc
support.variable#78A8D6
meta.object-literal.key, support.type.property-name#78A8D6
variable.other.property.js#7ADAD1bold
punctuation.separator.key-value#7ADAD1bold
punctuation.section.embedded#f2f2f2
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#7ADAD1
support.type.property-name.css, support.type.vendored.property-name.css#F2F2F2
constant.other.color#7ADAD1bold
support.constant.font-name#85EEA7
entity.other.attribute-name.id#7ADAD1bold
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#F2F2F2
support.function.misc.css#7ADAD1bold
markup.heading, entity.name.section#85EEA7
markup.quote#FF407Bbold
beginning.punctuation.definition.list#85EEA7
markup.underline.link#F2F2F2
string.other.link.description#85EEA7
meta.function-call.generic.python#fcfcfc
storage.type.cs#7ADAD1bold
entity.name.variable.local.cs#85EEA7
entity.name.variable.field.cs, entity.name.variable.property.cs#85EEA7
source.cpp keyword.operator#7ADAD1bold
punctuation.definition.heading.markdown#7ADAD1
punctuation.definition.bold.markdown#85EEA7
punctuation.definition.italic.markdown#ffffff7e
markup.bold.markdownbold
markup.italic.markdownitalic

Shiki preview

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

Loading...

Cyberpunk Light Aquamarine Theme - Coding Theme