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#61afef
  • activityBar.background#16181f
  • activityBar.border#1c1e2700
  • activityBar.foreground#d8dee9
  • activityBar.inactiveForeground#6a737d
  • activityBarBadge.background#61afef
  • activityBarBadge.foreground#ffffff
  • button.background#61afef
  • button.foreground#ffffff
  • button.hoverBackground#7ac0ff
  • button.secondaryBackground#4b526d
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#5c6580
  • debugToolBar.background#1C1E26
  • descriptionForeground#8a93b0
  • diffEditor.insertedTextBackground#00809B33
  • disabledForeground#6a737d
  • dropdown.background#242733
  • dropdown.border#2a2d38
  • dropdown.foreground#d8dee9
  • dropdown.listBackground#1c1e27
  • editor.background#1c1e27
  • editor.findMatchBackground#e5c07b50
  • editor.findMatchHighlightBackground#e5c07b30
  • editor.foreground#d8dee9
  • editor.hoverHighlightBackground#61afef20
  • editor.inactiveSelectionBackground#4b526d80
  • editor.selectionBackground#61afef35
  • editor.selectionHighlightBackground#569cd630
  • editor.wordHighlightBackground#569cd630
  • editor.wordHighlightStrongBackground#61afef40
  • editorBracketMatch.background#61afef20
  • editorBracketMatch.border#6a737d
  • editorCodeLens.foreground#8a93b0
  • editorCursor.foreground#61afef
  • editorIndentGuide.activeBackground1#4b526d
  • editorIndentGuide.background1#2a2d38
  • editorLineNumber.activeForeground#8a93b0
  • editorLineNumber.foreground#4b526d
  • editorLink.activeForeground#61afef
  • editorPane.background#1c1e27
  • editorRuler.foreground#2a2d38
  • editorWhitespace.foreground#ffffff1a
  • errorForeground#e06c75
  • extensionButton.prominentBackground#85EEA7
  • extensionButton.prominentHoverBackground#ff16b196
  • focusBorder#61afef00
  • foreground#d8dee9
  • gitDecoration.conflictingResourceForeground#c678dd
  • gitDecoration.deletedResourceForeground#e06c75
  • gitDecoration.ignoredResourceForeground#6a737d
  • gitDecoration.modifiedResourceForeground#e5c07b
  • gitDecoration.untrackedResourceForeground#98c379
  • icon.foreground#abb2bf
  • input.background#242733
  • input.border#2a2d38
  • input.foreground#d8dee9
  • input.placeholderForeground#6a737d
  • inputOption.activeBorder#61afef
  • inputValidation.errorBackground#e06c7520
  • inputValidation.errorBorder#e06c7580
  • inputValidation.infoBackground#61afef20
  • inputValidation.infoBorder#61afef80
  • inputValidation.warningBackground#e5c07b20
  • inputValidation.warningBorder#e5c07b80
  • list.activeSelectionBackground#61afef40
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#2c303d90
  • list.errorForeground#e06c75
  • list.focusBackground#61afef30
  • list.focusForeground#d8dee9
  • list.highlightForeground#61afef
  • list.hoverBackground#242733
  • list.hoverForeground#d8dee9
  • list.inactiveSelectionBackground#2c303d
  • list.inactiveSelectionForeground#d8dee9
  • list.warningForeground#e5c07b
  • panel.background#16181f
  • panel.border#2a2d38
  • panelInput.border#2a2d38
  • panelTitle.activeBorder#61afef
  • panelTitle.activeForeground#d8dee9
  • panelTitle.inactiveForeground#8a93b0
  • pickerGroup.border#85EEA7
  • progressBar.background#61afef
  • scrollbar.shadow#00000055
  • scrollbarSlider.activeBackground#ffffff5a
  • scrollbarSlider.background#ffffff1a
  • scrollbarSlider.hoverBackground#ffffff3a
  • selection.background#61afef40
  • sideBar.background#191b23
  • sideBar.border#191b2300
  • sideBar.foreground#abb2bf
  • sideBarSectionHeader.background#242733
  • sideBarSectionHeader.border#2a2d3855
  • sideBarSectionHeader.foreground#d8dee9
  • sideBarTitle.foreground#d8dee9
  • statusBar.background#16181f
  • statusBar.border#2a2d38
  • statusBar.debuggingBackground#c678dd
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#abb2bf
  • statusBar.noFolderBackground#1c1e27
  • statusBar.noFolderForeground#abb2bf
  • statusBarItem.activeBackground#ffffff20
  • statusBarItem.hoverBackground#ffffff15
  • statusBarItem.prominentBackground#242733
  • statusBarItem.prominentHoverBackground#2c303d
  • statusBarItem.remoteBackground#61afef
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#2d303e
  • tab.activeForeground#d8dee9
  • tab.border#2a2d3833
  • tab.hoverBackground#383c4c
  • tab.hoverForeground#e0e7ff
  • tab.inactiveBackground#1c1e27
  • tab.inactiveForeground#9ca6c1
  • tab.unfocusedActiveBackground#262935
  • tab.unfocusedActiveForeground#9fa6bb
  • terminal.ansiBlack#3b4052
  • terminal.ansiBlue#61afef
  • terminal.ansiBrightBlack#6a737d
  • terminal.ansiBrightBlue#61afef
  • terminal.ansiBrightCyan#56b6c2
  • terminal.ansiBrightGreen#98c379
  • terminal.ansiBrightMagenta#c678dd
  • terminal.ansiBrightRed#e06c75
  • terminal.ansiBrightWhite#d8dee9
  • terminal.ansiBrightYellow#e5c07b
  • terminal.ansiCyan#56b6c2
  • terminal.ansiGreen#98c379
  • terminal.ansiMagenta#c678dd
  • terminal.ansiRed#e06c75
  • terminal.ansiWhite#abb2bf
  • terminal.ansiYellow#e5c07b
  • terminal.background#1c1e27
  • terminal.foreground#d8dee9
  • terminalCursor.foreground#61afef
  • titleBar.activeBackground#242733
  • titleBar.activeForeground#d8dee9
  • titleBar.border#2a2d38
  • titleBar.inactiveBackground#1c1e27
  • titleBar.inactiveForeground#8a93b0
  • tree.indentGuidesStroke#4b526d
  • walkThrough.embeddedEditorBackground#232530
  • widget.shadow#00000055

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#525863
variable, entity.name.variable#ffffffbold
variable.other.object#4f6f46bold
variable.other.object.property#779649bold
variable.language#78a8d6
variable.parameter#78a8d6bold
string.quoted, string.template#b1d5c8
punctuation.definition.string, punctuation.definition.block.js#b1d5c8
string.template meta.embedded.line#f3f3f3
string.regexp#c12c1f
constant.character.escape#f2f2f2
constant#85eea7
constant.numeric#7adad1bold
constant.language#7adad1
keyword#7adad1bold
keyword.control#2a88e6bold
keyword.operator#7adad1bold
keyword.operator.new, keyword.operator.expression, keyword.operator.logical#7adad1bold
storage.modifier#85eea7bold
storage.type#e06c75bold
entity.name.type#78a8d6bold
entity.other.inherited-class#f2f2f2bold
entity.name.function, variable.function#7fff00e0bold
entity.name#78a8d6
entity.name.tag#78a8d6bold
punctuation.definition.tag#bcd4cf
entity.other.attribute-name#bcd4cf
entity.other.attribute-name.xml#78a8d6bold
entity.other.attribute-name.localname.xml#446a37bold
string.quoted.double.xml#5eb215bold
text.xml#f2f2f2
meta.tag.sgml.doctype.xml#d67891bold
support.type.property-name.css, support.type.vendored.property-name.css#f2f2f2
keyword.other.unit#85eea7
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
punctuation.definition.heading.markdown#7adad1
markup.bold.markdownbold
punctuation.definition.bold.markdown#85eea7
markup.italic.markdownitalic
punctuation.definition.italic.markdown#ffffff7e
markup.quote#ff407bbold
beginning.punctuation.definition.list#85eea7
markup.underline.link#f2f2f2
string.other.link.description#85eea7
variable.other.property.js#7adad1bold
meta.object-literal.key, support.type.property-name#78a8d6bold
storage.modifier.import.java#5e81acbold
storage.type.annotation.java#673ab7bold
meta.function-call.generic.python#7fff00e0bold
support.function.builtin.python#4f6f46bold
meta.attribute.python#bcd4cfbold
meta.function-call.arguments.python#78a8d6bold
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
string.unquoted.plain.out.yaml#b1d5c8
punctuation.separator.key-value#7adad1bold
punctuation.section.embedded#f2f2f2
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#7adad1
support#78a8d6bold
support.function#fcfcfc
support.variable#78a8d6
Hologram Night Theme by orcheink - VS Code Theme