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.

  • activityBar.background#1d2021
  • activityBar.border#1d2021
  • activityBar.dropBackground#1d2021
  • activityBar.foreground#ffffffbb
  • activityBarBadge.background#ffffffbb
  • activityBarBadge.foreground#1d2021
  • badge.background#ffffffbb
  • badge.foreground#202020
  • button.background#ffffff3d
  • button.foreground#ffffff
  • button.hoverBackground#ffffff60
  • debugToolBar.background#1d2021
  • diffEditor.insertedTextBackground#00e67630
  • diffEditor.insertedTextBorder#00e67600
  • diffEditor.removedTextBackground#f4433630
  • diffEditor.removedTextBorder#f4433600
  • dropdown.background#212425
  • dropdown.border#3f3f3f
  • dropdown.foreground#ffffffbb
  • editor.background#1d2021
  • editor.findMatchBackground#83a59870
  • editor.findMatchHighlightBackground#fe801930
  • editor.findRangeHighlightBackground#83a59870
  • editor.foreground#ffffffbb
  • editor.hoverHighlightBackground#00e67721
  • editor.lineHighlightBackground#3c383660
  • editor.lineHighlightBorder#3c383600
  • editor.selectionBackground#00e67640
  • editor.selectionHighlightBackground#fabd2f40
  • editorBracketMatch.background#92837480
  • editorBracketMatch.border#1d202100
  • editorCodeLens.foreground#a8998490
  • editorCursor.foreground#ffffffbb
  • editorError.foreground#f44336
  • editorGroup.background#3c3836
  • editorGroup.border#1d2021
  • editorGroup.dropBackground#3c383660
  • editorGroupHeader.noTabsBackground#3c3836
  • editorGroupHeader.tabsBackground#1d2021
  • editorGroupHeader.tabsBorder#1d2021
  • editorGutter.addedBackground#b8bb26
  • editorGutter.background#1d202100
  • editorGutter.deletedBackground#fb4934
  • editorGutter.modifiedBackground#00e676
  • editorHoverWidget.background#151718
  • editorHoverWidget.border#3c3836
  • editorIndentGuide.activeBackground#a8998450
  • editorIndentGuide.background#a8998420
  • editorInfo.foreground#2196f3
  • editorLineNumber.foreground#ffffff45
  • editorLink.activeForeground#ffffffbb
  • editorOverviewRuler.addedForeground#00e676
  • editorOverviewRuler.border#1d202100
  • editorOverviewRuler.commonContentForeground#ffffffbb
  • editorOverviewRuler.currentContentForeground#2196f3
  • editorOverviewRuler.deletedForeground#00e676
  • editorOverviewRuler.errorForeground#fb4934
  • editorOverviewRuler.findMatchForeground#bdae93
  • editorOverviewRuler.incomingContentForeground#00e676
  • editorOverviewRuler.infoForeground#d3869b
  • editorOverviewRuler.modifiedForeground#00e676
  • editorOverviewRuler.rangeHighlightForeground#bdae93
  • editorOverviewRuler.selectionHighlightForeground#665c54
  • editorOverviewRuler.warningForeground#ffde03
  • editorOverviewRuler.wordHighlightForeground#665c54
  • editorOverviewRuler.wordHighlightStrongForeground#665c54
  • editorRuler.foreground#a8998440
  • editorSuggestWidget.background#151718
  • editorSuggestWidget.border#3c3836
  • editorSuggestWidget.foreground#ffffffbb
  • editorSuggestWidget.highlightForeground#00e676
  • editorSuggestWidget.selectedBackground#3c383660
  • editorWarning.foreground#ffde03
  • editorWhitespace.foreground#a8998420
  • editorWidget.background#212425
  • editorWidget.border#3c3836
  • errorForeground#fb4934
  • extensionButton.prominentBackground#b8bb2680
  • extensionButton.prominentHoverBackground#b8bb2630
  • focusBorder#ffffff15
  • foreground#ffffffbb
  • gitDecoration.conflictingResourceForeground#ff0266
  • gitDecoration.deletedResourceForeground#f44336
  • gitDecoration.ignoredResourceForeground#ffffff73
  • gitDecoration.modifiedResourceForeground#00e676
  • gitDecoration.untrackedResourceForeground#ffde03
  • input.background#1d2021
  • input.border#3f3f3f
  • input.foreground#ffffffbb
  • input.placeholderForeground#ffffff60
  • inputValidation.errorBackground#f4433680
  • inputValidation.errorBorder#fb4934
  • inputValidation.infoBackground#2196f380
  • inputValidation.infoBorder#00e676
  • inputValidation.warningBackground#ff6f00
  • inputValidation.warningBorder#fabd2f
  • list.activeSelectionBackground#ffffff23
  • list.activeSelectionForeground#ffffffbb
  • list.dropBackground#00000054
  • list.focusBackground#ffffff18
  • list.focusForeground#ffffff
  • list.highlightForeground#ffffffbd
  • list.hoverBackground#ffffff0a
  • list.hoverForeground#ffffffcc
  • list.inactiveSelectionBackground#ffffff13
  • list.inactiveSelectionForeground#ffffffaf
  • merge.border#1d202100
  • merge.currentContentBackground#2196f320
  • merge.currentHeaderBackground#2196f340
  • merge.incomingContentBackground#00e67620
  • merge.incomingHeaderBackground#00e67640
  • notification.background#1d2021
  • notification.buttonBackground#665c54
  • notification.buttonForeground#ffffffbb
  • notification.buttonHoverBackground#665c5450
  • notification.errorBackground#fb4934
  • notification.errorForeground#1d2021
  • notification.foreground#ffffffbb
  • notification.infoBackground#00e676
  • notification.infoForeground#1d2021
  • notification.warningBackground#fabd2f
  • notification.warningForeground#1d2021
  • panel.border#1d2021
  • panelTitle.activeForeground#ffffff
  • peekView.border#3c3836
  • peekViewEditor.background#3c383650
  • peekViewEditor.matchHighlightBackground
  • peekViewEditorGutter.background#3c383650
  • peekViewResult.background#3c383650
  • peekViewResult.fileForeground#ffffffbb
  • peekViewResult.matchHighlightBackground#8ec07c30
  • peekViewResult.selectionBackground#8ec07c30
  • peekViewResult.selectionForeground#8ec07c30
  • peekViewTitle.background#3c383650
  • peekViewTitleDescription.foreground#ffffffbb
  • peekViewTitleLabel.foreground#ffffffbb
  • progressBar.background#00e676
  • scrollbar.shadow#1d2021
  • scrollbarSlider.activeBackground#ffffff7c
  • scrollbarSlider.background#ffffff23
  • scrollbarSlider.hoverBackground#ffffff4d
  • selection.background#ffffff62
  • sideBar.background#1d2021
  • sideBar.border#1d2021
  • sideBar.foreground#ffffffbb
  • sideBarSectionHeader.background#1d2021
  • sideBarSectionHeader.foreground#ffffffbb
  • sideBarTitle.foreground#ffffffbb
  • statusBar.background#1d2021
  • statusBar.border#1d2021
  • statusBar.debuggingBackground#ffab00
  • statusBar.debuggingBorder#1d202100
  • statusBar.debuggingForeground#1d2021
  • statusBar.foreground#ffffffbb
  • statusBar.noFolderBackground#1d2021
  • statusBar.noFolderBorder#1d202100
  • statusBar.prominentBackground#00e676
  • statusBar.prominentHoverBackground#00e67670
  • tab.activeBackground#1d2021
  • tab.activeBorder#1d2021
  • tab.activeForeground#ffffff
  • tab.border#1d2021
  • tab.inactiveBackground#1d2021
  • tab.inactiveForeground#ffffff90
  • tab.unfocusedActiveBorder#1d2021
  • tab.unfocusedActiveForeground#ffffffb9
  • tab.unfocusedInactiveForeground#ffffff54
  • terminal.ansiBlack#3c3836
  • terminal.ansiBlue#2196f3
  • terminal.ansiBrightBlack#928374
  • terminal.ansiBrightBlue#00e676
  • terminal.ansiBrightCyan#8ec07c
  • terminal.ansiBrightGreen#b8bb26
  • terminal.ansiBrightMagenta#df6495
  • terminal.ansiBrightRed#fb4934
  • terminal.ansiBrightWhite#c2c3c3
  • terminal.ansiBrightYellow#fabd2f
  • terminal.ansiCyan#00e676
  • terminal.ansiGreen#98971a
  • terminal.ansiMagenta#ff0266
  • terminal.ansiRed#f44336
  • terminal.ansiWhite#a89984
  • terminal.ansiYellow#ffde03
  • terminal.background#1d2021
  • terminal.foreground#c2c3c3
  • textLink.activeForeground#ffffff
  • textLink.foreground#ffffffdd
  • titleBar.activeBackground#1d2021
  • titleBar.activeForeground#ffffff
  • titleBar.inactiveBackground#1d2021
  • widget.shadow#00000030

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#727072ccitalic
comment storage.type#727072cc
comment entity.name.type#c1c0c0cc
comment variable, comment variable.other#c1c0c0cc
comment keyword.codetag.notation#ab9df2cc
comment.git-status.header.remote#ff6188cc
comment.git-status.header.local#78dce8cc
comment.other.git-status.head#fcfcfacc
string.quoted.docstring, string.quoted.docstring punctuation.definition#727072cc
constant#ab9df2cc
constant.other#fcfcfacc
constant.other.caps#ab9df2cc
constant.other.placeholder.c#fc9867cc
constant.other.property#ab9df2cc
constant.other.citation.latex#ab9df2cc
constant.other.color#ab9df2cc
constant.other.character-class.escape#ab9df2cc
constant.other.key#ab9df2cc
constant.other.symbol#fc9867cc
constant.other.elm#78dce8cc
constant.numeric#ab9df2cc
constant.language#ab9df2cc
constant.character.escape#ab9df2cc
constant.numeric.line-number.find-in-files#5b595ccc
constant.numeric.line-number.match.find-in-files#ffd866cc
entity.name.section#ffd866cc
entity.name.function, entity.name.function.templated#a9dc76cc
entity.name.function.member.static#fcfcfacc
entity.name.type.class.templated, entity.name.type.class.generic, entity.name.type.namespace#78dce8cc
entity.name.label#ab9df2cc
entity.name.function.preprocessor#78dce8cc
entity.name#a9dc76cc
entity.name.class#78dce8cc
entity.name.constant#ab9df2cc
entity.name.namespace#fcfcfacc
entity.other.inherited-class#78dce8ccitalic
entity.name.function#a9dc76cc
entity.name.tag, entity.name.tag.js.jsx support.class.component.js.jsx, entity.name.tag support.class.component, source.vue support.class.component#ff6188cc
entity.name.function.operator#ff6188cc
entity.name.type, entity.name.type.class.reference, entity.name.type.class.value#78dce8cc
entity.other.attribute-name#78dce8ccitalic
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#a9dc76cc
entity.other.attribute-name.id.css#fc9867cc
entity.other.attribute-name.pseudo-class.css, entity.other.pseudo-class.css, entity.other.pseudo-element.css#78dce8ccitalic
entity.name.function, support.function#a9dc76cc
entity.other.git-status.hex#ab9df2cc
entity.other.jinja2.delimiter#939293cc
entity.name.operator.custom-literal#fcfcfacc
entity.name.operator.custom-literal.string#ffd866cc
entity.name.operator.custom-literal.number#ab9df2cc
entity.name.type.rust#78dce8cc
entity.name.lifetime.rust#ff6188cc
invaliditalic
keyword#ff6188cc
keyword.control#ff6188cc
keyword.control.directive#ff6188cc
keyword.operator, keyword.operator.member, keyword.operator.new#ff6188cc
keyword.other.substitution#939293cc
keyword.other.template.begin, keyword.other.template.end#ff6188cc
keyword.operator.heading.restructuredtext, keyword.operator.table.row.restructuredtext keyword.operator.table.data.restructuredtext#939293cc
keyword.other.parenthesis.elm#939293cc
keyword.other.fn.rust, keyword.other.rust, keyword.other.unsafe.rust, keyword.other.where.rust#78dce8cc
keyword.control.rust, keyword.operator.misc.rust#ff6188cc
keyword.declaration.class.ruby, keyword.declaration.function.ruby, keyword.declaration.namespace.ruby#ff6188cc
markup.italicitalic
markup.boldbold
markup.heading#ffd866cc
markup.raw#fc9867cc
markup.underlineunderline
markup.underline.link#a9dc76cc
markup.inserted, markup.inserted punctuation.definition.inserted#a9dc76cc
markup.deleted, markup.deleted punctuation.definition.deleted#ff6188cc
markup.changed, markup.changed punctuation.definition.changed#ffd866cc
markup.ignored, markup.ignored punctuation.definition.ignored#939293cc
markup.untracked#939293cc
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#939293cc
meta.function-call.generic.python, support.function.builtin.python#a9dc76cc
meta.function-call.python meta.function-call.arguments.python#fcfcfacc
meta.instance.constructor#a9dc76cc
meta.attribute-with-value.class string, meta.attribute.class.html string#a9dc76cc
meta.attribute-with-value.id string, meta.attribute.id.html string#fc9867cc
source.json meta.mapping.key string#fcfcfacc
meta.object.member#fcfcfacc
meta.property-list.css variable.other#fc9867cc
entity.name.constant.preprocessor, meta.preprocessor#ab9df2cc
meta.diff.git-diff.header#ffd866cc
meta.type_params.rust#fcfcfacc
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#c1c0c0cc
punctuation#939293cc
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#939293cc
punctuation.definition.group#fcfcfacc
punctuation.definition.comment#727072cc
punctuation.definition.variable, punctuation.definition.keyword.scss, punctuation.definition.entity.css#c1c0c0cc
punctuation.section.embedded, punctuation.section.embedded entity.name.tag, punctuation.section.embedded constant.other, punctuation.section.embedded source, punctuation.section.embedded.begin#fc9867cc
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#ff6188cc
meta.paragraph.markdown meta.dummy.line-break, meta.paragraph.markdown meta.hard-line-break.markdown
region.redish#ff6188cc
region.orangish#fc9867cc
region.yellowish#ffd866cc
region.greenish#a9dc76cc
region.bluish#78dce8cc
region.purplish#ab9df2cc
region.pinkish#ff6188cc
region.whitish#FFFFFFcc
source#fcfcfacc
source.scss, source.sass#939293cc
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#fc9867ccitalic
source.git-show.commit.sha#ab9df2cc
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#939293cc
source.git-show meta.diff.git-diff.header.extended.index.from-sha, source.git-show meta.diff.git-diff.header.extended.index.to-sha#ab9df2cc
source.git-show meta.diff.range.unified#fc9867cc
source.git-show meta.diff.header.from-file, source.git-show meta.diff.header.to-file#939293cc
storage#ff6188cc
storage.type#78dce8ccitalic
storage.type.extends#ff6188ccnormal
storage.type.function.arrow#ff6188ccnormal
storage.modifier, storage.type.modifier#ff6188ccitalic
storage.class.restructuredtext.ref#ab9df2cc
storage.modifier.visibility.rust, storage.modifier.lifetime.rust#ff6188cc
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#78dce8cc
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#ff6188cc
string#ffd866cc
string.unquoted.label#fcfcfacc
string source#fcfcfacc
string source punctuation.section.embedded, string punctuation.definition.string source#939293cc
string.other.link.title, string.other.link.description#ff6188cc
string.other.link.description.title#78dce8cc
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ff6188cc
string.other.ref, string.other.restructuredtext.ref#a9dc76cc
string.other.git-status.help.key#c1c0c0cc
string.other.git-status.remote#ff6188cc
support.constant#78dce8cc
support.constant.handlebars#939293cc
support.type.vendor-prefix.css#c1c0c0cc
support.function#a9dc76cc
support.function.delimiter.elm#939293cc
support.type, entity.name.type.object.console#78dce8ccitalic
support.variable#78dce8cc
support.type.property-name#fcfcfaccnormal
support.class#78dce8cc
support.constant.core.rust#ab9df2cc
text#fcfcfacc
text.find-in-files#fcfcfacc
variable, variable.other#fcfcfacc
variable.parameter, parameters variable.function#fc9867ccitalic
variable.language, variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python#c1c0c0ccitalic
variable.language.arguments#ab9df2cc
variable.other.class#78dce8cc
variable.other.constant#ab9df2cc
variable.other.readwrite#fcfcfacc
variable.other.member#fcfcfacc
variable.other.enummember#ab9df2cc
variable.other.property, variable.other.property.static, variable.other.event#fcfcfacc
variable.function#a9dc76cc
variable.other.substitution#fc9867cc
source.ruby variable.other.readwrite.instance.ruby, source.ruby variable.other.readwrite.class.ruby#ab9df2cc
source.jinja2 variable.other.jinja2.block#a9dc76cc
source.jinja2 variable.other.jinja2#fc9867cc

Shiki preview

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

Loading...

Darkanian Theme by Vahan Sahakyan - VS Code Theme