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#101b2e
  • activityBar.border#42435e
  • activityBar.foreground#8afb90
  • activityBar.inactiveForeground#BCBAFF
  • activityBarBadge.background#7eff84
  • activityBarBadge.foreground#000000
  • button.background#5451ad
  • button.foreground#ffffff
  • button.hoverBackground#5c5fc5
  • button.secondaryBackground#434462
  • button.secondaryHoverBackground#56587e
  • descriptionForeground#ffffff
  • editor.background#151f35
  • editor.findMatchBackground#008d004b
  • editor.findMatchBorder#83be82
  • editor.findMatchHighlightBackground#292a3d83
  • editor.findMatchHighlightBorder#d595db
  • editor.foreground#fdfeff
  • editor.hoverHighlightBackground#534fce41
  • editor.inactiveSelectionBackground#00376b65
  • editor.lineHighlightBackground#1c134700
  • editor.lineHighlightBorder#272e55
  • editor.selectionBackground#003669da
  • 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#101b2e
  • editorHoverWidget.background#111b32
  • editorHoverWidget.border#3e435e
  • editorIndentGuide.activeBackground1#c8afee54
  • editorIndentGuide.background1#57575728
  • editorLineNumber.activeForeground#BCBAFF
  • editorLineNumber.foreground#b6ffba
  • editorRuler.foreground#11215e
  • editorWarning.foreground#fad46d
  • editorWidget.background#131d31
  • editorWidget.border#030f27
  • editorWidget.foreground#e7e7e7
  • errorForeground#f85149
  • focusBorder#42435e
  • 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#1d2b4b
  • list.dropBackground#544fa1
  • list.errorForeground#ff7e77
  • list.focusBackground#17274a
  • list.hoverBackground#121f3a
  • list.inactiveSelectionBackground#192641
  • list.inactiveSelectionForeground#89FFA7
  • list.warningForeground#ff7e77
  • menu.background#222b41
  • menu.selectionBackground#151f35
  • menu.separatorBackground#424b64
  • notificationsInfoIcon.foreground#BCBAFF
  • panel.background#101b2e
  • panel.border#6058a5
  • panelTitle.activeBorder#adffc1
  • panelTitle.activeForeground#adffc1
  • panelTitle.inactiveForeground#BCBAFF
  • peekView.border#64617c
  • peekViewEditor.background#020d23
  • peekViewEditor.matchHighlightBackground#003669da
  • peekViewEditor.matchHighlightBorder#003669da
  • peekViewResult.background#081430
  • 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#6058a5f1
  • scrollbarSlider.activeBackground#7c58af
  • scrollbarSlider.background#7858a5a2
  • scrollbarSlider.hoverBackground#7858a5e8
  • sideBar.background#101b2e
  • sideBarSectionHeader.background#151f35
  • sideBarSectionHeader.border#2e2f46
  • sideBarSectionHeader.foreground#BCBAFF
  • statusBar.background#131d31
  • statusBar.border#2e2f46
  • statusBar.debuggingBackground#101b2e
  • statusBar.debuggingForeground#BCBAFF
  • statusBar.foreground#c8c6ff
  • statusBar.noFolderBackground#131d31
  • statusBar.noFolderForeground#c8c6ff
  • statusBarItem.activeBackground#BCBAFF4F
  • statusBarItem.hoverForeground#8eff94
  • statusBarItem.remoteBackground#b4a1ff
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#151f35
  • tab.activeBorderTop#8affa7
  • tab.activeForeground#b1f5b5
  • tab.border#1d273c
  • tab.dragAndDropBorder#6dc984
  • tab.hoverBackground#192540
  • tab.inactiveBackground#101b2e
  • tab.inactiveForeground#a3a1dc
  • tab.selectedBackground#8affa7
  • 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#101b2e
  • terminal.foreground#e4eeff
  • textLink.activeForeground#32a138
  • textLink.foreground#8eff94
  • titleBar.activeBackground#131d31
  • titleBar.border#2e2f46
  • tree.inactiveIndentGuidesStroke#3e374894
  • tree.indentGuidesStroke#c8afee75

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#FFAAEA
meta.attribute.href.html string.quoted.double.html#FFAAEA
string.quoted.double.html, meta.tag.metadata.link.void.html#FFAAEAitalic
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.markdownitalic
markup.bold.markdownbold
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

Shiki preview

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

Loading...

Purple Green Theme - Coding Theme