Skip to main content
CodingTheme

Color themes

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.

  • actionBar.toggledBackground#0078d4
  • activityBar.activeBorder#D7FF00
  • activityBar.background#1d446c
  • activityBar.border#1d446c
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#0078d4
  • activityBarBadge.background#0078d4
  • activityBarBadge.foreground#ffffff
  • badge.background#0078d4
  • badge.foreground#ffffff
  • button.background#505050
  • button.border#ffffff12
  • button.foreground#ffffff
  • button.hoverBackground#026ec1
  • button.secondaryBackground#313131
  • button.secondaryForeground#cccccc
  • button.secondaryHoverBackground#3c3c3c
  • button.separator#ffffff66
  • chat.editedFileForeground#e2c08d
  • chat.slashCommandBackground#34414b
  • chat.slashCommandForeground#40a6ff
  • checkbox.background#313131
  • checkbox.border#3c3c3c
  • debugToolBar.background#181818
  • descriptionForeground#9d9d9d
  • dropdown.background#313131
  • dropdown.border#3c3c3c
  • dropdown.foreground#cccccc
  • dropdown.listBackground#1f1f1f
  • editor.background#0b2b51
  • editor.findMatchBackground#6e5e5e
  • editor.findMatchBorder#64aaf0c9
  • editor.findMatchHighlightBackground#ea5c0055
  • editor.findMatchHighlightForeground#fbe6e5
  • editor.foreground#FAFAFA
  • editor.inactiveSelectionBackground#7892ad55
  • editor.lineHighlightBackground#571a1a
  • editor.rangeHighlightBorder#64aaf0c9
  • editor.selectionBackground#639ad255
  • editor.selectionHighlightBackground#639ad255
  • editorBracketHighlight.foreground1#4d83ba
  • editorBracketHighlight.foreground2#4d83ba
  • editorBracketHighlight.foreground3#4d83ba
  • editorBracketHighlight.foreground4#4d83ba
  • editorBracketHighlight.foreground5#4d83ba
  • editorBracketHighlight.foreground6#4d83ba
  • editorBracketHighlight.unexpectedBracket.foreground#ff1212cc
  • editorCursor.background#D7FF00
  • editorCursor.foreground#D7FF00
  • editorError.foreground#f14c4c
  • editorGroup.border#ffffff17
  • editorGroupHeader.tabsBackground#063165
  • editorGroupHeader.tabsBorder#063165
  • editorGutter.addedBackground#2ea043
  • editorGutter.deletedBackground#f85149
  • editorGutter.modifiedBackground#0078d4
  • editorHoverWidget.background#202020
  • editorHoverWidget.border#454545
  • editorHoverWidget.foreground#cccccc
  • editorHoverWidget.highlightForeground#2aaaff
  • editorHoverWidget.statusBarBackground#262626
  • editorIndentGuide.activeBackground1#707070
  • editorIndentGuide.background1#404040
  • editorLineNumber.activeForeground#00ff0865
  • editorLineNumber.dimmedForeground#1d446c
  • editorLineNumber.foreground#1d446c
  • editorOverviewRuler.border#010409
  • editorWarning.foreground#FFD700
  • editorWhitespace.foreground#2a8de2
  • editorWidget.background#202020
  • errorForeground#f85149
  • focusBorder#03528f
  • foreground#cccccc
  • gitDecoration.addedResourceForeground#20d420
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.modifiedResourceForeground#e6bf14
  • gitDecoration.untrackedResourceForeground#23d18b
  • icon.foreground#cccccc
  • input.background#505050
  • input.border#3c3c3c
  • input.foreground#fbe6e5
  • input.placeholderForeground#989898
  • inputOption.activeBackground#2489db82
  • inputOption.activeBorder#2488db
  • keybindingLabel.foreground#cccccc
  • list.activeSelectionBackground#571a1a
  • list.activeSelectionForeground#ffffff
  • list.activeSelectionIconForeground#cfd5d0
  • list.deemphasizedForeground#1d446c
  • list.dropBackground#383b3d
  • list.dropBetweenBackground#1d446c80
  • list.errorForeground#f88070
  • list.filterMatchBackground#ea5c0055
  • list.focusAndSelectionOutline#e2e3e2
  • list.focusBackground#0c0c0c
  • list.focusForeground#1d446c
  • list.focusHighlightForeground#2aaaff
  • list.focusOutline#0078d4
  • list.highlightForeground#2aaaff
  • list.hoverBackground#505050
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#37373d
  • list.inactiveSelectionForeground#cfd5d0
  • list.inactiveSelectionIconForeground#080808
  • list.invalidItemForeground#b40000
  • list.warningForeground#cca700
  • listFilterWidget.background#202020
  • listFilterWidget.noMatchesOutline#be1100
  • listFilterWidget.outline#1d446c
  • listFilterWidget.shadow#0000005c
  • menu.background#1f1f1f
  • menu.border#454545
  • menu.foreground#cccccc
  • menu.selectionBackground#0078d4
  • menu.separatorBackground#454545
  • menubar.selectionBackground#1d446c
  • menubar.selectionBorder#D7FF00
  • menubar.selectionForeground#fbe6e5
  • notificationCenterHeader.background#1f1f1f
  • notificationCenterHeader.foreground#cccccc
  • notifications.background#1d446c
  • notifications.border#2b2b2b
  • notifications.foreground#fbe6e5
  • panel.background#063165
  • panel.border#063165
  • panel.dropBorder#c04cf2
  • panelInput.border#cad7e1
  • panelSectionHeader.background#571a1a
  • panelSectionHeader.border#ffffff
  • panelSectionHeader.foreground#ffffff
  • panelTitle.activeBorder#ffffff
  • panelTitle.activeForeground#ffffff
  • panelTitle.border#ffffff
  • panelTitle.inactiveForeground#9d9d9d
  • panelTitleBadge.background#0078d4
  • panelTitleBadge.foreground#ffffff
  • peekViewEditor.background#1f1f1f
  • peekViewEditor.matchHighlightBackground#bb800966
  • peekViewResult.background#1f1f1f
  • peekViewResult.matchHighlightBackground#bb800966
  • pickerGroup.border#3c3c3c
  • ports.iconRunningProcessForeground#369432
  • progressBar.background#0078d4
  • quickInput.background#222222
  • quickInput.foreground#cccccc
  • scrollbarSlider.activeBackground#1d446c
  • scrollbarSlider.background#1d446c
  • scrollbarSlider.hoverBackground#fbe6e5
  • search.resultsInfoForeground#cccccca6
  • searchEditor.findMatchBackground#e60606fb
  • searchEditor.findMatchBorder#3c3c3c
  • searchEditor.textInputBorder#f5f5f5
  • settings.dropdownBackground#313131
  • settings.dropdownBorder#3c3c3c
  • settings.headerForeground#ffffff
  • settings.modifiedItemIndicator#bb800966
  • sideBar.background#063165
  • sideBar.border#063165
  • sideBar.foreground#fbe6e5
  • sideBarSectionHeader.background#571a1a
  • sideBarSectionHeader.border#000000
  • sideBarSectionHeader.foreground#cccccc
  • sideBarTitle.foreground#cccccc
  • statusBar.background#1d446c
  • statusBar.border#2079bd
  • statusBar.debuggingBackground#571a1a
  • statusBar.debuggingBorder#571a1a
  • statusBar.debuggingForeground#edeaea
  • statusBar.focusBorder#2079bd
  • statusBar.foreground#edeaea
  • statusBar.noFolderBackground#1f1f1f
  • statusBar.noFolderBorder#1f1f1f
  • statusBar.noFolderForeground#edeaea
  • statusBarItem.focusBorder#0078d4
  • statusBarItem.prominentBackground#6e768166
  • statusBarItem.remoteBackground#0078d4
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#571a1a
  • tab.activeBorder#1f1f1f
  • tab.activeBorderTop#0078d4
  • tab.activeForeground#ffffff
  • tab.activeModifiedBorder#e6bf14
  • tab.border#332538
  • tab.hoverBackground#505050
  • tab.hoverBorder#505050
  • tab.hoverForeground#ffffff
  • tab.inactiveBackground#063165
  • tab.inactiveForeground#9d9d9d
  • tab.inactiveModifiedBorder#e6bf1480
  • tab.lastPinnedBorder#cccccc33
  • tab.selectedBackground#222222
  • tab.selectedBorderTop#6caddf
  • tab.selectedForeground#ffffffa0
  • tab.unfocusedActiveBorder#1f1f1f
  • tab.unfocusedActiveBorderTop#2b2b2b
  • tab.unfocusedActiveModifiedBorder#e6bf1480
  • tab.unfocusedHoverBackground#1f1f1f
  • tab.unfocusedInactiveModifiedBorder#e6bf1440
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#2472c8
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#3b8eea
  • terminal.ansiBrightCyan#29b8db
  • terminal.ansiBrightGreen#23d18b
  • terminal.ansiBrightMagenta#d670d6
  • terminal.ansiBrightRed#f93431
  • terminal.ansiBrightWhite#e5e5e5
  • terminal.ansiBrightYellow#f5f543
  • terminal.ansiCyan#11a8cd
  • terminal.ansiGreen#65af50
  • terminal.ansiMagenta#bc3fbc
  • terminal.ansiRed#e6122b
  • terminal.ansiWhite#e5e5e5
  • terminal.ansiYellow#e5e510
  • terminal.background#062851
  • terminal.border#1d446c
  • terminal.findMatchBackground#6e5e5e
  • terminal.findMatchBorder#64aaf0c9
  • terminal.findMatchHighlightBackground#ea5c0055
  • terminal.findMatchHighlightBorder#64aaf0c9
  • terminal.foreground#cccccc
  • terminal.inactiveSelectionBackground#3a3d41
  • terminal.selectionBackground#1d446c55
  • terminal.tab.activeBorder#0078d4
  • terminalCommandDecoration.defaultBackground#ffffff40
  • terminalCommandDecoration.errorBackground#f14c4c
  • terminalCommandDecoration.successBackground#6ee974
  • terminalCursor.foreground#f2ba14
  • textBlockQuote.background#2b2b2b
  • textBlockQuote.border#616161
  • textCodeBlock.background#2b2b2b
  • textLink.activeForeground#4daafc
  • textLink.foreground#4daafc
  • textPreformat.background#3c3c3c
  • textPreformat.foreground#d0d0d0
  • textSeparator.foreground#21262d
  • titleBar.activeBackground#1d446c
  • titleBar.activeForeground#fbe6e5
  • titleBar.border#2577c9
  • titleBar.inactiveBackground#1d446c
  • titleBar.inactiveForeground#fbe6e5
  • welcomePage.progress.foreground#0078d4
  • welcomePage.tileBackground#2b2b2b
  • widget.border#313131

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation, meta.tag, punctuation.definition.tag, punctuation.separator, keyword.other.template, keyword.other.substitution#525252
invalid, invalid.illegal#8b2525underline
markup.inserted#2f6a9d
markup.deleted#7a3c3c
entity.other.attribute-name, entity.other.attribute-name.class, text.html.basic entity.other.attribute-name#2f6a9ditalic
string.regexp#7a2a2a
constant.character.escape#a7573a
source.json support.type.property-name.json#2f6a9d
markup.heading, markup.heading.markdown punctuation.definition.heading.markdown#2f6a9dbold
markup.bold#2f6a9dbold
markup.italic#a7573aitalic
markup.quote#525252italic
string.other.link.title.markdown, constant.other.reference.link.markdown#2f6a9dunderline
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#f1f1f1
emphasisitalic
strongbold
header#1d446c
comment#cc0a0a
constant.language#2f6a9d
constant.numeric#df4242
constant.other.color#7a3c3c
variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#f1f1f1
constant.regexp#2f6a9d
entity.name.tag#2f6a9d
entity.name.tag.css, entity.name.tag.less#7a3c3c
entity.other.attribute-name.class.css, source.css entity.other.attribute-name.class, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.parent.less, source.css entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss#7a3c3c
markup.underlineunderline
markup.strikethroughstrikethrough
markup.changed#2f6a9d
punctuation.definition.quote.begin.markdown#525252
punctuation.definition.list.begin.markdown#2f6a9d
markup.inline.raw#7a3c3c
meta.preprocessor, entity.name.function.preprocessor#2f6a9d
meta.preprocessor.string#7a3c3c
meta.preprocessor.numeric#f1f1f1
meta.structure.dictionary.key.python#f1f1f1
meta.diff.header#2f6a9d
storage#2f6a9d
storage.type#2f6a9d
storage.modifier, keyword.operator.noexcept#2f6a9d
string, meta.embedded.assembly#f2ba14
string.tag#7a3c3c
string.value#7a3c3c
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#2f6a9d
meta.template.expression#f1f1f1
support.type.vendored.property-name, support.type.property-name, source.css variable, source.coffee.embedded#f1f1f1
keyword#9b9b9b
keyword.control#9b9b9b
keyword.operator#9b9b9b
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike#9b9b9b
keyword.other.unit#f1f1f1
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#2f6a9d
support.function.git-rebase#f1f1f1
constant.sha.git-rebase#f1f1f1
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#f1f1f1
variable.language#2f6a9d
function, entity.name.function#f1f1f1
support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#f1f1f1
support.type, entity.other.attribute, entity.name.scope-resolution, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#2f6a9d
entity.name.namespace#7a3c3c
entity.name.class, entity.name.type, support.class#e9ecef
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class, punctuation.separator.namespace.ruby#2f6a9d
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.directive.using, keyword.other.operator, entity.name.operator#7a3c3c
variable.parameter#4d83ba
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#4d83ba
variable.other.constant, variable.other.enummember#5990c8
meta.object-literal.key#f1f1f1
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#7a3c3c
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#7a3c3c
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#7a2a2a
keyword.operator.or.regexp, keyword.control.anchor.regexp#f1f1f1
keyword.operator.quantifier.regexp#7a3c3c
constant.character, constant.other.option#2f6a9d
entity.name.label#f1f1f1
token.info-token#2f6a9d
token.warn-token#7a3c3c
token.error-token#8b2525
token.debug-token#2f6a9d

Shiki preview

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

Loading...

Neon Genesis Evangelion Themes by engr - VS Code Theme