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#23272e
  • activityBar.foreground#d7dae0
  • activityBarBadge.background#4d78cc
  • activityBarBadge.foreground#f8fafd
  • badge.background#23272e
  • button.background#404754
  • button.secondaryBackground#30333d
  • button.secondaryForeground#c0bdbd
  • checkbox.border#404754
  • debugToolBar.background#1e2227
  • descriptionForeground#abb2bf
  • diffEditor.insertedTextBackground#00809b33
  • dropdown.background#1e2227
  • dropdown.border#1e2227
  • editor.background#23272e
  • editor.findMatchBackground#42557b
  • editor.findMatchBorder#457dff
  • editor.findMatchHighlightBackground#6199ff2f
  • editor.foreground#abb2bf
  • editor.lineHighlightBackground#2c313c
  • editor.selectionBackground#67769660
  • editor.selectionHighlightBackground#ffffff10
  • editor.selectionHighlightBorder#dddddd
  • editor.wordHighlightBackground#d2e0ff2f
  • editor.wordHighlightBorder#7f848e
  • editor.wordHighlightStrongBackground#abb2bf26
  • editor.wordHighlightStrongBorder#7f848e
  • editorActiveLineNumber.foreground#737984
  • editorBracketMatch.background#515a6b
  • editorBracketMatch.border#515a6b
  • editorCursor.background#ffffffc9
  • editorCursor.foreground#528bff
  • editorError.foreground#c24038
  • editorGroup.background#181a1f
  • editorGroup.border#181a1f
  • editorGroupHeader.tabsBackground#1e2227
  • editorGutter.addedBackground#109868
  • editorGutter.deletedBackground#9A353D
  • editorGutter.modifiedBackground#948B60
  • editorHoverWidget.background#1e2227
  • editorHoverWidget.border#181a1f
  • editorHoverWidget.highlightForeground#61afef
  • editorIndentGuide.activeBackground#c8c8c859
  • editorIndentGuide.background#3b4048
  • editorInlayHint.background#2c313c
  • editorInlayHint.foreground#abb2bf
  • editorLineNumber.activeForeground#abb2bf
  • editorLineNumber.foreground#495162
  • editorMarkerNavigation.background#1e2227
  • editorOverviewRuler.addedBackground#109868
  • editorOverviewRuler.deletedBackground#9A353D
  • editorOverviewRuler.modifiedBackground#948B60
  • editorRuler.foreground#abb2bf26
  • editorSuggestWidget.background#1e2227
  • editorSuggestWidget.border#181a1f
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWarning.foreground#d19a66
  • editorWhitespace.foreground#3b4048
  • editorWidget.background#1e2227
  • focusBorder#3e4452
  • gitDecoration.ignoredResourceForeground#636b78
  • input.background#1d1f23
  • list.activeSelectionBackground#2c313a
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#323842
  • list.focusForeground#f0f0f0
  • list.highlightForeground#c5c5c5
  • list.hoverBackground#2c313a
  • list.hoverForeground#fff
  • list.inactiveSelectionBackground#323842
  • list.inactiveSelectionForeground#d7dae0
  • list.warningForeground#d19a66
  • menu.foreground#abb2bf
  • menu.separatorBackground#343a45
  • minimapGutter.addedBackground#109868
  • minimapGutter.deletedBackground#9A353D
  • minimapGutter.modifiedBackground#948B60
  • panel.border#3e4452
  • panelSectionHeader.background#1e2227
  • peekViewEditor.background#1b1d23
  • peekViewEditor.matchHighlightBackground#29244b
  • peekViewResult.background#22262b
  • scrollbar.shadow#23252c
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566660
  • scrollbarSlider.hoverBackground#5a637580
  • settings.focusedRowBackground#23272e
  • settings.headerForeground#fff
  • sideBar.background#1e2227
  • sideBar.foreground#abb2bf
  • sideBarSectionHeader.background#23272e
  • sideBarSectionHeader.foreground#abb2bf
  • statusBar.background#1e2227
  • statusBar.debuggingBackground#cc6633
  • statusBar.debuggingBorder#66017a
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#1e2227
  • statusBarItem.hoverBackground#2c313a
  • statusBarItem.remoteBackground#4d78cc
  • statusBarItem.remoteForeground#f8fafd
  • tab.activeBackground#23272e
  • tab.activeBorder#41ae3c
  • tab.activeForeground#dcdcdc
  • tab.border#181a1f
  • tab.hoverBackground#323842
  • tab.inactiveBackground#1e2227
  • tab.unfocusedHoverBackground#323842
  • terminal.ansiBlack#3f4451
  • terminal.ansiBlue#4aa5f0
  • terminal.ansiBrightBlack#4f5666
  • terminal.ansiBrightBlue#4dc4ff
  • terminal.ansiBrightCyan#4cd1e0
  • terminal.ansiBrightGreen#a5e075
  • terminal.ansiBrightMagenta#de73ff
  • terminal.ansiBrightRed#ff616e
  • terminal.ansiBrightWhite#d7dae0
  • terminal.ansiBrightYellow#f0a45d
  • terminal.ansiCyan#42b3c2
  • terminal.ansiGreen#8cc265
  • terminal.ansiMagenta#c162de
  • terminal.ansiRed#e05561
  • terminal.ansiWhite#e6e6e6
  • terminal.ansiYellow#d18f52
  • terminal.background#23272e
  • terminal.border#3e4452
  • terminal.foreground#abb2bf
  • terminal.selectionBackground#abb2bf30
  • textBlockQuote.background#2e3440
  • textBlockQuote.border#4b5362
  • textLink.foreground#61afef
  • textPreformat.foreground#d19a66
  • titleBar.activeBackground#23272e
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#1e2227
  • titleBar.inactiveForeground#6b717d
  • walkThrough.embeddedEditorBackground#2e3440
  • welcomePage.buttonHoverBackground#404754

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7f848e
entity#FAD000
constant#FF628C
keyword, storage.type.class.js#FF9D00
meta#9EFFFF
invalid#EC3A37F5
meta.brace, punctuation.definition.parameters.begin.js, punctuation.definition.parameters.end.js#E1EFFF
punctuation#E1EFFF
punctuation.definition.parameters#FFEE80
punctuation.definition.template-expression#FFEE80
storage#FAD000
storage.type.function.arrow#FAD000
string, punctuation.definition.string#A5FF90
string.template, punctuation.definition.string.template#3AD900
support#80FFBB
support.function#FF9D00
support.variable.property.dom#9EFFFF
variable#E1EFFF
source.ini entity, meta.embedded.block.ini, source.ini#E1EFFF
source.ini keyword, keyword.other.definition.ini#FAD000
source.ini punctuation.definition#FFEE80
source.ini punctuation.separator, punctuation.separator.key-value.ini#FF9D00
source.css entity, source.stylus entity#3AD900
entity.other.attribute-name.class.css#9EFFFF
entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css#FFB454
entity.name.tag#9EFFFF
source.css support, entity.name.tag.css, source.stylus support#A5FF90
source.css constant, source.css support.constant, source.stylus constant, source.stylus support.constant#FFEE80
source.css string, source.css punctuation.definition.string, source.stylus string, source.stylus punctuation.definition.string#FFEE80
source.css variable, source.stylus variable#9EFFFF
text.html.basic entity.name, punctuation.definition.tag.html, entity.name.tag.inline.any.html, meta.tag.other.html, meta.tag.inline.any.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.tag, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, meta.tag.js, meta.tag.tsx, meta.tag.html#9EFFFF
meta.toc-list.id.html#A5FF90
text.html.basic entity.other#FAD000
meta.tag.metadata.script.html entity.name.tag.html#FAD000
punctuation.definition.string.begin, punctuation.definition.string.end#92FC79
meta.tag.inline.any.html, meta.tag.other#FF9D00
source.json support#FAD000
source.json string, source.json punctuation.definition.string#92FC79
source.js storage.type.function#FB94FF
variable.language, entity.name.type.class.js#FB94FF
entity.other.inherited-class#FFEE80
storage.type.extends.js, storage.type.class.jsdoc#FF9D00
punctuation.definition.block.tag.jsdoc#FF9D00
variable.other.jsdoc, entity.name.type.instance.jsdoc#9EFFFF
variable.other.constant#9EFFFF
punctuation.definition.tag.begin.js, punctuation.definition.tag.end.js#9EFFFF
meta.jsx.children.js#FFFFFF
storage.type, storage.type.class, storage.modifier, keyword.control, keyword.operator#FF9D00
punctuation.definition.bracket.curly#494685
keyword.operator.assignment.tsx, keyword.operator.assignment.jsx#FF9D00
keyword.operator.assignment#FF9D00
meta.jsx.children.tsx#FFFFFF
meta.object-literal.key.js#80FFBB
entity.name.type.class.tsx, entity.name.type.class.jsx, variable.other.readwrite.alias.tsx, variable.other.readwrite.tsx, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.jsx, variable.other.readwrite.alias.js, variable.other.object.tsx, variable.other.object.jsx, variable.other.object, support.class.component.tsx, support.class.component.jsx, entity.name.type.tsx, entity.name.type.jsx, variable.other.readwrite, variable.other.object.js#9EFFFF
variable.other.property, variable.other.object.property#FFEE80
JSXNested#FFFFFF
variable.parameter#9EFFFF
variable.parameter.function.language.special.self.python#9EFFFF
meta.function-call.python, meta.function-call.generic.python, support.function.builtin.python#FAD000
source.ts entity.name.type#80FFBB
source.ts keyword#FAD000
source.ts punctuation.definition.parameters#E1EFFF
meta.arrow.ts punctuation.definition.parameters#FFEE80
source.ts storage#9EFFFF
entity.name.section.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#FAD000bold
markup.inserted.diff, punctuation.definition.inserted.diff#8efa00
markup.deleted.diff, punctuation.definition.deleted.diff#F16E6B
meta.embedded.block.diff#FFFFFF
meta.paragraph.markdown#FFFFFF
punctuation.definition.from-file.diff, meta.diff.header.from-file#B362FF
markup.inline.raw.string.markdown#A599E9
beginning.punctuation.definition.quote.markdown#FAD000
markup.quote.markdown meta.paragraph.markdown, punctuation.definition.quote.begin.markdown#A599E9
meta.separator.markdown#FAD000
markup.bold.markdownbold
markup.italic.markdownitalic
beginning.punctuation.definition.list.markdown, punctuation.definition.list.begin.markdown, markup.list.unnumbered.markdown#FAD000
string.other.link.description.title.markdown punctuation.definition.string.markdown, meta.link.inline.markdown string.other.link.description.title.markdown, string.other.link.description.title.markdown punctuation.definition.string.begin.markdown, string.other.link.description.title.markdown punctuation.definition.string.end.markdown, meta.image.inline.markdown string.other.link.description.title.markdown#A5FF90
meta.link.inline.markdown string.other.link.title.markdown, meta.link.reference.markdown string.other.link.title.markdown, meta.link.reference.def.markdown markup.underline.link.markdown#FAD000underline
markup.underline.link.markdown, string.other.link.description.title.markdown#A599E9
fenced_code.block.language, markup.inline.raw.markdown#9EFFFF
punctuation.definition.markdown, punctuation.definition.raw.markdown, punctuation.definition.heading.markdown, punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#494685
meta.link.inline.markdown punctuation.definition.string.begin.markdown, meta.link.inline.markdown punctuation.definition.string.end.markdown, meta.link.reference.markdown punctuation.definition.string.begin.markdown, meta.link.reference.markdown punctuation.definition.string.end.markdown, string.other.link.description.markdown#FAD000
meta.image.inline.markdown punctuation.definition.string.begin.markdown, meta.image.inline.markdown punctuation.definition.string.end.markdown, string.other.link.description.markdown#FF9D00
markup.underline.link.markdown, punctuation.definition.metadata.markdown, markup.underline.link.image.markdown, constant.other.reference.link.markdown, punctuation.definition.constant.markdown, punctuation.definition.constant.begin.markdown, punctuation.definition.constant.end.markdown#A599E9
text.jade entity.name#9EFFFF
storage.type.function.pug#FF9D00
variable.parameter.function.js#9EFFFF
variable.control.import.include.pug#92FC79
text.jade string.interpolated#FFEE80
storage.type.cs#9EFFFF
entity.name.variable.property.cs#9EFFFF
storage.modifier.cs#80FFBB
source.php entity, variable.other.class.php#9EFFFF
keyword.other.phpdoc.php#FF9D00
entity.name.function.php, support.function.basic_functions.php, meta.function-call.php, variable.other.property#FAD000
variable.other.php, punctuation.definition.variable.php, variable.other.global.php, variable.language.this.php#9EFFFF
storage.modifier.php, keyword.other.namespace.php#FF9D00
entity.name.tag.yaml#FAD000
punctuation.definition.block.sequence.item.yaml#E1EFFF
storage.type.function.php, meta.function.parameters.php#FB94FF
keyword.blade#FF9D00
begin.bracket.round.blade.php, end.bracket.round.blade.php#E1EFFF
support.function.construct.begin.blade, support.function.construct.end.blade#FFEE80
keyword.package.go, keyword.import.go#FF9D00
keyword.function.go#FB94FF
variable.other.assignment.go#9EFFFF
punctuation.definition.string.begin.go, punctuation.definition.string.end.go, support.function.go#FAD000
punctuation.section.embedded.end.ruby, punctuation.section.embedded.begin.ruby, punctuation.section.scope.begin.ruby, punctuation.section.scope.end.ruby#FFEE80
variable.other.constant.ruby#80FFBB
entity.name.type.class.ruby#FB94FF
variable.other.block.ruby, variable.other.ruby#9EFFFF
punctuation.separator.other.ruby#FF9D00
keyword.other.special-method.ruby#FFEE80
storage.type.function.shell#FB94FF
variable.other.special.shell, punctuation.definition.variable.shell#FF9D00
variable.graphql#FAEFA5
keyword.operation.graphql#FB94FF
source.sql#E1EFFF
source.sql keyword.other, support.function.mysqli.php#FAEFA5
support.function.mysqli.php, source.sql support.function#FAD000
string.regexp, string.regexp keyword.other#E1EFFF
keyword.other.DML.sql#FF9D00
punctuation.definition.table.array.toml#E1EFFF
entity.other.attribute-name.table.array.toml, entity.other.attribute-name.table.toml#FF9D00
keyword.key.toml#FAD000
keyword.other.special-method.dockerfile#FAD000
keyword.other.rust#FF9D00
keyword.other.fn.rust#FB94FF
keyword.other.env#FF9D00
variable.other.env#FAD000
source.env#E1EFFF
keyword.other.template.begin.env, keyword.other.template.end.env, keyword.operator.assignment.env#FF9D00
variable.object.property#9EFFFF
string.regexp.js#FB94FF
keyword.rainbow2#FF9D00
markup.deleted#F16E6B
markup.inserted#8efa00
markup.underlineunderline
modifier, this, storage.modifier, entity.other.attribute-name.html, text.html.basic entity.other, markup.quote.markdown meta.paragraph.markdown, markup.italic.markdown, text.jade entity.other.attribute-name.tag, entity.other.attribute-name.tag.pug, keyword, storage, keyword.control, keyword.control.from, keyword.control.flow, keyword.operator.new, keyword.control.import, keyword.control.export, keyword.control.default, keyword.control.trycatch, keyword.control.conditional, storage.type, storage.type.class, storage.modifier.tsx, storage.type.function, storage.modifier.async, variable.language, variable.language.this, variable.language.super, constant.language.null, support.type.primitive, entity.name.method.js, entity.other.attribute-name, punctuation.definition.comment, text.html.basic entity.other.attribute-name, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, source.js constant.other.object.key.js string.unquoted.label.jsitalic

Shiki preview

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

Loading...

Gull Theme - Coding Theme