Skip to main content
Coding Theme

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.

  • activityBar.background#06122c
  • activityBar.border#2b2b2b
  • activityBar.foreground#8eff94
  • activityBar.inactiveForeground#BCBAFF
  • activityBarBadge.background#8eff94
  • activityBarBadge.foreground#000000
  • button.background#5451ad
  • button.foreground#ffffff
  • button.hoverBackground#5c5fc5
  • button.secondaryBackground#434462
  • button.secondaryHoverBackground#56587e
  • descriptionForeground#ffffff
  • editor.background#020d23
  • editor.findMatchBackground#008d004b
  • editor.findMatchBorder#70c56e
  • editor.findMatchHighlightBackground#292a3d83
  • editor.findMatchHighlightBorder#d98ce0
  • editor.foreground#fdfeff
  • editor.hoverHighlightBackground#534fce41
  • editor.inactiveSelectionBackground#00255586
  • editor.lineHighlightBackground#1c134700
  • editor.lineHighlightBorder#272753
  • editor.selectionBackground#002e69da
  • editor.selectionHighlightBackground#cbcbcb2a
  • editor.selectionHighlightBorder#4c6282b3
  • editor.wordHighlightBackground#cbcbcb2a
  • editor.wordHighlightStrongBackground#217fbd4e
  • editorBracketHighlight.foreground1#c1a2ff
  • editorBracketHighlight.foreground2#91ffac
  • editorBracketHighlight.foreground3#98fcff
  • editorBracketHighlight.foreground4#ffb89a
  • editorBracketHighlight.foreground5#ffa9de
  • editorBracketHighlight.foreground6#ffffcd
  • editorCursor.foreground#ffffff
  • editorError.foreground#f85149
  • editorGroup.border#afffb3
  • editorGroup.dropBackground#03153b
  • editorGroupHeader.noTabsBackground#03163f
  • editorGroupHeader.tabsBackground#06122c
  • editorHoverWidget.background#11143a
  • editorHoverWidget.border#363b53
  • editorIndentGuide.activeBackground1#c8afee54
  • editorIndentGuide.background1#57575728
  • editorLineNumber.activeForeground#BCBAFF
  • editorLineNumber.foreground#b6ffba
  • editorRuler.foreground#11215e
  • editorWarning.foreground#fad46d
  • editorWidget.background#051330
  • editorWidget.border#030f27
  • editorWidget.foreground#e7e7e7
  • errorForeground#f85149
  • focusBorder#233356
  • foreground#ffffff
  • gitDecoration.conflictingResourceForeground#ff4444
  • gitDecoration.deletedResourceForeground#ff6161
  • gitDecoration.ignoredResourceForeground#ffffff98
  • gitDecoration.modifiedResourceForeground#5ebfff
  • gitDecoration.stageModifiedResourceForeground#608aff
  • gitDecoration.untrackedResourceForeground#BCBAFF
  • icon.foreground#BCBAFF
  • input.background#313131
  • input.border#3c3c3c
  • input.placeholderForeground#f3f3f3
  • inputOption.activeBorder#ffd400
  • inputValidation.infoBackground#ae77fb26
  • inputValidation.infoBorder#BCBAFF
  • list.activeSelectionBackground#162544
  • list.dropBackground#544fa1
  • list.errorForeground#ff7e77
  • list.focusBackground#17264a
  • list.hoverBackground#0f1c37
  • list.inactiveSelectionBackground#152342
  • list.inactiveSelectionForeground#89FFA7
  • list.warningForeground#ff7e77
  • menu.background#1c2436
  • menu.selectionBackground#020d23
  • menu.separatorBackground#424b64
  • notificationsInfoIcon.foreground#BCBAFF
  • panel.background#06122c
  • panel.border#6058a5
  • panelTitle.activeBorder#adffc1
  • panelTitle.activeForeground#adffc1
  • panelTitle.inactiveForeground#BCBAFF
  • peekView.border#4c4963
  • peekViewEditor.background#151f35
  • peekViewEditor.matchHighlightBackground#003669da
  • peekViewEditor.matchHighlightBorder#003669da
  • peekViewResult.background#101b2e
  • peekViewResult.matchHighlightBackground#003669da
  • peekViewResult.selectionBackground#1d2b4b
  • peekViewTitle.background#17263a
  • peekViewTitleDescription.foreground#cacaca
  • peekViewTitleLabel.foreground#ffffff
  • progressBar.background#77ff99
  • scmGraph.foreground1#fff9aa
  • scmGraph.foreground2#ff85c2
  • scmGraph.foreground3#ff9f73
  • scmGraph.foreground4#76e4ff
  • scmGraph.foreground5#b4a0ff
  • scmGraph.historyItemBaseRefColor#d0aeff
  • scmGraph.historyItemHoverLabelForeground#000000
  • scmGraph.historyItemRefColor#83ee79
  • scmGraph.historyItemRemoteRefColor#ffbb7b
  • scrollbar.shadow#7858a5f1
  • scrollbarSlider.activeBackground#7c58af
  • scrollbarSlider.background#7858a5a2
  • scrollbarSlider.hoverBackground#7858a5e8
  • sideBar.background#06122c
  • sideBarSectionHeader.background#020d23
  • sideBarSectionHeader.border#2e2f46
  • sideBarSectionHeader.foreground#BCBAFF
  • statusBar.background#04112c
  • statusBar.border#2e2f46
  • statusBar.debuggingBackground#06122c
  • statusBar.debuggingForeground#BCBAFF
  • statusBar.foreground#c8c6ff
  • statusBar.noFolderBackground#04112c
  • statusBar.noFolderForeground#c8c6ff
  • statusBarItem.activeBackground#BCBAFF4F
  • statusBarItem.hoverForeground#8eff94
  • statusBarItem.remoteBackground#b4a1ff
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#020d23
  • tab.activeBorderTop#8affa7
  • tab.activeForeground#b1f5b5
  • tab.border#1d273c
  • tab.dragAndDropBorder#6dc984
  • tab.hoverBackground#121b2e
  • tab.inactiveBackground#06122c
  • tab.inactiveForeground#a3a1dc
  • tab.selectedBackground#8affa7
  • terminal.ansiBlack#3a1b75
  • terminal.ansiBlue#BCBAFF
  • terminal.ansiBrightBlack#5c6d751a
  • terminal.ansiBrightBlue#a4a2dc
  • terminal.ansiBrightCyan#4bc5fa
  • terminal.ansiBrightGreen#3dd69c
  • terminal.ansiBrightMagenta#ffaffa
  • terminal.ansiBrightRed#ff7a7a
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#adffc1
  • terminal.ansiCyan#3dc5ff
  • terminal.ansiGreen#a9ffbd
  • terminal.ansiMagenta#BCBAFF
  • terminal.ansiRed#fa3636
  • terminal.ansiWhite#f2f8ff
  • terminal.ansiYellow#ffd8a6
  • terminal.background#06122c
  • terminal.foreground#e4eeff
  • textLink.activeForeground#32a138
  • textLink.foreground#8eff94
  • titleBar.activeBackground#04112c
  • titleBar.border#2e2f46
  • tree.inactiveIndentGuidesStroke#3e374887
  • tree.indentGuidesStroke#c8afee65

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.separator.key-value.html#AAFFBF—
text.html.derivative#e4ebff—
meta.attribute.src.html string.quoted.double.html#ffb8ed—
meta.attribute.href.html string.quoted.double.html#ffb8ed—
string.quoted.double.html, meta.tag.metadata.link.void.html#ffb8editalic
entity.name.tag.html, punctuation.definition.tag#AAFFBF—
constant.character.entity.named.gt.html, constant.character.entity.named.lt.html, constant.character.entity.numeric.hexadecimal.html, constant.character.entity.numeric.decimal.html#ffc8a3
entity.other.attribute-name.html#bcbdff—
entity.name.tag.css#FFFAB4
entity.other.attribute-name.id.css#FFA7DA
entity.other.attribute-name.class.css#89FFA7—
entity.other.attribute-name.pseudo-class.css#89FFA7—
punctuation.separator.key-value.css#a1d996—
punctuation.terminator.rule.css#d29bff—
support.type.property-name.css#D7E1FF
support.constant.font-name.css#FDC4A9—
source.css keyword.other.unit, constant.numeric.css#acffba—
support.constant.property-value.css#FDC4A9—
keyword.other.important.scss#3ECCFF—
punctuation.terminator#BCBAFF—
meta.return.type.ts support.type#3ECCFF—
punctuation.separator.array.json.comments#BCBAFF
constant.language.json.comments, constant.character.escape.json.comments#BCBAFF
meta.structure.dictionary.json string.quoted.double.json#fd68b3—
support.type.property-name.json#B8FFCA
meta.structure.dictionary.value.json string.quoted.double.json#BCBAFF—
punctuation.separator.array.json#a2e3b2
punctuation.separator.dictionary.pair.json#a2e3b2
punctuation.separator.dictionary.key-value.json#b8b0ff
punctuation.definition.block.sequence.item.yaml#BCBAFF—
source.yaml string#BCBAFF—
source.yaml constant.numeric#ffbc90—
source.yaml constant.language#ffedb3—
string.unquoted.plain.out.yaml, string.quoted.double.yaml, string.quoted.single.yaml#B8FFCA—
source.ini#BCBAFF—
source.ignore#BCBAFF—
text.git-commit#BCBAFF—
source.python#b0ffb2—
meta.function-call.arguments.python#B5FFB9—
meta.member.access.python meta.function-call.generic.python#FFAAEA
storage.modifier.package.java, storage.modifier.import.java#B0FFB2—
meta.definition.variable.java storage.type.java#FFFAB4italic
storage.type.java#FFFAB4italic
meta.definition.variable.java storage.type.primitive.java#cbe9ffitalic
meta.method.return-type.java#FFFAB4—
storage.type.object.array.java#3ECCFF—
storage.modifier.java#BCBAFF—
meta.method.body.java#BCBAFF
source.c#f8f8f8—
meta.block.c#b0ffb2—
string.quoted.other.lt-gt.include.c#b0ffb2—
entity.name.function.preprocessor.c#b0ffb2bold
storage.type.built-in.primitive.c#cbe9ffitalic
storage.type.built-in.c#cbe9ffitalic
meta.block.c#8de1ff
source.cpp#f8f8f8—
storage.type.modifier.access.control.private.cpp, storage.type.modifier.access.control.public.cpp, storage.type.modifier.access.control.protected.cpp#BCBAFF
meta.body.class.cpp#B8FFCA
meta.body.function.definition.cpp#B8FFCA
string.quoted.other.lt-gt.include.cpp#B8FFCA
entity.name.type.parameter.cpp, storage.type.built-in.primitive.cpp#cbe9ffitalic
storage.type.namespace.directive.cpp#cbe9ffitalic
entity.name.function.definition.special.constructor.cpp#FFFAB4underline
entity.name.type.cpp, entity.name.function.definition.special.member.destructor.cpp, entity.name.function.call.initializer.cpp#FFFAB4italic
source.cs#f8f8f8—
entity.name.type.namespace.cs, variable.other.readwrite.cs#B8FFCA
source.cs keyword.type#cbe9ffitalic
source.cs storage.type#cbe9ffitalic
entity.name.type.package.go, entity.name.import.go#B0FFB2—
entity.name.type.go#FFFAB4—
variable.other.constant.go#B0FFB2bold
storage.type.string.go, storage.type.numeric.go#cbe9ffitalic
punctuation.section.embedded.begin.php#B0FFB2—
entity.name.type.go#FFFAB4—
variable.other.constant.go#B0FFB2bold
keyword.other.namespace.php#cbe9ffitalic
meta.paragraph.markdown#d8d5ff—
text.html.markdown#c2acff—
markup.underline.link.image.markdown#c2acff—
entity.name.section.markdown#b8ffca—
string.other.link.title.markdown#b8ffca—
punctuation.definition.heading.markdown#b8ffca—
markup.raw.inline.markdown#E9E9E9—
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#b8ffca—
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#ff5bf4—
punctuation.definition.metadata.markdown, markup.list.unnumbered.markdown#B094FD—
markup.underline.link.markdown, meta.image.inline.markdown#B094FD
markup.bold.markdown, markup.italic.markdown#b8ffca—
markup.italic.markdown—italic
markup.bold.markdown—bold
fenced_code.block.language, markup.inline.raw.markdown#b8ffca—
fenced_code.block.language, markup.inline.raw.markdown#b8ffca—
string.other.link.description.markdown#fce1b9—
markup.raw.block.markdown#FFFFFF—
log.date#9dd8ac—
log.constant#8DE1FF—
log.info#FFAAEAitalic
log.warning#f8b569italic
log.error#EE3030italic
log.debug#50b1f7italic
log.string#FFD6BA—
text.log#BCBAFF—
source.pip-requirements entity.name.class#FFFAB4
punctuation.definition.annotation#3ECCFFitalic
entity.name.type.interface#FFFAB4
meta.block punctuation.accessor#B8FFCA—
meta.function-call punctuation.accessor#FFAAEA—
text.html.vue-html#e5d2ff—
text.html.vue-html#e5d2ff—
keyword.operator#BCBAFF
comment, punctuation.definition.comment, string.quoted.docstring.multi.python#0e6a94italic
string#ffd6ba—
constant.numeric#BCBAFF—
keyword.other.unit#e5d2ff—
constant.language#ffb98a—
constant.character#3ECCFF—
constant.other#89ec8e
keyword.other.definition.ini#89ec8e—
variable#B5FFB9—
entity.name.function#FFAAEA—
punctuation.separator.element#f0a2ff—
keyword.operator.type.annotation, keyword.operator.comparison, punctuation.section.function.begin, keyword.operator.assignment, keyword.operator.comparison#BCBAFF
punctuation.separator.parameter, punctuation.separator.comma#B5FFB9—
keyword.operator.logical#BCBAFF
keyword.operator.bitwise, keyword.operator.type#52f9ff—
keyword.operator.new, keyword.control.new.java#BCBAFFunderline
storage.type#BCBAFFitalic
support.function#FFAAEA
keyword#bcbaff
storage.type.class, storage.type.function#bcbaff
punctuation.definition.template-expression#3ECCFF—
entity.name.class, entity.name.type.class#FFFAB4underline
entity.name.type#FFAAEA—
, meta.function-call.python, entity.name.function - meta.function-call, entity.name.function.python, #FFAAEA
variable.other#B8FFCA
meta.definition.variable variable.other.readwrite#B8FFCA
variable.other.readwrite#9ee5ff
variable.parameter, meta.function-call.arguments#8de1ff
entity.other.attribute-name#ff8ebd
punctuation.separator#FFAAEA
punctuation.separator.dictionary#FFE0BC
punctuation.separator.map#FFE0BC
punctuation.separator.key-value#ffc4a0
support.constant#49fefe
support.class#FFAAEAitalic
support.other.variable#00c3ff
support.variable.property.dom#00c3ff—
invalid#9E0A52
invalid.deprecated#00D7E2—
meta.diff, meta.diff.header#009AF3—
markup.deleted#ee3030—
markup.inserted#62edff—
markup.changed#029FCF—
constant.numeric.line-number.find-in-files - match#E92778—
entity.name.filename.find-in-files#b8ffca—
keyword.other#BCBAFF—
constant.other.color#85ff89
keyword.other.special-method.dockerfile, keyword.other.special-method#85ff89bold
source.dockerfile#BCBAFF—
meta.property-value, support.constant.property-value#82ff8c—
meta.property-name support.type.property-name#D7E1FF
meta.property-value punctuation.separator.key-value#FFE0BC—
support.other.namespace.php#973DFD—
meta.use#2FB3FF
keyword.other.phpdoc.php#35A3FD
variable.parameter.function.coffee#8de1ff
entity.other.inherited-class#B8C9FFitalic
support.type#FFB98Aitalic
storage#BCBAFF—
variable.language#18b6ff—
markup.deleted.git_gutter#ff3030—
markup.inserted.git_gutter#e5d2ff—
markup.changed.git_gutter#0685FC—
meta.template.expression#3ECCFF—
token.info-token#6796E6—
token.warn-token#CD9731—
token.error-token#F44747—
token.debug-token#B267E6—
Purple Green Theme by napmz - VS Code Theme