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.background#080808
  • activityBar.foreground#f5f5f5
  • activityBarBadge.background#F3C900
  • activityBarBadge.foreground#080808
  • breadcrumb.activeSelectionForeground#D0D0D0
  • breadcrumb.focusForeground#8C8C8A
  • breadcrumb.foreground#6D6D6D
  • breadcrumbPicker.background#292928
  • button.background#00A4F3
  • button.foreground#FFFFFF
  • button.hoverBackground#0093DA
  • debugExceptionWidget.background#F3002B
  • debugExceptionWidget.border#F3002B
  • debugToolBar.background#3D3D3C
  • diffEditor.insertedTextBackground#00A78A40
  • diffEditor.removedTextBackground#A7001D40
  • dropdown.border#50504F
  • editor.background#080808
  • editor.findMatchBackground#43a047
  • editor.findMatchHighlightBackground#880e4f
  • editor.findRangeHighlightBackground#50504F4D
  • editor.foreground#F8F8F2
  • editor.hoverHighlightBackground#333332
  • editor.inactiveSelectionBackground#3D3D3C
  • editor.lineHighlightBackground#212121
  • editor.lineHighlightBorder#292928
  • editor.rangeHighlightBackground#50504F4D
  • editor.selectionBackground#3A82F7AA
  • editor.selectionForeground#FFFFFF
  • editor.selectionHighlightBackground#B6FF0055
  • editor.selectionHighlightBorder#AAFF00
  • editor.wordHighlightBackground#9FFF0044
  • editor.wordHighlightStrongBackground#8FE50044
  • editorBracketMatch.background#333332
  • editorBracketMatch.border#50504F
  • editorCodeLens.foreground#6D6D6D
  • editorCursor.foreground#D0D0D0
  • editorError.foreground#F3002B
  • editorGroup.dropBackground#00000040
  • editorGroupHeader.tabsBackground#080808
  • editorGutter.addedBackground#00F3C9
  • editorGutter.deletedBackground#F3002B
  • editorGutter.modifiedBackground#F3C900
  • editorHint.foreground#A9B9B0
  • editorHoverWidget.background#333332
  • editorHoverWidget.border#333332
  • editorIndentGuide.activeBackground1#50504F
  • editorIndentGuide.background1#333332
  • editorInfo.foreground#00F3C9
  • editorLineNumber.foreground#50504F
  • editorLink.activeForeground#8C8C8A
  • editorMarkerNavigation.background#1F1F1E
  • editorMarkerNavigationError.background#F3002B
  • editorMarkerNavigationWarning.background#F3C900
  • editorOverviewRuler.addedForeground#00F3C9
  • editorOverviewRuler.currentContentForeground#00F3C9
  • editorOverviewRuler.deletedForeground#F3002B
  • editorOverviewRuler.errorForeground#F3002B
  • editorOverviewRuler.findMatchForeground#DA0093
  • editorOverviewRuler.incomingContentForeground#00A4F3
  • editorOverviewRuler.infoForeground#00F3C9
  • editorOverviewRuler.modifiedForeground#F3C900
  • editorOverviewRuler.rangeHighlightForeground#50504F
  • editorOverviewRuler.selectionHighlightForeground#8C8C8A
  • editorOverviewRuler.warningForeground#F3C900
  • editorOverviewRuler.wordHighlightForeground#8C8C8A
  • editorOverviewRuler.wordHighlightStrongForeground#DA0093
  • editorRuler.foreground#333332
  • editorSuggestWidget.border#292928
  • editorSuggestWidget.foreground#D0D0D0
  • editorSuggestWidget.highlightForeground#F8F8F2
  • editorSuggestWidget.selectedBackground#3D3D3C
  • editorWarning.foreground#F3C900
  • editorWhitespace.foreground#333332
  • editorWidget.background#292928
  • editorWidget.border#3D3D3C
  • errorForeground#F3002B
  • extensionButton.prominentBackground#00A4F3
  • extensionButton.prominentForeground#FFFFFF
  • extensionButton.prominentHoverBackground#0093DA
  • focusBorder#080808
  • gitDecoration.conflictingResourceForeground#FF41C1
  • gitDecoration.deletedResourceForeground#F3002B
  • gitDecoration.ignoredResourceForeground#8C8C8A
  • gitDecoration.modifiedResourceForeground#F3C900
  • gitDecoration.untrackedResourceForeground#00F3C9
  • input.border#50504F
  • inputOption.activeBorder#B2B2B1
  • list.activeSelectionBackground#212121
  • list.activeSelectionForeground#F3C900
  • list.dropBackground#333332
  • list.errorForeground#F3002B
  • list.focusBackground#212121
  • list.highlightForeground#F8F8F2
  • list.hoverBackground#212121
  • list.inactiveSelectionBackground#212121
  • list.inactiveSelectionForeground#F3C900
  • list.warningForeground#F3C900
  • menu.background#0c0c0c
  • menu.foreground#8C8C8A
  • menu.selectionBackground#212121
  • menu.selectionForeground#F3C900
  • menubar.selectionBackground#212121
  • menubar.selectionForeground#F3C900
  • merge.currentContentBackground#0074604D
  • merge.currentHeaderBackground#007460
  • merge.incomingContentBackground#0070A74D
  • merge.incomingHeaderBackground#0070A7
  • notification.background#3D3D3C
  • notification.buttonBackground#00A4F3
  • notification.buttonForeground#FFFFFF
  • notification.buttonHoverBackground#0093DA
  • notification.errorBackground#F3002B
  • notification.errorForeground#42000C
  • notification.foreground#F8F8F2
  • notification.infoBackground#00F3C9
  • notification.infoForeground#007460
  • notification.warningBackground#F3C900
  • notification.warningForeground#746000
  • notificationCenterHeader.background#3D3D3C
  • notificationCenterHeader.foreground#B2B2B1
  • notificationLink.foreground#00A4F3
  • notifications.background#292928
  • notifications.border#3D3D3C
  • notifications.foreground#F8F8F2
  • panel.background#080808
  • panel.border#3D3D3C
  • panelTitle.activeBorder#00A4F3
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#8C8C8A
  • peekView.border#00A4F3
  • peekViewEditor.background#0B0B0B
  • peekViewEditor.matchHighlightBackground#DA0093
  • peekViewResult.background#292928
  • peekViewResult.fileForeground#F8F8F2
  • peekViewResult.lineForeground#D0D0D0
  • peekViewResult.matchHighlightBackground#8E005F
  • peekViewResult.selectionBackground#0B0B0B
  • peekViewResult.selectionForeground#F8F8F2
  • peekViewTitle.background#00A4F3
  • peekViewTitleDescription.foreground#FFFFFF
  • peekViewTitleLabel.foreground#FFFFFF
  • pickerGroup.border#F3C900
  • pickerGroup.foreground#F3C900
  • sideBar.background#0c0c0c
  • sideBar.foreground#8C8C8A
  • sideBarSectionHeader.background#212121
  • sideBarSectionHeader.foreground#B2B2B1
  • statusBar.background#080808
  • statusBar.debuggingBackground#F34F00
  • statusBar.debuggingForeground#F8F8F2
  • statusBar.foreground#878787
  • statusBar.noFolderBackground#080808
  • statusBar.noFolderForeground#878787
  • statusBarItem.activeBackground#000000
  • statusBarItem.hoverBackground#0B0B0B
  • tab.activeBackground#000000
  • tab.activeBorder#080808
  • tab.activeBorderTop#fffb00
  • tab.border#080808
  • tab.hoverBackground#080808
  • tab.inactiveBackground#212121
  • tab.inactiveForeground#B2B2B1
  • tab.unfocusedActiveBorder#080808
  • tab.unfocusedActiveBorderTop#080808
  • tab.unfocusedActiveForeground#D0D0D0
  • tab.unfocusedInactiveForeground#8C8C8A
  • terminal.background#080808
  • titleBar.activeBackground#080808
  • titleBar.activeForeground#878787
  • titleBar.inactiveBackground#080808
  • titleBar.inactiveForeground#878787
  • walkThrough.embeddedEditorBackground#0B0B0B
  • welcomePage.buttonBackground#292928
  • welcomePage.buttonHoverBackground#0B0B0B

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#808080—
source.js constant#d6498b—
meta#fff—
string.quoted#69f0ae—
string#f7c376—
constant.numeric#D0D0D0—
constant.language#ff3e3e—
keyword.operator#FF5E5E—
punctuation.definition.binding-pattern, meta.import punctuation.definition.block#FF5E5E—
keyword.control#9575cd—
storage.type#fffb2a—
storage.modifier#69f0ae—
variable.language#ff9431—
constant.character, constant.other#8080FF
storage.other#9872A2
entity.name.class, entity.name.type#FF5E5E
punctuation.separator.variable#6089B4
support.function#ffc107—
meta.tag punctuation.definition.string#D0B344
punctuation.section.embedded -(source string source punctuation.section.embedded), meta.brace.erb.html#D0B344
meta.tag string -source -punctuation, text source text meta.tag string -punctuation#6089B4
meta.tag.other, entity.name.tag.style, entity.name.tag.script, meta.tag.block.script, source.js.embedded punctuation.definition.tag.html, source.css.embedded punctuation.definition.tag.html#cecece
meta.tag.inline source, text.html.php.source#9AA83A
meta.doctype, meta.tag.sgml-declaration.doctype, meta.tag.sgml.doctype#9AA83A
meta.tag.other#D0B344
variable.other.property#8d6e63
meta.function-call.object#9872A2
variable.other.normal#6089B4
meta.brace.erb.html#D08442
meta.object-literal.key#eeeeee—
meta.toc-list.id#9AA83A—
punctuation.section.embedded.coffee#D08442—
meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css#C7444A
variable.language.ruby#D0B344
markup.deleted#dc322f
markup.changed#cb4b16
markup.inserted#219186—
markup.quote#9872A2—
markup.list#9AA83A—
markup.bold, markup.italic#6089B4—
markup.inline.raw#FF0080
token.info-token#6796e6—
token.warn-token#cd9731—
token.error-token#f44747—
token.debug-token#b267e6—
markup.heading#D0B344—
markup.heading.setext#D0B344
meta.diff, meta.diff.header#E0EDDD—
punctuation.section.embedded.begin.ruby, punctuation.section.embedded.end.ruby#D08442—
keyword.other.special-method.ruby#D9B700
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#D08442
constant.other.symbol.ruby#9AA83A
source.php.embedded.line.html#676867—
punctuation.definition.string.end.php, punctuation.definition.string.begin.php#9AA83A—
meta.function-call.object.php#D0B344
variable.language.js#CC555A—
support.type.property-name.css#ffd27d
meta.selector.css entity.other.attribute-name.id#a27272
punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end#fff461
invalid#FF0B00
string.quoted.double.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html#e09be2
punctuation.separator, punctuation.terminator#D0D0D0—
string.regexp, string.regexp keyword.control, string.regexp keyword.operator#69f0ae—
string.regexp punctuation.definition.string#A9B9B0—
string.regexp keyword.other#FF5E5E—
entity.name.function#80cbc4—
punctuation.definition.parameters, punctuation.definition.arguments#C9E9E0—
meta.parameters#FFD479—
variable.parameter#FF5E5E—
variable.function, meta.function-call entity.name.function, meta.method-call entity.name.function#d68d5b—
entity.name.type.class, entity.other.inherited-class, support.class#B8FCB1—
keyword.control.conditional, keyword.control.import#FFD14A—
meta.tag.sgml, meta.tag.sgml variable.language, meta.tag.sgml punctuation.definition.tag#FFCC32—
meta.tag.preprocessor, meta.tag.preprocessor entity.name.tag, meta.tag.preprocessor punctuation.definition.tag#FFCC32—
entity.name.tag#FF5E5E—
punctuation.definition.tag#D0D0D0—
entity.other.attribute-name#8CDAFF—
meta.tag.metadata.script entity.name.tag, meta.tag.metadata.script punctuation.definition.tag#B8FCB1—
support.type.property-name#F8F8F2—
meta.property-value#69f0ae—
punctuation.section#D0D0D0—
variable.css, variable.scss#FFE082—
punctuation.definition.entity, punctuation.definition.attribute-selector#8CDAFF—
#69f0ae—
keyword.control.at-rule, keyword.control.at-rule punctuation#69f0ae—
meta.at-rule support.function#8CDAFF—
meta.at-rule.mixin variable.scss, meta.at-rule.function variable.scss#D0D0D0—
meta.at-rule.mixin support.constant, meta.at-rule.mixin variable.parameter, meta.at-rule.function support.constant, meta.at-rule.function variable.parameter#69f0ae—
meta.at-rule.mixin constant.numeric, meta.at-rule.function constant.numeric#B5CEA8—
keyword.control.at-rule.include, keyword.control.at-rule.include punctuation#FF5E5Enormal
meta.at-rule.function punctuation.section#C9E9E0—
meta.at-rule.return#D0D0D0—
meta.at-rule.return punctuation.definition.begin.bracket, meta.at-rule.return punctuation.definition.end.bracket#D0D0D0—
meta.at-rule.include entity.name.function, meta.at-rule.include punctuation, meta.property-value punctuation.section.function#C9E9E0—
punctuation.definition.interpolation#D77676—
punctuation.definition.map#D77676—
comment storage.type, comment punctuation.definition.block#6D6D6Dnormal
punctuation.definition.block, punctuation.definition.dictionary#A9B9B0—
meta.brace.square, punctuation.definition.array#D77676—
meta.brace.round#C9E9E0—
meta.embedded, source.groovy.embedded#C5C8C6—
string source#D08442
punctuation.accessor#FF5E5E—
support.variable.dom, support.class.console, support.type.object#ec407a—
support.variable.property.js#E9FDAC—
support.class.js, support.class.builtin.js#8CDAFF—
meta.function-call support.class.builtin.js, new.expr entity.name.type.js#C9E9E0—
support.class.js#F8F8F2—
string.template.js, punctuation.definition.string.template#69f0ae—
meta.template.expression#F8F8F2—
punctuation.definition.template-expression#D77676—
punctuation.support.type.property-name#B2B2B1—
punctuation.section.embedded#A9B9B0—
punctuation.definition.begin.bracket.round, punctuation.definition.end.bracket.round#C9E9E0—
variable.other.php#F8F8F2—
meta.function.parameter#D0D0D0—
punctuation.section.array#D77676—
keyword.other.new#FF5E5E—
keyword.other.sql, keyword.other.DML.sql, keyword.other.alias.sql#FF5E5E—
keyword.other.DDL.create.II.sql#D77676—
entity.name.section, punctuation.definition.heading#FFE082—
markup beginning.punctuation#FF5E5E—
markup punctuation#B2B2B1—
string.other.link#C9E9E0—
markup.underline.link#6D6D6D—
string.other.link.description.title#D0D0D0—
meta.link punctuation#B2B2B1—
meta.image punctuation#B2B2B1—
markup.fenced_code punctuation#B8FCB1—
keyword#FF79C6—
keyword.control, keyword.control.conditional, keyword.control.loop, keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.return, keyword.control.try, keyword.control.catch, keyword.control.switch, keyword.control.flow#FF6AC1—
storage.modifier, storage.modifier.csharp, storage.modifier.access, storage.modifier.static, storage.modifier.async#BD93F9—
storage.type, support.type, entity.name.type, entity.other.inherited-class, support.type.primitive#50FA7B—
entity.name.type.class, entity.name.class, support.class#08fbff—
entity.name.type.struct, storage.type.struct, support.type.struct#29F0B4—
entity.name.type.enum, support.type.enum, variable.other.enummember, constant.other.enummember#FFB86C—
entity.name.type.interface, support.type.interface#2DE2E6italic
entity.name.type.parameter, support.type.parameter, variable.type.parameter, meta.type.parameters#FFCC70—
variable, variable.other, variable.other.readwrite#D6E67A—
variable.other.local, variable.local#B5E853—
variable.parameter, meta.parameter, meta.function.parameters, meta.method.parameters#FFD479—
variable.other.property, support.variable.property, meta.property, variable.other.member, meta.object-literal.key#A1EAFB—
variable.other.member, variable.other.property.static, support.variable.property.dom#C792EA—
entity.name.function, meta.method, entity.name.function.method#FFA94Dbold
support.function, variable.function, entity.name.function.call, meta.function-call entity.name.function, meta.function-call#FF8F40—
entity.name.function.preprocessor, support.function.macro, keyword.other.macro#F7D46C—
string#FF955B—
string.quoted, string.template, string.interpolated#FFB38F—
constant.character, string.character#FF6E6E—
constant.numeric#B5CEA8—
constant.language.boolean#FF92B6—
string.regexp, string.regexp punctuation, string.regexp keyword#FF8CC6—
entity.name.namespace, support.other.namespace, meta.namespace#7CDFFF—
comment#6272A4italic
comment.block.documentation, comment.documentation, comment.line.documentation#8A8F98italic
keyword.operator#F8F8F2—
punctuation#BBBBBB—
meta.disabled, meta.preprocessor.macro.disabled, comment.block.disabled#A0A8C0—