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.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
  • editorBracketMatch.background#515a6b
  • editorBracketMatch.border#515a6b
  • editorCursor.background#ffffffc9
  • editorCursor.foreground#528bff
  • editorError.foreground#c24038
  • 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
  • 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#000000
  • statusBar.border#43bad875
  • statusBar.debuggingBackground#43B9D815
  • statusBar.debuggingForeground#43B9D8
  • statusBar.foreground#43B9D8
  • statusBar.noFolderBackground#1e2122
  • statusBar.noFolderForeground#43B9D8
  • statusBarItem.hoverBackground#101010
  • tab.activeBackground#1e2122
  • tab.activeBorder#43B9D8
  • tab.activeForeground#43B9D8
  • tab.activeModifiedBorder#57584f
  • tab.border#181a1f
  • tab.hoverBackground#323842
  • tab.hoverBorder#57584f
  • tab.inactiveBackground#1e2227
  • tab.inactiveForeground#ffffff
  • tab.inactiveModifiedBorder#57584f
  • tab.lastPinnedBorder#57584f
  • tab.unfocusedActiveBorder#919288
  • tab.unfocusedActiveForeground#c0c1b5
  • tab.unfocusedActiveModifiedBorder#3b3c35
  • tab.unfocusedHoverBackground#323842
  • tab.unfocusedHoverBorder#272822
  • tab.unfocusedInactiveForeground#919288
  • tab.unfocusedInactiveModifiedBorder#3b3c35
  • 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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment keyword, comment markup.underline.link, comment string, comment punctuation.definition, comment punctuation, comment text#6e7066italic
