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