Skip to main content
Coding Theme

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.

  • actionBar.toggledBackground#383A49FF
  • activityBar.activeBorder#0078D4FF
  • activityBar.background#181818FF
  • activityBar.border#2B2B2BFF
  • activityBar.foreground#D7D7D7FF
  • activityBar.inactiveForeground#868686FF
  • activityBarBadge.background#0078D4FF
  • activityBarBadge.foreground#FFFFFFFF
  • badge.background#616161FF
  • badge.foreground#F8F8F8FF
  • button.background#0078D4FF
  • button.border#FFFFFF12
  • button.foreground#FFFFFFFF
  • button.hoverBackground#026EC1FF
  • button.secondaryBackground#313131FF
  • button.secondaryForeground#CCCCCCFF
  • button.secondaryHoverBackground#3C3C3CFF
  • chat.editedFileForeground#E2C08DFF
  • chat.slashCommandBackground#26477866
  • chat.slashCommandForeground#85B6FFFF
  • checkbox.background#313131FF
  • checkbox.border#3C3C3CFF
  • debugConsole.errorForeground#FF0000EE
  • debugConsole.infoForeground#FFFFFFCC
  • debugConsole.sourceForeground#FFFFFFCC
  • debugConsole.warningForeground#FFFF00FF
  • debugTokenExpression.boolean#4EC9B0FF
  • debugTokenExpression.error#FF0000FF
  • debugTokenExpression.name#4FC1FFFF
  • debugTokenExpression.number#14E901FF
  • debugTokenExpression.value#FFFFFFAA
  • debugToolBar.background#181818FF
  • descriptionForeground#9D9D9DFF
  • dropdown.background#313131FF
  • dropdown.border#3C3C3CFF
  • dropdown.foreground#CCCCCCFF
  • dropdown.listBackground#1F1F1FFF
  • editor.background#1F1F1FFF
  • editor.findMatchBackground#9E6A03FF
  • editor.foreground#EEEEEEFF
  • editor.inactiveSelectionBackground#3A3D417E
  • editor.lineHighlightBackground#1073CF2D
  • editor.lineHighlightBorder#9FCED154
  • editor.selectionBackground#FFFFFF50
  • editor.selectionForeground#FFFFFFCC
  • editor.selectionHighlightBackground#ADD6FF26
  • editorBracketHighlight.foreground1#FFFFFFFF
  • editorBracketHighlight.foreground2#FF4F4FFF
  • editorBracketHighlight.foreground3#FF7F00FF
  • editorBracketHighlight.foreground4#FFFF00FF
  • editorBracketHighlight.foreground5#00FF00FF
  • editorBracketHighlight.foreground6#00FFFFFF
  • editorGroup.border#FFFFFF17
  • editorGroupHeader.tabsBackground#181818FF
  • editorGroupHeader.tabsBorder#2B2B2BFF
  • editorGutter.addedBackground#2EA043FF
  • editorGutter.deletedBackground#F85149FF
  • editorGutter.modifiedBackground#0078D4FF
  • editorIndentGuide.activeBackground1#707070FF
  • editorIndentGuide.background1#404040FF
  • editorLineNumber.activeForeground#CCCCCCFF
  • editorLineNumber.foreground#6E7681FF
  • editorOverviewRuler.border#010409FF
  • editorWidget.background#202020FF
  • errorForeground#F85149FF
  • focusBorder#0078D4FF
  • foreground#CCCCCCFF
  • icon.foreground#CCCCCCFF
  • input.background#313131FF
  • input.border#3C3C3CFF
  • input.foreground#CCCCCCFF
  • input.placeholderForeground#989898FF
  • inputOption.activeBackground#2489DB82
  • inputOption.activeBorder#2488DBFF
  • keybindingLabel.foreground#CCCCCCFF
  • list.activeSelectionIconForeground#FFFFFFFF
  • list.dropBackground#383B3DFF
  • menu.background#1F1F1FFF
  • menu.border#454545FF
  • menu.foreground#CCCCCCFF
  • menu.selectionBackground#0078D4FF
  • menu.separatorBackground#454545FF
  • notificationCenterHeader.background#1F1F1FFF
  • notificationCenterHeader.foreground#CCCCCCFF
  • notifications.background#1F1F1FFF
  • notifications.border#2B2B2BFF
  • notifications.foreground#CCCCCCFF
  • panel.background#181818FF
  • panel.border#2B2B2BFF
  • panelInput.border#2B2B2BFF
  • panelTitle.activeBorder#0078D4FF
  • panelTitle.activeForeground#CCCCCCFF
  • panelTitle.inactiveForeground#9D9D9DFF
  • peekViewEditor.background#1F1F1FFF
  • peekViewEditor.matchHighlightBackground#BB800966
  • peekViewResult.background#1F1F1FFF
  • peekViewResult.matchHighlightBackground#BB800966
  • pickerGroup.border#3C3C3CFF
  • ports.iconRunningProcessForeground#369432FF
  • progressBar.background#0078D4FF
  • quickInput.background#222222FF
  • quickInput.foreground#CCCCCCFF
  • settings.dropdownBackground#313131FF
  • settings.dropdownBorder#3C3C3CFF
  • settings.headerForeground#FFFFFFFF
  • settings.modifiedItemIndicator#BB800966
  • sideBar.background#181818FF
  • sideBar.border#2B2B2BFF
  • sideBar.foreground#CCCCCCFF
  • sideBarSectionHeader.background#181818FF
  • sideBarSectionHeader.border#2B2B2BFF
  • sideBarSectionHeader.foreground#CCCCCCFF
  • sideBarTitle.foreground#CCCCCCFF
  • statusBar.background#1E1E1EFF
  • statusBar.border#2B2B2BFF
  • statusBar.debuggingBackground#511F1FFF
  • statusBar.debuggingForeground#FFFFFFFF
  • statusBar.focusBorder#0078D4FF
  • statusBar.foreground#CCCCCCFF
  • statusBar.noFolderBackground#1E1E1EFF
  • statusBarItem.focusBorder#0078D4FF
  • statusBarItem.hoverBackground#F1F1F133
  • statusBarItem.hoverForeground#FFFFFFFF
  • statusBarItem.prominentBackground#6E768166
  • statusBarItem.remoteBackground#0078D4FF
  • statusBarItem.remoteForeground#FFFFFFFF
  • tab.activeBackground#1F1F1FFF
  • tab.activeBorder#1F1F1FFF
  • tab.activeBorderTop#0078D4FF
  • tab.activeForeground#FFFFFFFF
  • tab.border#2B2B2BFF
  • tab.hoverBackground#1F1F1FFF
  • tab.inactiveBackground#181818FF
  • tab.inactiveForeground#9D9D9DFF
  • tab.lastPinnedBorder#CCCCCC33
  • tab.selectedBackground#222222FF
  • tab.selectedBorderTop#6CADDFFF
  • tab.selectedForeground#FFFFFFA0
  • tab.unfocusedActiveBorder#1F1F1FFF
  • tab.unfocusedActiveBorderTop#2B2B2BFF
  • tab.unfocusedHoverBackground#1F1F1FFF
  • terminal.foreground#CCCCCCFF
  • terminal.inactiveSelectionBackground#3A3D41FF
  • terminal.tab.activeBorder#0078D4FF
  • textBlockQuote.background#2B2B2BFF
  • textBlockQuote.border#616161FF
  • textCodeBlock.background#2B2B2BFF
  • textLink.activeForeground#4DAAFCFF
  • textLink.foreground#4DAAFCFF
  • textPreformat.background#3C3C3CFF
  • textPreformat.foreground#D0D0D0FF
  • textSeparator.foreground#21262DFF
  • titleBar.activeBackground#181818FF
  • titleBar.activeForeground#CCCCCCFF
  • titleBar.border#2B2B2BFF
  • titleBar.inactiveBackground#1F1F1FFF
  • titleBar.inactiveForeground#9D9D9DFF
  • welcomePage.progress.foreground#0078D4FF
  • welcomePage.tileBackground#2B2B2BFF
  • widget.border#313131FF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python, meta.template.expression, variable.language.wildcard.java#D4D4D4FF—