comment storage.type#6e7066
comment entity.name.type#c0c1b5
comment variable, comment variable.other#c0c1b5
comment keyword.codetag.notation#ae81ff
comment.git-status.header.remote#f92672
comment.git-status.header.local#66d9ef
comment.other.git-status.head#fdfff1
string.quoted.docstring, string.quoted.docstring punctuation.definition#6e7066
constant#ae81ff
constant.other#fdfff1
constant.other.caps#ae81ff
constant.other.placeholder.c#fd971f
constant.other.property#ae81ff
constant.other.citation.latex#ae81ff
constant.other.color#ae81ff
constant.other.character-class.escape#ae81ff
constant.other.key#ae81ff
constant.other.symbol#fd971f
constant.other.elm#66d9ef
constant.numeric#ae81ff
constant.language#ae81ff
constant.character.escape#ae81ff
constant.numeric.line-number.find-in-files#57584f
constant.numeric.line-number.match.find-in-files#e6db74
entity.name.section#e6db74
entity.name.function, entity.name.function.templated#a6e22e
entity.name.function.member.static#fdfff1
entity.name.type.class.templated, entity.name.type.class.generic, entity.name.type.namespace#66d9ef
entity.name.label#ae81ff
entity.name.function.preprocessor#66d9ef
entity.name#a6e22e
entity.name.class#66d9ef
entity.name.constant#ae81ff
entity.name.namespace#fdfff1
entity.other.inherited-class#66d9efitalic
entity.name.function#a6e22e
entity.name.tag, entity.name.tag.js.jsx support.class.component.js.jsx, entity.name.tag support.class.component, source.vue support.class.component#f92672
entity.name.function.operator#f92672
entity.name.type, entity.name.type.class.reference, entity.name.type.class.value#66d9ef
entity.other.attribute-name#66d9efitalic
entity.other.attribute-name.class.css, entity.other.attribute-name.parent-selector-suffix.css, entity.other.attribute-name.parent-selector-suffix.css punctuation.definition.entity.css, entity.other.attribute-name.css, entity.other.animation-name.css#a6e22e
entity.other.attribute-name.id.css#fd971f
entity.other.attribute-name.pseudo-class.css, entity.other.pseudo-class.css, entity.other.pseudo-element.css#66d9efitalic
entity.name.function, support.function#a6e22e
entity.other.git-status.hex#ae81ff
entity.other.jinja2.delimiter#919288
entity.name.operator.custom-literal#fdfff1
entity.name.operator.custom-literal.string#e6db74
entity.name.operator.custom-literal.number#ae81ff
entity.name.type.rust#66d9ef
entity.name.lifetime.rust#f92672
invaliditalic
keyword#f92672
keyword.control#f92672
keyword.control.directive#f92672
keyword.operator, keyword.operator.member, keyword.operator.new#f92672
keyword.other.substitution#919288
keyword.other.template.begin, keyword.other.template.end#f92672
keyword.operator.heading.restructuredtext, keyword.operator.table.row.restructuredtext keyword.operator.table.data.restructuredtext#919288
keyword.other.parenthesis.elm#919288
keyword.other.fn.rust, keyword.other.rust, keyword.other.unsafe.rust, keyword.other.where.rust#66d9ef
keyword.control.rust, keyword.operator.misc.rust#f92672
keyword.declaration.class.ruby, keyword.declaration.function.ruby, keyword.declaration.namespace.ruby#f92672
markup.italicitalic
markup.boldbold
markup.heading#e6db74
markup.raw#fd971f
markup.underlineunderline
markup.underline.link#a6e22e
markup.inserted, markup.inserted punctuation.definition.inserted#a6e22e
markup.deleted, markup.deleted punctuation.definition.deleted#f92672
markup.changed, markup.changed punctuation.definition.changed#e6db74
markup.ignored, markup.ignored punctuation.definition.ignored#919288
markup.untracked#919288
markup.quoteitalic
meta.brace.round, meta.brace.square, meta.brace.curly, meta.delimiter.comma.js, meta.function-call.without-arguments.js, meta.function-call.method.without-arguments.js#919288
meta.function-call.generic.python, support.function.builtin.python#a6e22e
meta.function-call.python meta.function-call.arguments.python#fdfff1
meta.instance.constructor#a6e22e
meta.attribute-with-value.class string, meta.attribute.class.html string#a6e22e
meta.attribute-with-value.id string, meta.attribute.id.html string#fd971f
source.json meta.mapping.key string#fdfff1
meta.object.member#fdfff1
meta.property-list.css variable.other#fd971f
entity.name.constant.preprocessor, meta.preprocessor#ae81ff
meta.diff.git-diff.header#e6db74
meta.type_params.rust#fdfff1
meta.attribute.rust, meta.annotation.rust, variable.language.rust, variable.annotation.rust, meta.annotation.rust string, meta.annotation.rust keyword, meta.annotation.rust keyword.operator, meta.attribute.rust string#c0c1b5
punctuation#919288
punctuation.definition.tag, punctuation.definition.tag source, punctuation.definition.group.begin.ruby, punctuation.definition.group.end.ruby, punctuation.definition.group.begin.css, punctuation.definition.group.end.css, punctuation.definition.string.end.html source.css#919288
punctuation.definition.group#fdfff1
punctuation.definition.comment#6e7066
punctuation.definition.variable, punctuation.definition.keyword.scss, punctuation.definition.entity.css#c0c1b5
punctuation.section.embedded, punctuation.section.embedded entity.name.tag, punctuation.section.embedded constant.other, punctuation.section.embedded source, punctuation.section.embedded.begin#fd971f
punctuation.template-string.element.begin, punctuation.template-string.element.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end, string.quoted.template punctuation.definition.string.begin, string.quoted.template punctuation.definition.string.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#f92672
entity.name.section.markdown#43b9d8bold
punctuation.definition.heading.markdown#43b9d8bold
punctuation.definition.list.begin.markdown#e5c07b
markup.heading.setext#abb2bf
punctuation.definition.bold.markdown#d19a66
markup.inline.raw.markdown#98c379
markup.inline.raw.string.markdown#98c379
punctuation.definition.raw.markdown#e5c07b
punctuation.definition.list.markdown#e5c07b
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#e06c75
beginning.punctuation.definition.list.markdown#e06c75
punctuation.definition.metadata.markdown#e06c75
markup.underline.link.markdown,markup.underline.link.image.markdown#c678dd
string.other.link.title.markdown,string.other.link.description.markdown#61afef
region.redish#f92672
region.orangish#fd971f
region.yellowish#e6db74
region.greenish#a6e22e
region.bluish#66d9ef
region.purplish#ae81ff
region.pinkish#f92672
region.whitish#FFFFFF
source#fdfff1
source.scss, source.sass#919288
source.sass variable.other, source.sass variable.sass, source.scss variable.other, source.scss variable.scss, source.scss variable.sass, source.css variable.other, source.css variable.scss, source.less variable.other, source.less variable.other.less, source.less variable.declaration.less#fd971fitalic
source.git-show.commit.sha#ae81ff
source.git-show.author, source.git-show.date, source.git-diff.command, source.git-diff.command meta.diff.git-diff.header.from-file, source.git-diff.command meta.diff.git-diff.header.to-file#919288
source.git-show meta.diff.git-diff.header.extended.index.from-sha, source.git-show meta.diff.git-diff.header.extended.index.to-sha#ae81ff
source.git-show meta.diff.range.unified#fd971f
source.git-show meta.diff.header.from-file, source.git-show meta.diff.header.to-file#919288
storage#f92672
storage.type#66d9efitalic
storage.type.extends#f92672normal
storage.type.function.arrow#f92672normal
storage.modifier, storage.type.modifier#f92672italic
storage.class.restructuredtext.ref#ae81ff
storage.modifier.visibility.rust, storage.modifier.lifetime.rust#f92672
storage.modifier.const.rust, storage.modifier.dyn.rust, storage.modifier.mut.rust, storage.modifier.static.rust, storage.type.rust, storage.type.core.rust, storage.class.std.rust#66d9ef
storage.type.rust, storage.modifier.const.rust, storage.modifier.dyn.rust, storage.modifier.mut.rust, storage.modifier.static.rust, keyword.other.rust, keyword.other.where.rust#f92672
string#e6db74
string.unquoted.label#fdfff1
string source#fdfff1
string source punctuation.section.embedded, string punctuation.definition.string source#919288
string.other.link.title, string.other.link.description#f92672
string.other.link.description.title#66d9ef
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#f92672
string.other.ref, string.other.restructuredtext.ref#a6e22e
string.other.git-status.help.key#c0c1b5
string.other.git-status.remote#f92672
support.constant#66d9ef
support.constant.handlebars#919288
support.type.vendor-prefix.css#c0c1b5
support.function#a6e22e
support.function.delimiter.elm#919288
support.type, entity.name.type.object.console#66d9efitalic
support.variable#66d9ef
support.type.property-name#fdfff1normal
support.class#66d9ef
support.constant.core.rust#ae81ff
text#fdfff1
text.find-in-files#fdfff1
variable, variable.other#fdfff1
variable.parameter, parameters variable.function#fd971fitalic
variable.language, variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python#c0c1b5italic
variable.language.arguments#ae81ff
variable.other.class#66d9ef
variable.other.constant#ae81ff
variable.other.readwrite#fdfff1
variable.other.member#fdfff1
variable.other.enummember#ae81ff
variable.other.property, variable.other.property.static, variable.other.event#fdfff1
variable.function#a6e22e
variable.other.substitution#fd971f
source.ruby variable.other.readwrite.instance.ruby, source.ruby variable.other.readwrite.class.ruby#ae81ff
source.jinja2 variable.other.jinja2.block#a6e22e
source.jinja2 variable.other.jinja2#fd971f
myMonokai by Leiyi548 - VS Code Theme