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.italicitalic
markup.boldbold
markup.heading#ffd865
markup.raw#ff9663
markup.underlineunderline
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.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#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