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.activeBackground#f5f7fa
  • activityBar.activeBorder#0066cc
  • activityBar.activeFocusBorder#0066cc
  • activityBar.background#e4e8ee
  • activityBar.border#d0d5dc
  • activityBar.foreground#0066cc
  • activityBar.inactiveForeground#8b949e
  • activityBarBadge.background#0066cc
  • activityBarBadge.foreground#ffffff
  • badge.background#0066cc
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#24292e
  • breadcrumb.focusForeground#0066cc
  • breadcrumb.foreground#8b949e
  • breadcrumbPicker.background#f5f7fa
  • button.background#0066cc
  • button.foreground#ffffff
  • button.hoverBackground#0559b3
  • button.secondaryBackground#e0e4ea
  • button.secondaryForeground#3d4752
  • button.secondaryHoverBackground#d0d5dc
  • debugToolBar.background#edf0f5
  • debugToolBar.border#d0d5dc
  • diffEditor.insertedLineBackground#2e8b5710
  • diffEditor.insertedTextBackground#2e8b5718
  • diffEditor.removedLineBackground#cf222e10
  • diffEditor.removedTextBackground#cf222e18
  • dropdown.background#ffffff
  • dropdown.border#d0d5dc
  • dropdown.foreground#3d4752
  • editor.background#f5f7fa
  • editor.findMatchBackground#f7d07044
  • editor.findMatchHighlightBackground#f7d07022
  • editor.focusedStackFrameHighlightBackground#2e8b5722
  • editor.foreground#24292e
  • editor.hoverHighlightBackground#e0e6f0
  • editor.lineHighlightBackground#edf0f5
  • editor.selectionBackground#c8daf5
  • editor.selectionHighlightBackground#c8daf566
  • editor.stackFrameHighlightBackground#f7d07022
  • editor.wordHighlightBackground#d0dff266
  • editor.wordHighlightStrongBackground#c8daf588
  • editorBracketMatch.background#c8daf555
  • editorBracketMatch.border#6f42c1
  • editorCursor.foreground#0066cc
  • editorError.foreground#cf222e
  • editorGroup.border#d0d5dc
  • editorGroup.dropBackground#c8daf544
  • editorGroupHeader.tabsBackground#edf0f5
  • editorGroupHeader.tabsBorder#d0d5dc
  • editorGutter.background#f5f7fa
  • editorHint.foreground#2e8b57
  • editorHoverWidget.background#f5f7fa
  • editorHoverWidget.border#d0d5dc
  • editorHoverWidget.foreground#3d4752
  • editorIndentGuide.activeBackground1#b0b8c4
  • editorIndentGuide.background1#e0e4ea
  • editorInfo.foreground#0066cc
  • editorLineNumber.activeForeground#5a6370
  • editorLineNumber.foreground#b0b8c4
  • editorOverviewRuler.border#dce0e6
  • editorOverviewRuler.errorForeground#cf222e
  • editorOverviewRuler.selectionHighlightForeground#c8daf5
  • editorOverviewRuler.warningForeground#bf8700
  • editorRuler.foreground#e0e4ea
  • editorSuggestWidget.background#f5f7fa
  • editorSuggestWidget.border#d0d5dc
  • editorSuggestWidget.focusHighlightForeground#0066cc
  • editorSuggestWidget.foreground#3d4752
  • editorSuggestWidget.highlightForeground#0066cc
  • editorSuggestWidget.selectedBackground#c8daf5
  • editorSuggestWidget.selectedForeground#24292e
  • editorWarning.foreground#bf8700
  • editorWidget.background#f5f7fa
  • editorWidget.border#d0d5dc
  • editorWidget.foreground#3d4752
  • editorWidget.resizeBorder#0066cc
  • focusBorder#0066cc88
  • gitDecoration.addedResourceForeground#2e8b57
  • gitDecoration.conflictingResourceForeground#d4590c
  • gitDecoration.deletedResourceForeground#cf222e
  • gitDecoration.ignoredResourceForeground#b0b8c4
  • gitDecoration.modifiedResourceForeground#bf8700
  • gitDecoration.renamedResourceForeground#6f42c1
  • gitDecoration.untrackedResourceForeground#2e8b57
  • input.background#ffffff
  • input.border#d0d5dc
  • input.foreground#24292e
  • input.placeholderForeground#8b949e
  • inputOption.activeBackground#c8daf5
  • inputOption.activeBorder#0066cc
  • inputOption.activeForeground#24292e
  • inputValidation.errorBackground#fce8e8
  • inputValidation.errorBorder#cf222e
  • inputValidation.warningBackground#fff4d4
  • inputValidation.warningBorder#bf8700
  • list.activeSelectionBackground#c8daf5
  • list.activeSelectionForeground#24292e
  • list.activeSelectionIconForeground#0066cc
  • list.dropBackground#c8daf5
  • list.focusBackground#c8daf5
  • list.focusOutline#0066cc55
  • list.highlightForeground#0066cc
  • list.hoverBackground#e8ecf2
  • list.inactiveSelectionBackground#dde3eb
  • list.inactiveSelectionForeground#3d4752
  • menu.background#f5f7fa
  • menu.border#d0d5dc
  • menu.foreground#3d4752
  • menu.selectionBackground#c8daf5
  • menu.selectionForeground#24292e
  • menu.separatorBackground#d0d5dc
  • menubar.selectionBackground#c8daf5
  • menubar.selectionForeground#24292e
  • minimap.background#eef1f5
  • minimap.findMatchHighlight#f7d07088
  • minimap.selectionHighlight#c8daf5aa
  • minimapGutter.addedBackground#2e8b57
  • minimapGutter.deletedBackground#cf222e
  • minimapGutter.modifiedBackground#bf8700
  • notifications.background#f5f7fa
  • notifications.border#d0d5dc
  • notifications.foreground#3d4752
  • notificationsErrorIcon.foreground#cf222e
  • notificationsInfoIcon.foreground#0066cc
  • notificationsWarningIcon.foreground#bf8700
  • notificationToast.border#c8daf5
  • panel.background#edf0f5
  • panel.border#d0d5dc
  • panelSection.border#d0d5dc
  • panelTitle.activeBorder#0066cc
  • panelTitle.activeForeground#24292e
  • panelTitle.inactiveForeground#8b949e
  • peekView.border#0066cc
  • peekViewEditor.background#f5f7fa
  • peekViewEditor.matchHighlightBackground#f7d07022
  • peekViewResult.background#edf0f5
  • peekViewResult.matchHighlightBackground#f7d07022
  • peekViewResult.selectionBackground#c8daf5
  • peekViewTitle.background#edf0f5
  • peekViewTitleDescription.foreground#5a6370
  • peekViewTitleLabel.foreground#24292e
  • progressBar.background#0066cc
  • scrollbar.shadow#00000018
  • scrollbarSlider.activeBackground#5a6370
  • scrollbarSlider.background#b0b8c488
  • scrollbarSlider.hoverBackground#8b949ebb
  • selection.background#c8daf5
  • settings.checkboxBackground#ffffff
  • settings.checkboxBorder#d0d5dc
  • settings.dropdownBackground#ffffff
  • settings.dropdownBorder#d0d5dc
  • settings.headerForeground#0066cc
  • settings.modifiedItemIndicator#0891b2
  • settings.numberInputBackground#ffffff
  • settings.numberInputBorder#d0d5dc
  • settings.textInputBackground#ffffff
  • settings.textInputBorder#d0d5dc
  • sideBar.background#edf0f5
  • sideBar.border#d0d5dc
  • sideBar.foreground#3d4752
  • sideBarSectionHeader.background#e4e8ee
  • sideBarSectionHeader.border#d0d5dc
  • sideBarSectionHeader.foreground#0066cc
  • sideBarTitle.foreground#5a6370
  • statusBar.background#1b6fb5
  • statusBar.border#156099
  • statusBar.debuggingBackground#bf8700
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#5a6370
  • statusBarItem.activeBackground#0f5c99
  • statusBarItem.errorBackground#cf222e
  • statusBarItem.errorForeground#ffffff
  • statusBarItem.hoverBackground#2580c8
  • statusBarItem.remoteBackground#0891b2
  • statusBarItem.remoteForeground#ffffff
  • statusBarItem.warningBackground#bf8700
  • statusBarItem.warningForeground#ffffff
  • tab.activeBackground#f5f7fa
  • tab.activeBorder#f5f7fa
  • tab.activeBorderTop#0066cc
  • tab.activeForeground#24292e
  • tab.border#d0d5dc
  • tab.hoverBackground#f5f7fa
  • tab.hoverForeground#0066cc
  • tab.inactiveBackground#edf0f5
  • tab.inactiveForeground#8b949e
  • tab.lastPinnedBorder#b0b8c4
  • tab.unfocusedActiveBorderTop#6fa8dc
  • terminal.ansiBlack#24292e
  • terminal.ansiBlue#0066cc
  • terminal.ansiBrightBlack#5a6370
  • terminal.ansiBrightBlue#3d8fd9
  • terminal.ansiBrightCyan#0e9cb8
  • terminal.ansiBrightGreen#1a7f37
  • terminal.ansiBrightMagenta#8250df
  • terminal.ansiBrightRed#cf222e
  • terminal.ansiBrightWhite#f5f7fa
  • terminal.ansiBrightYellow#bf8700
  • terminal.ansiCyan#0891b2
  • terminal.ansiGreen#2e8b57
  • terminal.ansiMagenta#6f42c1
  • terminal.ansiRed#cf222e
  • terminal.ansiWhite#e0e4ea
  • terminal.ansiYellow#bf8700
  • terminal.background#f5f7fa
  • terminal.foreground#3d4752
  • terminal.selectionBackground#c8daf588
  • terminalCursor.foreground#0066cc
  • titleBar.activeBackground#e4e8ee
  • titleBar.activeForeground#24292e
  • titleBar.border#d0d5dc
  • titleBar.inactiveBackground#e4e8ee
  • titleBar.inactiveForeground#8b949e
  • walkThrough.embeddedEditorBackground#edf0f5
  • welcomePage.background#f5f7fa
  • widget.shadow#00000018

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation#8b949eitalic
storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc, entity.name.type.instance.jsdoc#6e7781italic
keyword, keyword.control, keyword.control.flow, keyword.operator.new, keyword.operator.delete, storage.type, storage.modifier, keyword.other.important.css#0066cc
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as, keyword.control.require#0066ccitalic
variable.language.this, variable.language.self, variable.language.super, variable.language.special.self#0066ccitalic
keyword.operator#5a4fcf
keyword.operator.arrow, keyword.operator.pipe, storage.type.function.arrow#5a4fcf
punctuation.definition, punctuation.terminator, punctuation.accessor, meta.brace, punctuation.separator, punctuation.section#8b949e
string, string.quoted, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, string.unquoted, punctuation.definition.string#2e8b57
punctuation.definition.template-expression, punctuation.section.embedded, punctuation.definition.interpolation, punctuation.section.interpolation#0066cc
constant.character.escape, constant.other.placeholder#d63384
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.binary#d63384
constant.language#d63384italic
constant.character, constant.other#d63384
entity.name.function, meta.function-call entity.name.function, support.function, support.function.builtin, entity.name.function.member#6f42c1
variable.parameter, meta.parameters variable.other#8250dfitalic
entity.name.type, entity.name.class, entity.other.inherited-class, support.type, support.class, entity.name.type.alias, entity.name.type.interface, entity.name.type.enum, entity.name.enum#0891b2
meta.type.annotation, meta.type.parameters, meta.return.type#0891b2
meta.type.parameters entity.name.type#0e7490
entity.name.namespace, entity.name.module#0e7490
variable, variable.other, variable.other.readwrite#24292e
variable.other.property, support.variable.property, meta.object-literal.key, variable.other.object.property#3d4752
variable.other.constant, variable.other.enummember#d63384
meta.decorator, punctuation.decorator, entity.name.function.decorator, meta.annotation, storage.type.annotation, punctuation.definition.annotation#0066ccitalic
entity.name.tag, meta.tag.sgml, support.class.component#cf222e
entity.other.attribute-name, meta.tag entity.other.attribute-name#6f42c1
punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx#0066cc
constant.character.entity.html#d63384
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less#6f42c1
support.constant.property-value.css, support.constant.property-value.scss#2e8b57
keyword.other.unit.css, keyword.other.unit.scss#d63384
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.class.scss, entity.other.attribute-name.id.scss#0891b2
entity.name.tag.css, entity.name.tag.scss#cf222e
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#0e7490
keyword.control.at-rule.css, keyword.control.at-rule.scss#0066cc
variable.css, variable.scss, variable.less#8250df
constant.other.color.rgb-value.css, support.constant.color.css#d63384
string.regexp, constant.regexp#0891b2
keyword.operator.quantifier.regexp, keyword.operator.or.regexp, punctuation.definition.group.regexp#d63384
constant.other.character-class.regexp#0e7490
support.function.builtin.python#0e7490
support.type.python#0891b2
support.function.magic.python, entity.name.function.magic.python#8250dfitalic
entity.name.function.decorator.python, meta.function.decorator.python#0066ccitalic
meta.fstring.python, constant.character.format.placeholder.other.python#d63384
entity.name.package.go#0e7490
support.function.builtin.go#0e7490
storage.type.go, keyword.type.go#0066cc
entity.name.lifetime.rust, storage.modifier.lifetime.rust, punctuation.definition.lifetime.rust#d63384italic
entity.name.function.macro.rust, meta.macro.rust entity.name.function.rust#0e7490
meta.attribute.rust, entity.name.function.attribute.rust#0066ccitalic
support.type.primitive.rust, entity.name.type.primitive.rust#0e7490
entity.name.type.trait.rust#0891b2italic
storage.type.annotation.java, meta.declaration.annotation.java, punctuation.definition.annotation.java, entity.name.type.annotation.kotlin, meta.annotation.kotlin#0066ccitalic
storage.modifier.import.java, variable.language.wildcard.java#24292e
storage.type.primitive.java, storage.type.java#0e7490
keyword.control.directive.c, keyword.control.directive.cpp, punctuation.definition.directive.c#0066cc
entity.name.function.preprocessor.c, entity.name.function.preprocessor.cpp#0e7490
storage.type.c, storage.type.cpp, support.type.posix-reserved.c#0e7490
constant.other.symbol.ruby, constant.other.symbol.hashkey.ruby#d63384
variable.other.readwrite.instance.ruby, variable.other.readwrite.class.ruby#8250df
support.function.kernel.ruby, support.function.builtin.ruby#0e7490
punctuation.section.embedded.begin.ruby, punctuation.section.embedded.end.ruby#0066cc
variable.other.php, variable.language.php#8250df
support.function.builtin.php#0e7490
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#0066ccbold
keyword.other.DML.sql, keyword.other.DDL.create.sql, keyword.other.DDL.sql#0066cc
keyword.other.sql, keyword.other.alias.sql, keyword.other.order.sql#5a4fcf
support.function.aggregate.sql, support.function.sql#0e7490
entity.name.function.sql#6f42c1
storage.type.sql#0891b2
comment.line.shebang, punctuation.definition.comment.shebang#0066ccbold
support.function.builtin.shell, support.function.builtin.bash#0e7490
variable.other.normal.shell, variable.other.bracket.shell, variable.other.special.shell, variable.other.positional.shell#8250df
meta.substitution.command.shell, punctuation.definition.string.begin.shell, punctuation.definition.string.end.shell#0066cc
string.unquoted.argument.shell#24292e
entity.name.tag.yaml, support.type.property-name.yaml#6f42c1
entity.name.type.anchor.yaml, variable.other.alias.yaml, punctuation.definition.anchor.yaml#d63384
constant.language.boolean.yaml, constant.language.null.yaml#d63384italic
entity.other.document.begin.yaml, entity.other.document.end.yaml#8b949e
support.type.property-name.json#6f42c1
constant.language.json#d63384italic
support.type.property-name.table.toml, entity.name.section.toml#0066cc
support.type.property-name.toml#6f42c1
keyword.type.graphql, keyword.operation.graphql#0066cc
entity.name.type.graphql, support.type.graphql#0891b2
variable.other.field.graphql#6f42c1
entity.name.fragment.graphql#0e7490
entity.name.directive.graphql, meta.directive.graphql#0066ccitalic
keyword.other.special-method.dockerfile#0066cc
markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown#0066ccbold
markup.bold, punctuation.definition.bold.markdown#24292ebold
markup.italic, punctuation.definition.italic.markdown#6f42c1italic
markup.inline.raw, punctuation.definition.raw.markdown#0891b2
markup.fenced_code.block.markdown, punctuation.definition.fenced.markdown#0891b2
markup.underline.link, string.other.link#0066cc
meta.link.inline.markdown entity.name.label#0e7490
punctuation.definition.list.begin.markdown, beginning.punctuation.definition.list.markdown#0066cc
markup.quote, punctuation.definition.blockquote.markdown#8b949eitalic
meta.separator.markdown#b0b8c4
invalid, invalid.deprecated#cf222eunderline