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