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.activeBackground#1C1F24
  • activityBar.activeBorder#3BC1EA
  • activityBar.background#0F1014
  • activityBar.foreground#D8DEE9
  • activityBarBadge.background#3BC1EA
  • activityBarBadge.foreground#0F1014
  • badge.background#3BC1EA
  • badge.foreground#0F1014
  • button.background#3BC1EAee
  • button.foreground#0F1014
  • button.hoverBackground#3BC1EA
  • button.secondaryBackground#2A2F37
  • button.secondaryForeground#D8DEE9
  • button.secondaryHoverBackground#2B303B
  • charts.blue#3BC1EA
  • charts.foreground#D8DEE9
  • charts.green#5FC4A4
  • charts.lines#3BC1EA
  • charts.orange#FF7E46
  • charts.purple#A785F6
  • charts.red#F94C66
  • charts.yellow#FFC54D
  • debugConsole.errorForeground#F94C66
  • debugConsole.infoForeground#3BC1EA
  • debugConsole.sourceForeground#616e88
  • debugConsole.warningForeground#FFC54D
  • debugConsoleInputIcon.foreground#3BC1EA
  • debugExceptionWidget.background#2B303B
  • debugExceptionWidget.border#0F1014
  • debugToolBar.background#1C1F24
  • descriptionForeground#D8DEE9e6
  • diffEditor.insertedTextBackground#3BC1EA33
  • diffEditor.removedTextBackground#F94C664d
  • dropdown.background#1C1F24
  • dropdown.border#1C1F24
  • dropdown.foreground#D8DEE9
  • editor.background#0F1014
  • editor.findMatchBackground#3BC1EA66
  • editor.findMatchHighlightBackground#3BC1EA33
  • editor.findRangeHighlightBackground#3BC1EA33
  • editor.focusedStackFrameHighlightBackground#3BC1EA
  • editor.foreground#D8DEE9
  • editor.hoverHighlightBackground#1C1F24
  • editor.inactiveSelectionBackground#2A2F37cc
  • editor.inlineValuesBackground#2B303B
  • editor.inlineValuesForeground#ECEFF4
  • editor.lineHighlightBackground#1C1F24
  • editor.lineHighlightBorder#1C1F24
  • editor.rangeHighlightBackground#2A2F3752
  • editor.selectionBackground#2A2F37cc
  • editor.selectionHighlightBackground#2A2F37cc
  • editor.stackFrameHighlightBackground#3BC1EA
  • editor.wordHighlightBackground#3BC1EA66
  • editor.wordHighlightStrongBackground#3BC1EA99
  • editorBracketHighlight.foreground1#F94C66
  • editorBracketHighlight.foreground2#FF7E46
  • editorBracketHighlight.foreground3#FFC54D
  • editorBracketHighlight.foreground4#5FC4A4
  • editorBracketHighlight.foreground5#3BC1EA
  • editorBracketHighlight.foreground6#A785F6
  • editorBracketHighlight.unexpectedBracket.foreground#F94C66
  • editorBracketMatch.background#0F101400
  • editorBracketMatch.border#3BC1EA
  • editorCodeLens.foreground#2B303B
  • editorCursor.foreground#D8DEE9
  • editorError.border#F94C6600
  • editorError.foreground#F94C66
  • editorGroup.border#1C1F2401
  • editorGroup.dropBackground#1C1F2499
  • editorGroupHeader.border#1C1F2400
  • editorGroupHeader.noTabsBackground#0F1014
  • editorGroupHeader.tabsBackground#0F1014
  • editorGroupHeader.tabsBorder#1C1F2400
  • editorGutter.addedBackground#5FC4A4
  • editorGutter.background#0F1014
  • editorGutter.deletedBackground#F94C66
  • editorGutter.modifiedBackground#FFC54D
  • editorHint.border#FFC54D00
  • editorHint.foreground#FFC54D
  • editorHoverWidget.background#1C1F24
  • editorHoverWidget.border#1C1F24
  • editorIndentGuide.activeBackground#2B303B
  • editorIndentGuide.background#2A2F37b3
  • editorInlayHint.background#2A2F37
  • editorInlayHint.foreground#D8DEE9
  • editorLineNumber.activeForeground#D8DEE9
  • editorLineNumber.foreground#2B303B
  • editorLink.activeForeground#3BC1EA
  • editorMarkerNavigation.background#3BC1EAc0
  • editorMarkerNavigationError.background#F94C66c0
  • editorMarkerNavigationWarning.background#FFC54Dc0
  • editorOverviewRuler.addedForeground#5FC4A4
  • editorOverviewRuler.border#1C1F24
  • editorOverviewRuler.currentContentForeground#1C1F24
  • editorOverviewRuler.deletedForeground#F94C66
  • editorOverviewRuler.errorForeground#F94C66
  • editorOverviewRuler.findMatchForeground#3BC1EA66
  • editorOverviewRuler.incomingContentForeground#1C1F24
  • editorOverviewRuler.infoForeground#3BC1EA
  • editorOverviewRuler.modifiedForeground#FFC54D
  • editorOverviewRuler.rangeHighlightForeground#3BC1EA66
  • editorOverviewRuler.selectionHighlightForeground#3BC1EA66
  • editorOverviewRuler.warningForeground#FFC54D
  • editorOverviewRuler.wordHighlightForeground#3BC1EA66
  • editorOverviewRuler.wordHighlightStrongForeground#3BC1EA66
  • editorRuler.foreground#2A2F37
  • editorSuggestWidget.background#0F1014
  • editorSuggestWidget.border#1C1F24
  • editorSuggestWidget.focusHighlightForeground#3BC1EA
  • editorSuggestWidget.foreground#D8DEE9
  • editorSuggestWidget.highlightForeground#3BC1EA
  • editorSuggestWidget.selectedBackground#2A2F37
  • editorSuggestWidget.selectedForeground#D8DEE9
  • editorWarning.border#FFC54D00
  • editorWarning.foreground#FFC54D
  • editorWhitespace.foreground#2B303Bb3
  • editorWidget.background#0F1014
  • editorWidget.border#1C1F24
  • errorForeground#F94C66
  • extensionButton.prominentBackground#2A2F37
  • extensionButton.prominentForeground#D8DEE9
  • extensionButton.prominentHoverBackground#2B303B
  • focusBorder#1C1F24
  • foreground#D8DEE9
  • gitDecoration.conflictingResourceForeground#3BC1EA
  • gitDecoration.deletedResourceForeground#F94C66
  • gitDecoration.ignoredResourceForeground#D8DEE966
  • gitDecoration.modifiedResourceForeground#FFC54D
  • gitDecoration.stageDeletedResourceForeground#F94C66
  • gitDecoration.stageModifiedResourceForeground#FFC54D
  • gitDecoration.submoduleResourceForeground#3BC1EA
  • gitDecoration.untrackedResourceForeground#5FC4A4
  • input.background#1C1F24
  • input.border#1C1F24
  • input.foreground#D8DEE9
  • input.placeholderForeground#D8DEE999
  • inputOption.activeBackground#3BC1EA
  • inputOption.activeBorder#3BC1EA
  • inputOption.activeForeground#ECEFF4
  • inputValidation.errorBackground#F94C66
  • inputValidation.errorBorder#F94C66
  • inputValidation.infoBackground#3BC1EA
  • inputValidation.infoBorder#3BC1EA
  • inputValidation.warningBackground#FF7E46
  • inputValidation.warningBorder#FF7E46
  • keybindingLabel.background#2B303B
  • keybindingLabel.border#2B303B
  • keybindingLabel.bottomBorder#2B303B
  • keybindingLabel.foreground#D8DEE9
  • list.activeSelectionBackground#3BC1EA
  • list.activeSelectionForeground#0F1014
  • list.dropBackground#3BC1EA99
  • list.errorForeground#F94C66
  • list.focusBackground#3BC1EA99
  • list.focusForeground#D8DEE9
  • list.focusHighlightForeground#ECEFF4
  • list.highlightForeground#3BC1EA
  • list.hoverBackground#1C1F24
  • list.hoverForeground#ECEFF4
  • list.inactiveFocusBackground#2A2F37cc
  • list.inactiveSelectionBackground#2A2F37
  • list.inactiveSelectionForeground#D8DEE9
  • list.warningForeground#FFC54D
  • merge.border#1C1F2400
  • merge.currentContentBackground#3BC1EA4d
  • merge.currentHeaderBackground#3BC1EA66
  • merge.incomingContentBackground#3BC1EA4d
  • merge.incomingHeaderBackground#3BC1EA66
  • minimap.background#0F1014
  • minimap.errorHighlight#F94C66cc
  • minimap.findMatchHighlight#3BC1EA
  • minimap.selectionHighlight#3BC1EAcc
  • minimap.warningHighlight#FFC54Dcc
  • minimapGutter.addedBackground#5FC4A4
  • minimapGutter.deletedBackground#F94C66
  • minimapGutter.modifiedBackground#FFC54D
  • minimapSlider.activeBackground#2A2F37aa
  • minimapSlider.background#2A2F3799
  • minimapSlider.hoverBackground#2A2F37aa
  • notificationCenter.border#1C1F2400
  • notificationCenterHeader.background#0F1014
  • notificationCenterHeader.foreground#3BC1EA
  • notificationLink.foreground#3BC1EA
  • notifications.background#1C1F24
  • notifications.border#0F1014
  • notifications.foreground#D8DEE9
  • notificationToast.border#1C1F2400
  • panel.background#0F1014
  • panel.border#1C1F24
  • panelTitle.activeBorder#3BC1EA00
  • panelTitle.activeForeground#3BC1EA
  • panelTitle.inactiveForeground#D8DEE9
  • peekView.border#2B303B
  • peekViewEditor.background#0F1014
  • peekViewEditor.matchHighlightBackground#3BC1EA4d
  • peekViewEditorGutter.background#0F1014
  • peekViewResult.background#0F1014
  • peekViewResult.fileForeground#3BC1EA
  • peekViewResult.lineForeground#D8DEE966
  • peekViewResult.matchHighlightBackground#3BC1EAcc
  • peekViewResult.selectionBackground#2A2F37
  • peekViewResult.selectionForeground#D8DEE9
  • peekViewTitle.background#1C1F24
  • peekViewTitleDescription.foreground#D8DEE9
  • peekViewTitleLabel.foreground#3BC1EA
  • pickerGroup.border#1C1F24
  • pickerGroup.foreground#3BC1EA
  • progressBar.background#3BC1EA
  • quickInputList.focusBackground#3BC1EA
  • quickInputList.focusForeground#0F1014
  • sash.hoverBorder#3BC1EA
  • scrollbar.shadow#00000066
  • scrollbarSlider.activeBackground#2A2F37aa
  • scrollbarSlider.background#2A2F3799
  • scrollbarSlider.hoverBackground#2A2F37aa
  • selection.background#3BC1EA99
  • sideBar.background#0F1014
  • sideBar.border#1C1F24
  • sideBar.foreground#D8DEE9
  • sideBarSectionHeader.background#1C1F24
  • sideBarSectionHeader.foreground#D8DEE9
  • sideBarTitle.foreground#D8DEE9
  • statusBar.background#1C1F24
  • statusBar.border#1C1F2400
  • statusBar.debuggingBackground#3BC1EA
  • statusBar.debuggingForeground#D8DEE9
  • statusBar.foreground#D8DEE9
  • statusBar.noFolderBackground#1C1F24
  • statusBar.noFolderForeground#D8DEE9
  • statusBarItem.activeBackground#2B303B
  • statusBarItem.errorBackground#1C1F24
  • statusBarItem.errorForeground#F94C66
  • statusBarItem.hoverBackground#2A2F37
  • statusBarItem.prominentBackground#1C1F24
  • statusBarItem.prominentHoverBackground#2A2F37
  • statusBarItem.warningBackground#FFC54D
  • statusBarItem.warningForeground#0F1014
  • tab.activeBackground#1C1F24
  • tab.activeBorder#3BC1EA00
  • tab.activeBorderTop#3BC1EA00
  • tab.activeForeground#D8DEE9
  • tab.border#1C1F2400
  • tab.hoverBackground#1C1F24cc
  • tab.hoverBorder#3BC1EA00
  • tab.inactiveBackground#0F1014
  • tab.inactiveForeground#D8DEE966
  • tab.lastPinnedBorder#2B303B
  • tab.unfocusedActiveBorder#3BC1EA00
  • tab.unfocusedActiveBorderTop#3BC1EA00
  • tab.unfocusedActiveForeground#D8DEE999
  • tab.unfocusedHoverBackground#1C1F24b3
  • tab.unfocusedHoverBorder#3BC1EA00
  • tab.unfocusedInactiveForeground#D8DEE966
  • terminal.ansiBlack#1C1F24
  • terminal.ansiBlue#3BC1EA
  • terminal.ansiBrightBlack#2B303B
  • terminal.ansiBrightBlue#3BC1EA
  • terminal.ansiBrightCyan#3BC1EA
  • terminal.ansiBrightGreen#5FC4A4
  • terminal.ansiBrightMagenta#A785F6
  • terminal.ansiBrightRed#F94C66
  • terminal.ansiBrightWhite#ECEFF4
  • terminal.ansiBrightYellow#FFC54D
  • terminal.ansiCyan#3BC1EA
  • terminal.ansiGreen#5FC4A4
  • terminal.ansiMagenta#A785F6
  • terminal.ansiRed#F94C66
  • terminal.ansiWhite#E5E9F0
  • terminal.ansiYellow#FFC54D
  • terminal.background#0F1014
  • terminal.foreground#D8DEE9
  • terminal.tab.activeBorder#3BC1EA
  • textBlockQuote.background#1C1F24
  • textBlockQuote.border#3BC1EA
  • textCodeBlock.background#2B303B
  • textLink.activeForeground#3BC1EA
  • textLink.foreground#3BC1EA
  • textPreformat.foreground#3BC1EA
  • textSeparator.foreground#ECEFF4
  • titleBar.activeBackground#0F1014
  • titleBar.activeForeground#D8DEE9
  • titleBar.border#0F101400
  • titleBar.inactiveBackground#0F1014
  • titleBar.inactiveForeground#D8DEE966
  • tree.indentGuidesStroke#616e88
  • walkThrough.embeddedEditorBackground#0F1014
  • widget.shadow#00000066

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

Shiki preview

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

Loading...

Mr Code by Ahmad Jubran - VS Code Theme