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.activeBorder#2BC840
  • activityBar.background#363736
  • activityBar.border#2b2b2b
  • activityBar.foreground#d7d7d7
  • activityBar.inactiveForeground#868686
  • activityBarBadge.background#26282F
  • activityBarBadge.foreground#ffffff
  • badge.background#0063a5
  • button.background#2b3c5d
  • debugExceptionWidget.background#051336
  • debugExceptionWidget.border#ab395b
  • debugToolBar.background#051336
  • diffEditor.insertedTextBackground#31958a55
  • diffEditor.removedTextBackground#892f4688
  • dropdown.background#181f2f
  • editorGroup.border#2b2b4a
  • editorGroup.dropBackground#5a5d25aa
  • editorGroupHeader.tabsBackground#000000
  • editorHoverWidget.background#001984
  • editorHoverWidget.border#ffffff
  • editorIndentGuide.activeBackground1#204972
  • editorIndentGuide.background1#002952
  • editorLineNumber.activeForeground#80a2c2
  • editorLineNumber.foreground#406385
  • editorLink.activeForeground#0063a5
  • editorMarkerNavigation.background#000000
  • editorMarkerNavigationError.background#ab395b
  • editorMarkerNavigationWarning.background#5b7e7a
  • editorWidget.background#262641
  • extensionButton.prominentBackground#5f8b3b
  • extensionButton.prominentHoverBackground#5f8b3bbb
  • focusBorder#596f99
  • input.background#181f2f
  • input.placeholderForeground#a6a6a6
  • inputOption.activeBorder#1d4a87
  • inputValidation.errorBackground#a22d44
  • inputValidation.errorBorder#ab395b
  • inputValidation.infoBackground#051336
  • inputValidation.infoBorder#384078
  • inputValidation.warningBackground#5b7e7a
  • inputValidation.warningBorder#5b7e7a
  • list.activeSelectionBackground#08286b
  • list.dropBackground#041d52
  • list.highlightForeground#0063a5
  • list.hoverBackground#061940
  • list.inactiveSelectionBackground#152037
  • menu.background#252526
  • menu.foreground#cccccc
  • menu.selectionBackground#0078d4
  • menu.separatorBackground#454545
  • notificationCenterHeader.background#1f1f1f
  • notificationCenterHeader.foreground#cccccc
  • notifications.background#1f1f1f
  • notifications.border#2b2b2b
  • notifications.foreground#cccccc
  • panel.background#181818
  • panel.border#2b2b4a
  • panelInput.border#2b2b2b
  • panelTitle.activeBorder#2BC840
  • panelTitle.activeForeground#cccccc
  • panelTitle.inactiveForeground#9d9d9d
  • peekView.border#2b2b4a
  • peekViewEditor.background#10192c
  • peekViewEditor.matchHighlightBackground#eeeeee33
  • peekViewResult.background#060621
  • peekViewResult.matchHighlightBackground#eeeeee44
  • peekViewTitle.background#10192c
  • pickerGroup.border#596f99
  • pickerGroup.foreground#596f99
  • ports.iconRunningProcessForeground#80a2c2
  • progressBar.background#0063a5
  • quickInput.background#222222
  • quickInput.foreground#cccccc
  • quickInputList.focusBackground#08286b
  • scrollbar.shadow#515e91aa
  • scrollbarSlider.activeBackground#3b3f5188
  • scrollbarSlider.background#1f2230aa
  • scrollbarSlider.hoverBackground#3b3f5188
  • selection.background#008000
  • settings.dropdownBackground#313131
  • settings.dropdownBorder#3c3c3c
  • settings.headerForeground#ffffff
  • settings.modifiedItemIndicator#bb800966
  • settings.numberInputBackground#292929
  • settings.textInputBackground#292929
  • sideBar.background#0a0a20
  • sideBar.border#2b2b2b
  • sideBar.foreground#cccccc
  • sideBarSectionHeader.background#10192c
  • sideBarSectionHeader.border#2b2b2b
  • sideBarSectionHeader.foreground#cccccc
  • sideBarTitle.foreground#cccccc
  • statusBar.background#3D428B
  • statusBar.debuggingBackground#cc6633
  • statusBar.debuggingForeground#ffffff
  • statusBar.focusBorder#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#68217a
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.activeBackground#ffffff2e
  • statusBarItem.compactHoverBackground#ffffff33
  • statusBarItem.errorBackground#c72e0f
  • statusBarItem.errorForeground#ffffff
  • statusBarItem.errorHoverBackground#ffffff1f
  • statusBarItem.errorHoverForeground#ffffff
  • statusBarItem.focusBorder#ffffff
  • statusBarItem.hoverBackground#ffffff1f
  • statusBarItem.hoverForeground#ffffff
  • statusBarItem.offlineBackground#6c1717
  • statusBarItem.offlineForeground#ffffff
  • statusBarItem.offlineHoverBackground#ffffff1f
  • statusBarItem.offlineHoverForeground#ffffff
  • statusBarItem.prominentBackground#00000080
  • statusBarItem.prominentForeground#ffffff
  • statusBarItem.prominentHoverBackground#0000004d
  • statusBarItem.prominentHoverForeground#ffffff
  • statusBarItem.remoteBackground#44328B
  • statusBarItem.remoteForeground#ffffff
  • statusBarItem.remoteHoverBackground#a0d7091f
  • statusBarItem.remoteHoverForeground#ffffff
  • statusBarItem.warningBackground#7a6400
  • statusBarItem.warningForeground#ffffff
  • statusBarItem.warningHoverBackground#ffffff1f
  • statusBarItem.warningHoverForeground#ffffff
  • tab.activeBackground#1f1f1f
  • tab.activeBorder#1f1f1f
  • tab.activeBorderTop#2BC840
  • tab.activeForeground#ffffff
  • tab.border#020000
  • tab.hoverBackground#1f1f1f
  • tab.inactiveBackground#141414
  • tab.inactiveForeground#9d9d9d
  • tab.lastPinnedBorder#2b3c5d
  • tab.selectedBackground#222222
  • tab.selectedBorderTop#2BC840
  • tab.selectedForeground#ffffffa0
  • tab.unfocusedActiveBorder#1f1f1f
  • tab.unfocusedActiveBorderTop#2b2b2b
  • tab.unfocusedHoverBackground#1f1f1f
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#0451a5
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#0451a5
  • terminal.ansiBrightCyan#0598bc
  • terminal.ansiBrightGreen#14ce14
  • terminal.ansiBrightMagenta#bc05bc
  • terminal.ansiBrightRed#cd3131
  • terminal.ansiBrightWhite#a5a5a5
  • terminal.ansiBrightYellow#b5ba00
  • terminal.ansiCyan#0598bc
  • terminal.ansiGreen#107c10
  • terminal.ansiMagenta#bc05bc
  • terminal.ansiRed#cd3131
  • terminal.ansiWhite#555555
  • terminal.ansiYellow#949800
  • terminal.background#012456
  • terminal.border#80808059
  • terminal.dropBackground#2677cb2e
  • terminal.findMatchBackground#a8ac94e8
  • terminal.findMatchHighlightBackground#ea5c0055
  • terminal.foreground#f5f5f5
  • terminal.hoverHighlightBackground#add6ff13
  • terminal.inactiveSelectionBackground#94c6f780
  • terminal.initialHintForeground#00000077
  • terminal.selectionBackground#94c6f7
  • terminalCommandDecoration.defaultBackground#00000040
  • terminalCommandDecoration.errorBackground#e51400
  • terminalCommandDecoration.successBackground#2090d3
  • terminalOverviewRuler.border#7f7f7f4d
  • terminalOverviewRuler.cursorForeground#a0a0a0cc
  • terminalOverviewRuler.findMatchForeground#d186167e
  • titleBar.activeBackground#373737
  • titleBar.activeForeground#cccccc
  • titleBar.border#2b2b2b
  • titleBar.inactiveBackground#2B2C2B
  • titleBar.inactiveForeground#9d9d9d
  • welcomePage.progress.foreground#0078d4
  • welcomePage.tileBackground#2b2b2b
  • widget.border#313131

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#fcfcfa—
comment, comment keyword, comment markup.underline.link, comment string, comment punctuation.definition, comment punctuation, comment text#726f72italic
comment storage.type#726f72—
comment entity.name.type#c1bfbf—
comment variable, comment variable.other#c1bfbf—
comment keyword, comment entity.name.tag, entity.name.tag.documentation#c1bfbf—
comment keyword.codetag.notation#a898f6—
comment.git-status.header.remote#ff6187—
comment.git-status.header.local#72e0ed—
comment.other.git-status.head#fcfcf9—
string.quoted.docstring, string.quoted.docstring punctuation.definition#726f72—
constant#a898f6—
constant.other#fcfcf9—
constant.other.caps#a898f6—
constant.other.placeholder.c#ff9663—
constant.other.property#a898f6—
constant.other.citation.latex#a898f6—
constant.other.color#a898f6—
constant.other.character-class.escape#a898f6—
constant.other.key#a898f6—
constant.other.symbol#ff9663—
constant.other.elm#72e0ed—
constant.numeric#a898f6—
constant.language#a898f6—
constant.character.escape#a898f6—
constant.numeric.line-number.find-in-files#5b585c—
constant.numeric.line-number.match.find-in-files#ffd865—
entity.name.section#ffd865—
entity.name.function, entity.name.function.templated, entity.name.function.member.static#a9e170—
entity.name.type.class.templated, entity.name.type.class.generic, entity.name.type.namespace#72e0ed—
entity.name.label#a898f6—
entity.name.function.preprocessor#72e0ed—
entity.name#a9e170—
entity.name.class#72e0ed—
entity.name.constant#a898f6—
entity.name.namespace#fcfcf9—
entity.other.inherited-class#72e0editalic
entity.name.function#a9e170—
entity.name.tag, entity.name.tag.js.jsx support.class.component.js.jsx, entity.name.tag support.class.component, source.vue support.class.component#ff6187—
entity.name.function.operator#ff6187—
meta.brackets entity.name.function.operator, punctuation.separator entity.name.function.operator#939193—
entity.name.type, entity.name.type.class.reference, entity.name.type.class.value#72e0ed—
entity.other.attribute-name#72e0editalic
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#a9e170—
entity.other.attribute-name.id.css#ff9663—
entity.other.attribute-name.pseudo-class.css, entity.other.pseudo-class.css, entity.other.pseudo-element.css#72e0editalic
entity.name.function, support.function#a9e170—
entity.other.git-status.hex#a898f6—
entity.other.jinja2.delimiter#939193—
entity.name.operator.custom-literal#fcfcf9—
entity.name.operator.custom-literal.string#ffd865—
entity.name.operator.custom-literal.number#a898f6—
entity.name.type.rust#72e0ed—
entity.name.lifetime.rust#ff6187—
invalid#ff6187italic underline
invalid.deprecated#ff9663italic underline
keyword#ff6187—
keyword.control#ff6187—
keyword.control.directive#ff6187—
keyword.operator, keyword.operator.member, keyword.operator.new#ff6187—
keyword.other.substitution#939193—
keyword.other.template.begin, keyword.other.template.end#ff6187—
keyword.operator.heading.restructuredtext, keyword.operator.table.row.restructuredtext keyword.operator.table.data.restructuredtext#939193—
keyword.other.parenthesis.elm#939193—
keyword.other.fn.rust, keyword.other.rust, keyword.other.unsafe.rust, keyword.other.where.rust#72e0ed—
keyword.control.rust, keyword.operator.misc.rust#ff6187—
keyword.declaration.class.ruby, keyword.declaration.function.ruby, keyword.declaration.namespace.ruby#ff6187—
markup.italic—italic
markup.bold—bold
markup.heading#ffd865—
markup.raw#ff9663—
markup.underline—underline
markup.underline.link#a9e170—
markup.inserted, markup.inserted punctuation.definition.inserted#a9e170—
markup.deleted, markup.deleted punctuation.definition.deleted#ff6187—
markup.changed, markup.changed punctuation.definition.changed#ffd865—
markup.ignored, markup.ignored punctuation.definition.ignored#939193—
markup.untracked#939193—
markup.quote—italic
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#939193—
meta.function-call.generic.python, support.function.builtin.python#a9e170—
meta.function-call.python meta.function-call.arguments.python#fcfcf9—
meta.instance.constructor#a9e170—
meta.attribute-with-value.class string, meta.attribute.class.html string#a9e170—
meta.attribute-with-value.id string, meta.attribute.id.html string#ff9663—
source.json meta.mapping.key string#fcfcf9—
source.yaml meta.mapping.key string#ff6187—
meta.object.member#fcfcf9—
meta.property-list.css variable.other#ff9663—
entity.name.constant.preprocessor, meta.preprocessor#a898f6—
meta.diff.git-diff.header#ffd865—
meta.type_params.rust#fcfcf9—
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#c1bfbf—
meta.type variable, meta.type variable.other.readwrite#a898f6—
punctuation#939193—
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, punctuation.definition.block, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.separator.parameter, punctuation.accessor, punctuation.terminator#939193—
punctuation.definition.group#fcfcf9—
punctuation.definition.comment#726f72—
punctuation.definition.variable, punctuation.definition.keyword.scss, punctuation.definition.entity.css#c1bfbf—
punctuation.section.embedded, punctuation.section.embedded entity.name.tag, punctuation.section.embedded constant.other, punctuation.section.embedded source, punctuation.section.embedded.begin#ff9663—
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#ff6187—
meta.paragraph.markdown meta.dummy.line-break, meta.paragraph.markdown meta.hard-line-break.markdown——
markup.underline.link punctuation#a9e170—
meta.brace.round, meta.brace.square, keyword.operator.type.annotation, meta.type storage.modifier.array#939193—
region.redish#ff6187—
region.orangish#ff9663—
region.yellowish#ffd865—
region.greenish#a9e170—
region.bluish#72e0ed—
region.purplish#a898f6—
region.pinkish#ff6187—
region.whitish#ffffff—
source#fcfcf9—
source.scss, source.sass#939193—
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#ff9663italic
source.git-show.commit.sha#a898f6—
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#939193—
source.git-show meta.diff.git-diff.header.extended.index.from-sha, source.git-show meta.diff.git-diff.header.extended.index.to-sha#a898f6—
source.git-show meta.diff.range.unified#ff9663—
source.git-show meta.diff.header.from-file, source.git-show meta.diff.header.to-file#939193—
storage#ff6187—
storage.type#72e0editalic
storage.type.extends#ff6187normal
storage.type.function.arrow#ff6187normal
storage.modifier, storage.type.modifier#ff6187italic
storage.class.restructuredtext.ref#a898f6—
storage.modifier.visibility.rust, storage.modifier.lifetime.rust#ff6187—
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#72e0ed—
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#ff6187—
storage.modifier.import.java#fcfcf9—
string#ffd865—
string.unquoted.label#fcfcf9—
string source#fcfcf9—
string source punctuation.section.embedded, string punctuation.definition.string source#939193—
string.other.link.title, string.other.link.description#ff6187—
string.other.link.description.title#72e0ed—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ff6187—
string.other.ref, string.other.restructuredtext.ref#a9e170—
string.other.git-status.help.key#c1bfbf—
string.other.git-status.remote#ff6187—
support.constant#72e0ed—
support.constant.handlebars#939193—
support.type.vendor-prefix.css#c1bfbf—
support.function#a9e170—
support.function.delimiter.elm#939193—
support.type, entity.name.type.object.console#72e0editalic
support.variable, support.variable.property#72e0ed—
support.type.property-name#fcfcf9normal
support.class#72e0ed—
support.constant.core.rust#a898f6—
comment support, comment support.class#726f72—
text#fcfcf9—
text.find-in-files#fcfcf9—
variable, variable.other#fcfcf9—
variable.parameter, parameters variable.function#ff9663italic
variable.language, variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python#c1bfbfitalic
variable.language.arguments#a898f6—
variable.other.class#72e0ed—
variable.other.constant#a898f6—
variable.other.readwrite#fcfcf9—
variable.other.member#fcfcf9—
variable.other.enummember#a898f6—
variable.other.property, variable.other.property.static, variable.other.event#fcfcf9—
variable.function#a9e170—
variable.other.substitution#ff9663—
source.ruby variable.other.readwrite.instance.ruby, source.ruby variable.other.readwrite.class.ruby#a898f6—
source.jinja2 variable.other.jinja2.block#a9e170—
source.jinja2 variable.other.jinja2#ff9663—
Electric Sheep Theme by JMWeeks - VS Code Theme