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#4c34d8
  • activityBar.background#f4f4f5
  • activityBar.border#e4e4e7
  • activityBar.foreground#18181b
  • activityBar.inactiveForeground#7d8590
  • activityBarBadge.background#4c34d8
  • activityBarBadge.foreground#ffffff
  • badge.background#4c34d8
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#7d8590
  • breadcrumb.focusForeground#18181b
  • breadcrumb.foreground#27272a80
  • breadcrumbPicker.background#f4f4f5
  • button.background#238636
  • button.foreground#ffffff
  • button.hoverBackground#2ea043
  • button.secondaryBackground#282e33
  • button.secondaryForeground#c9d1d9
  • button.secondaryHoverBackground#e4e4e7
  • checkbox.background#f4f4f5
  • checkbox.border#e4e4e7
  • debugConsole.errorForeground#ffa198
  • debugConsole.infoForeground#8b949e
  • debugConsole.sourceForeground#e3b341
  • debugConsole.warningForeground#f59e0b
  • debugConsoleInputIcon.foreground#bc8cff
  • debugIcon.breakpointForeground#f85149
  • debugTokenExpression.boolean#56d364
  • debugTokenExpression.error#ffa198
  • debugTokenExpression.name#79c0ff
  • debugTokenExpression.number#56d364
  • debugTokenExpression.string#a5d6ff
  • debugTokenExpression.value#a5d6ff
  • debugToolBar.background#f4f4f5
  • descriptionForeground#7d8590
  • diffEditor.insertedLineBackground#23863626
  • diffEditor.insertedTextBackground#4d7c0f4d
  • diffEditor.removedLineBackground#da363326
  • diffEditor.removedTextBackground#ff7b724d
  • dropdown.background#f4f4f5
  • dropdown.border#e4e4e7
  • dropdown.foreground#18181b
  • dropdown.listBackground#f4f4f5
  • editor.background#fafafa
  • editor.findMatchBackground#4c34d8
  • editor.findMatchHighlightBackground#4c34d880
  • editor.focusedStackFrameHighlightBackground#2ea04366
  • editor.foldBackground#6e76811a
  • editor.foreground#09090b
  • editor.lineHighlightBackground#6e76811a
  • editor.linkedEditingBackground#2f81f712
  • editor.selectionHighlightBackground#4d7c0f40
  • editor.stackFrameHighlightBackground#bb800966
  • editor.wordHighlightBackground#6e768180
  • editor.wordHighlightBorder#6e768199
  • editor.wordHighlightStrongBackground#6e76814d
  • editor.wordHighlightStrongBorder#6e768199
  • editorBracketHighlight.foreground1#79c0ff
  • editorBracketHighlight.foreground2#a156d3
  • editorBracketHighlight.foreground3#e3b341
  • editorBracketHighlight.foreground4#ffa198
  • editorBracketHighlight.foreground5#ff9bce
  • editorBracketHighlight.foreground6#6366f1
  • editorBracketHighlight.unexpectedBracket.foreground#7d8590
  • editorBracketMatch.background#4d7c0f40
  • editorBracketMatch.border#4d7c0f99
  • editorCursor.foreground#4c34d8
  • editorGroup.border#e4e4e7
  • editorGroupHeader.tabsBackground#fafafa
  • editorGroupHeader.tabsBorder#e4e4e7
  • editorGutter.addedBackground#2ea04366
  • editorGutter.deletedBackground#f8514966
  • editorGutter.modifiedBackground#bb800966
  • editorIndentGuide.activeBackground#18181b3d
  • editorIndentGuide.background#18181b1f
  • editorInlayHint.background#8b949e33
  • editorInlayHint.foreground#7d8590
  • editorInlayHint.paramBackground#8b949e33
  • editorInlayHint.paramForeground#7d8590
  • editorInlayHint.typeBackground#8b949e33
  • editorInlayHint.typeForeground#7d8590
  • editorLineNumber.activeForeground#18181b
  • editorLineNumber.foreground#6e7681
  • editorOverviewRuler.border#09090b
  • editorWhitespace.foreground#484f58
  • editorWidget.background#f4f4f5
  • errorForeground#f85149
  • focusBorder#4c34d8
  • foreground#18181b
  • gitDecoration.addedResourceForeground#4d7c0f
  • gitDecoration.conflictingResourceForeground#db6d28
  • gitDecoration.deletedResourceForeground#f85149
  • gitDecoration.ignoredResourceForeground#6e7681
  • gitDecoration.modifiedResourceForeground#f59e0b
  • gitDecoration.submoduleResourceForeground#7d8590
  • gitDecoration.untrackedResourceForeground#4d7c0f
  • icon.foreground#7d8590
  • input.background#f4f4f5
  • input.border#e4e4e7
  • input.foreground#18181b
  • input.placeholderForeground#6e7681
  • keybindingLabel.foreground#18181b
  • list.activeSelectionBackground#4c34d84f
  • list.activeSelectionForeground#18181b
  • list.focusBackground#4c34d84f
  • list.focusForeground#18181b
  • list.highlightForeground#2f81f7
  • list.hoverBackground#6e76811a
  • list.hoverForeground#18181b
  • list.inactiveFocusBackground#4c34d84f
  • list.inactiveSelectionBackground#4c34d84f
  • list.inactiveSelectionForeground#18181b
  • minimapSlider.activeBackground#8b949e47
  • minimapSlider.background#8b949e33
  • minimapSlider.hoverBackground#8b949e3d
  • notificationCenterHeader.background#f4f4f5
  • notificationCenterHeader.foreground#18181b
  • notifications.background#f4f4f5
  • notifications.border#e4e4e7
  • notifications.foreground#18181b
  • notificationsErrorIcon.foreground#f85149
  • notificationsInfoIcon.foreground#2f81f7
  • notificationsWarningIcon.foreground#f59e0b
  • panel.background#f4f4f5
  • panel.border#e4e4e7
  • panelInput.border#e4e4e7
  • panelTitle.activeBorder#4c34d8
  • panelTitle.activeForeground#18181b
  • panelTitle.inactiveForeground#7d8590
  • peekViewEditor.background#6e76811a
  • peekViewEditor.matchHighlightBackground#bb800966
  • peekViewResult.background#f4f4f5
  • peekViewResult.matchHighlightBackground#bb800966
  • pickerGroup.border#e4e4e7
  • pickerGroup.foreground#7d8590
  • progressBar.background#4c34d8
  • quickInput.background#f4f4f5
  • quickInput.foreground#18181b
  • scrollbar.shadow#484f5833
  • scrollbarSlider.activeBackground#8b949e47
  • scrollbarSlider.background#8b949e33
  • scrollbarSlider.hoverBackground#8b949e3d
  • settings.headerForeground#18181b
  • settings.modifiedItemIndicator#bb800966
  • sideBar.background#f4f4f5
  • sideBar.border#e4e4e7
  • sideBar.foreground#27272ad0
  • sideBarSectionHeader.background#f4f4f5
  • sideBarSectionHeader.border#e4e4e7
  • sideBarSectionHeader.foreground#18181b
  • sideBarTitle.foreground#18181b
  • statusBar.background#f4f4f5
  • statusBar.border#e4e4e7
  • statusBar.debuggingBackground#da3633
  • statusBar.debuggingForeground#ffffff
  • statusBar.focusBorder#4c34d880
  • statusBar.foreground#7d8590
  • statusBar.noFolderBackground#f4f4f5
  • statusBarItem.activeBackground#18181b1f
  • statusBarItem.focusBorder#4c34d8
  • statusBarItem.hoverBackground#18181b14
  • statusBarItem.prominentBackground#6e768166
  • statusBarItem.remoteBackground#e4e4e7
  • statusBarItem.remoteForeground#18181b
  • symbolIcon.arrayForeground#f0883e
  • symbolIcon.booleanForeground#58a6ff
  • symbolIcon.classForeground#f0883e
  • symbolIcon.colorForeground#79c0ff
  • symbolIcon.constantForeground#aff5b4#7ee787#56d364#4d7c0f#2ea043#238636#196c2e#0f5323#033a16#04260f
  • symbolIcon.constructorForeground#6366f1
  • symbolIcon.enumeratorForeground#f0883e
  • symbolIcon.enumeratorMemberForeground#58a6ff
  • symbolIcon.eventForeground#6e7681
  • symbolIcon.fieldForeground#f0883e
  • symbolIcon.fileForeground#f59e0b
  • symbolIcon.folderForeground#f59e0b
  • symbolIcon.functionForeground#bc8cff
  • symbolIcon.interfaceForeground#f0883e
  • symbolIcon.keyForeground#58a6ff
  • symbolIcon.keywordForeground#ff7b72
  • symbolIcon.methodForeground#bc8cff
  • symbolIcon.moduleForeground#ff7b72
  • symbolIcon.namespaceForeground#ff7b72
  • symbolIcon.nullForeground#58a6ff
  • symbolIcon.numberForeground#4d7c0f
  • symbolIcon.objectForeground#f0883e
  • symbolIcon.operatorForeground#79c0ff
  • symbolIcon.packageForeground#f0883e
  • symbolIcon.propertyForeground#f0883e
  • symbolIcon.referenceForeground#58a6ff
  • symbolIcon.snippetForeground#58a6ff
  • symbolIcon.stringForeground#79c0ff
  • symbolIcon.structForeground#f0883e
  • symbolIcon.textForeground#79c0ff
  • symbolIcon.typeParameterForeground#79c0ff
  • symbolIcon.unitForeground#58a6ff
  • symbolIcon.variableForeground#f0883e
  • tab.activeBackground#f4f4f5
  • tab.activeBorder#f4f4f5
  • tab.activeBorderTop#4c34d8
  • tab.activeForeground#18181b
  • tab.border#e4e4e7
  • tab.hoverBackground#f4f4f5
  • tab.inactiveBackground#fafafa
  • tab.inactiveForeground#27272a80
  • tab.unfocusedActiveBorder#f4f4f5
  • tab.unfocusedActiveBorderTop#e4e4e7
  • tab.unfocusedHoverBackground#6e76811a
  • terminal.ansiBlack#484f58
  • terminal.ansiBlue#58a6ff
  • terminal.ansiBrightBlack#6e7681
  • terminal.ansiBrightBlue#79c0ff
  • terminal.ansiBrightCyan#56d4dd
  • terminal.ansiBrightGreen#56d364
  • terminal.ansiBrightMagenta#6366f1
  • terminal.ansiBrightRed#ffa198
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#e3b341
  • terminal.ansiCyan#39c5cf
  • terminal.ansiGreen#4d7c0f
  • terminal.ansiMagenta#bc8cff
  • terminal.ansiRed#ff7b72
  • terminal.ansiWhite#b1bac4
  • terminal.ansiYellow#f59e0b
  • terminal.foreground#18181b
  • textBlockQuote.background#09090b
  • textBlockQuote.border#e4e4e7
  • textCodeBlock.background#6e768166
  • textLink.activeForeground#2f81f7
  • textLink.foreground#2f81f7
  • textPreformat.foreground#7d8590
  • textSeparator.foreground#21262d
  • titleBar.activeBackground#f4f4f5
  • titleBar.activeForeground#7d8590
  • titleBar.border#e4e4e7
  • titleBar.inactiveBackground#09090b
  • titleBar.inactiveForeground#7d8590
  • tree.indentGuidesStroke#21262d
  • welcomePage.buttonBackground#21262d
  • welcomePage.buttonHoverBackground#e4e4e7

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#27272a80
entity#eab308
constant#FF628C
keyword, storage.type.class.js#FF9D00
meta#22d3ee
invalid#EC3A37F5
meta.brace, punctuation.definition.parameters.begin.js, punctuation.definition.parameters.end.js#f97316
punctuation#f97316
punctuation.definition.parameters#facc15
punctuation.definition.template-expression#facc15
storage#eab308
storage.type.function.arrow#eab308
string, punctuation.definition.string#8b5cf6
string.template, punctuation.definition.string.template#3AD900
support#84cc16
support.function#FF9D00
support.variable.property.dom#22d3ee
variable#f97316
source.ini entity, meta.embedded.block.ini, source.ini#f97316
source.ini keyword, keyword.other.definition.ini#eab308
source.ini punctuation.definition#facc15
source.ini punctuation.separator, punctuation.separator.key-value.ini#FF9D00
source.css entity, source.stylus entity#3AD900
entity.other.attribute-name.class.css#22d3ee
entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css#FFB454
entity.name.tag#22d3ee
source.css support, entity.name.tag.css, source.stylus support#A5FF90
source.css constant, source.css support.constant, source.stylus constant, source.stylus support.constant#facc15
source.css string, source.css punctuation.definition.string, source.stylus string, source.stylus punctuation.definition.string#facc15
source.css variable, source.stylus variable#22d3ee
text.html.basic entity.name, punctuation.definition.tag.html, entity.name.tag.inline.any.html, meta.tag.other.html, meta.tag.inline.any.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.name.tag, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, meta.tag.js, meta.tag.tsx, meta.tag.html#22d3ee
meta.toc-list.id.html#A5FF90
text.html.basic entity.other#eab308
meta.tag.metadata.script.html entity.name.tag.html#eab308
punctuation.definition.string.begin, punctuation.definition.string.end#6d28d9
meta.tag.inline.any.html, meta.tag.other#FF9D00
source.json support#eab308
source.json string, source.json punctuation.definition.string#92FC79
source.js storage.type.function#FB94FF
variable.language, entity.name.type.class.js#FB94FF
entity.other.inherited-class#facc15
storage.type.extends.js, storage.type.class.jsdoc#FF9D00
punctuation.definition.block.tag.jsdoc#FF9D00
variable.other.jsdoc, entity.name.type.instance.jsdoc#22d3ee
variable.other.constant#22d3ee
punctuation.definition.tag.begin.js, punctuation.definition.tag.end.js#22d3ee
meta.jsx.children.js#09090b
storage.type, storage.type.class, storage.modifier, keyword.control, keyword.operator#FF9D00
punctuation.definition.bracket.curly#494685
keyword.operator.assignment.tsx, keyword.operator.assignment.jsx#FF9D00
keyword.operator.assignment#FF9D00
meta.jsx.children.tsx#09090b
meta.object-literal.key.js#84cc16
entity.name.type.class.tsx, entity.name.type.class.jsx, variable.other.readwrite.alias.tsx, variable.other.readwrite.tsx, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.jsx, variable.other.readwrite.alias.js, variable.other.object.tsx, variable.other.object.jsx, variable.other.object, support.class.component.tsx, support.class.component.jsx, entity.name.type.tsx, entity.name.type.jsx, variable.other.readwrite, variable.other.object.js#22d3ee
variable.other.property, variable.other.object.property#facc15
JSXNested#09090b
variable.parameter#22d3ee
variable.parameter.function.language.special.self.python#22d3ee
meta.function-call.python, meta.function-call.generic.python, support.function.builtin.python#eab308
source.ts entity.name.type#84cc16
source.ts keyword#eab308
source.ts punctuation.definition.parameters#f97316
meta.arrow.ts punctuation.definition.parameters#facc15
source.ts storage#22d3ee
entity.name.section.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#eab308
markup.inserted.diff, punctuation.definition.inserted.diff#8efa00
markup.deleted.diff, punctuation.definition.deleted.diff#F16E6B
meta.embedded.block.diff#09090b
meta.paragraph.markdown#09090b
punctuation.definition.from-file.diff, meta.diff.header.from-file#B362FF
markup.inline.raw.string.markdown#A599E9
beginning.punctuation.definition.quote.markdown#eab308
markup.quote.markdown meta.paragraph.markdown, punctuation.definition.quote.begin.markdown#A599E9
meta.separator.markdown#eab308
markup.bold.markdown
markup.italic.markdown
beginning.punctuation.definition.list.markdown, punctuation.definition.list.begin.markdown, markup.list.unnumbered.markdown#eab308
string.other.link.description.title.markdown punctuation.definition.string.markdown, meta.link.inline.markdown string.other.link.description.title.markdown, string.other.link.description.title.markdown punctuation.definition.string.begin.markdown, string.other.link.description.title.markdown punctuation.definition.string.end.markdown, meta.image.inline.markdown string.other.link.description.title.markdown#A5FF90
meta.link.inline.markdown string.other.link.title.markdown, meta.link.reference.markdown string.other.link.title.markdown, meta.link.reference.def.markdown markup.underline.link.markdown#eab308
markup.underline.link.markdown, string.other.link.description.title.markdown#A599E9
fenced_code.block.language, markup.inline.raw.markdown#22d3ee
punctuation.definition.markdown, punctuation.definition.raw.markdown, punctuation.definition.heading.markdown, punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#494685
meta.link.inline.markdown punctuation.definition.string.begin.markdown, meta.link.inline.markdown punctuation.definition.string.end.markdown, meta.link.reference.markdown punctuation.definition.string.begin.markdown, meta.link.reference.markdown punctuation.definition.string.end.markdown, string.other.link.description.markdown#eab308
meta.image.inline.markdown punctuation.definition.string.begin.markdown, meta.image.inline.markdown punctuation.definition.string.end.markdown, string.other.link.description.markdown#FF9D00
markup.underline.link.markdown, punctuation.definition.metadata.markdown, markup.underline.link.image.markdown, constant.other.reference.link.markdown, punctuation.definition.constant.markdown, punctuation.definition.constant.begin.markdown, punctuation.definition.constant.end.markdown#A599E9
text.jade entity.name#22d3ee
storage.type.function.pug#FF9D00
variable.parameter.function.js#22d3ee
variable.control.import.include.pug#92FC79
text.jade string.interpolated#facc15
storage.type.cs#22d3ee
entity.name.variable.property.cs#22d3ee
storage.modifier.cs#84cc16
source.php entity, variable.other.class.php#22d3ee
keyword.other.phpdoc.php#FF9D00
entity.name.function.php, support.function.basic_functions.php, meta.function-call.php, variable.other.property#eab308
variable.other.php, punctuation.definition.variable.php, variable.other.global.php, variable.language.this.php#22d3ee
storage.modifier.php, keyword.other.namespace.php#FF9D00
entity.name.tag.yaml#eab308
punctuation.definition.block.sequence.item.yaml#f97316
storage.type.function.php, meta.function.parameters.php#FB94FF
keyword.blade#FF9D00
begin.bracket.round.blade.php, end.bracket.round.blade.php#f97316
support.function.construct.begin.blade, support.function.construct.end.blade#facc15
keyword.package.go, keyword.import.go#FF9D00
keyword.function.go#FB94FF
variable.other.assignment.go#22d3ee
punctuation.definition.string.begin.go, punctuation.definition.string.end.go, support.function.go#eab308
punctuation.section.embedded.end.ruby, punctuation.section.embedded.begin.ruby, punctuation.section.scope.begin.ruby, punctuation.section.scope.end.ruby#facc15
variable.other.constant.ruby#84cc16
entity.name.type.class.ruby#FB94FF
variable.other.block.ruby, variable.other.ruby#22d3ee
punctuation.separator.other.ruby#FF9D00
keyword.other.special-method.ruby#facc15
storage.type.function.shell#FB94FF
variable.other.special.shell, punctuation.definition.variable.shell#FF9D00
variable.graphql#FAEFA5
keyword.operation.graphql#FB94FF
source.sql#f97316
source.sql keyword.other, support.function.mysqli.php#FAEFA5
support.function.mysqli.php, source.sql support.function#eab308
string.regexp, string.regexp keyword.other#f97316
keyword.other.DML.sql#FF9D00
punctuation.definition.table.array.toml#f97316
entity.other.attribute-name.table.array.toml, entity.other.attribute-name.table.toml#FF9D00
keyword.key.toml#eab308
keyword.other.special-method.dockerfile#eab308
keyword.other.rust#FF9D00
keyword.other.fn.rust#FB94FF
keyword.other.env#FF9D00
variable.other.env#eab308
source.env#f97316
keyword.other.template.begin.env, keyword.other.template.end.env, keyword.operator.assignment.env#FF9D00
variable.object.property#22d3ee
string.regexp.js#FB94FF
keyword.rainbow2#FF9D00
keyword.other.nim, keyword.other#FF9D00
keyword.boolean#FF628C
punctuation.pragma.start.nim, punctuation.pragma.end.nim, entity.name.function.nim#eab308
markup.deleted#F16E6B
markup.inserted#8efa00
markup.underline
modifier, this, comment, storage.modifier, entity.other.attribute-name, entity.other.attribute-name.html, punctuation.definition.comment, text.html.basic entity.other, entity.other.attribute-name, markup.quote.markdown meta.paragraph.markdown, markup.italic.markdown, text.jade entity.other.attribute-name.tag, keyword.control.from, entity.other.attribute-name.tag.pug