comment, punctuation.definition.comment#999999FF—
header#000080FF—
constant.language, markup.changed, meta.diff.header, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded, variable.language#569CD6FF—
markup.bold, markup.heading#569CD6FFbold
markup.strikethrough—strikethrough
markup.inserted, constant.sha.git-rebase#B5CEA8FF—
markup.deleted, markup.inline.raw, meta.preprocessor, entity.name.function.preprocessor, entity.name.macro, support.function.macro, support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#CE9178FF—
punctuation.definition.quote.begin.markdown#6A9955FF—
punctuation.definition.list.begin.markdown, token.info-token#6796E6FF—
punctuation.definition.tag#BDBDBDFF
meta.structure.dictionary.key.python, support.type.vendored.property-name, support.type.property-name, source.css variable, source.coffee.embedded, support.function.git-rebase, meta.object-literal.key#9CDCFEFF—
string.regexp, string.regex#e0d292—
support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal, support.function, entity.name.function#FFADE4FF—
entity.name.function.extension, support.function.extension#FFADE4FFitalic
support.type, support.class, support.attribute, support.constant.math, support.constant.dom, meta.annotation, meta.type.cast.expr, meta.type.new.expr, meta.function.decorator.python, entity.name.attribute, entity.name.function.decorator, entity.name.type, entity.name.namespace, entity.name.scope-resolution, entity.other.attribute, entity.other.inherited-class, punctuation.separator.namespace, punctuation.definition.decorator.python#4EC9B0FF—
variable, constant.other.placeholder, entity.name.variable, meta.object.member, meta.definition.variable.name#669EE9FF
variable.parameter, entity.name.variable.parameter, meta.parameter, constant.numeric#88FF88FF
storage.modifier.async, keyword.control.async, keyword.other.async, entity.name.function.async, support.function.async#FA72FFFF—
entity.name.label#FFFFFFFFitalic
storage.type, entity.name.class, keyword.other.namespace, keyword.declaration, keyword.other.class, keyword.other.let, keyword.other.var, keyword.other.const, keyword.other.function, variable.other.static, variable.other.enummember, variable.other.readwrite.alias, entity.name.class.attribute.component, entity.other.attribute-name.localname.xml#2DD5FFFF
keyword.type, keyword.other.attribute-specifier.cs#2DD5FFFFbold
keyword.operator.expression, keyword.control.at-rule, entity.other.attribute-name.html#2DD5FFFFitalic
keyword.operator.new, keyword.operator.expression.new, keyword.other.access, keyword.other.modifier, keyword.other.static, constant.language.boolean, constant.language.true, constant.language.false, constant.language.null, constant.language.json.comments#2DD5FFFFitalic bold
storage.type.class.jsdoc#A0A0A0FFitalic bold underline
meta.property-value.scss, meta.property-value.css, keyword.other.unit, entity.other.attribute-name.namespace.xml#00FFC8FF—
token.warn-token#CD9731FF—
token.error-token#F44747FF—
token.debug-token#B267E6FF—
entity.name.tag, punctuation.support.type.property-name, entity.other.attribute-name, punctuation.definition.string#FF8989FF
entity.name.class.element.component, entity.name.class.element.taghelper, entity.name.tag.html.vue#FF8989FFitalic
storage.modifier, variable.language.this, punctuation.separator.hash.cs, variable.language.super, keyword.operator.expression.await, keyword.operator.expression.delete, keyword.other.directive.using, constant.language.undefined, keyword.control.conditional, keyword.control.loop, keyword.control.switch, keyword.control.flow, keyword.control.return, keyword.control.break, keyword.control.continue, keyword.control.if, keyword.control.else, keyword.control.for, keyword.control.while, keyword.control.do, keyword.control.try, keyword.control.catch, keyword.control.finally, keyword.control.trycatch, keyword.control.export, keyword.control.exception.try, keyword.control.exception.catch, keyword.control.exception.finally, keyword.control.import, keyword.control.from, keyword.control.each, keyword.control.operator, keyword.control.context.using, keyword.control.context.lock, keyword.control.exception.when, keyword.control.razor.directive, keyword.other.using#FF8989FFitalic bold
keyword.control.cshtml.transition, keyword.control.razor.transition, keyword.control.razor.comment.star, punctuation.definition.interpolation.begin.cs, punctuation.definition.interpolation.end.cs#FF8989FFbold
ref.matchtext, text.html.derivative, meta.embedded.assembly, meta.property-list.scss, invalid.deprecated.semicolon, punctuation.separator.key-value, storage.type.function.arrow.ts, meta.property-value.css, punctuation.definition.entity.css, punctuation.separator.namespace.xml#FFFFFFFF
punctuation.accessor#FFFFFFFFbold
Zeco Theme by zeco - VS Code Theme