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#3474f0
  • activityBar.background#2b2d30
  • activityBar.border#1f2023
  • activityBar.foreground#d7d7d7
  • activityBar.inactiveForeground#ffffff80
  • activityBarBadge.background#3474f0
  • activityBarBadge.foreground#ffffff
  • badge.background#4a4b4e
  • badge.foreground#ffffff
  • button.background#3474f0
  • button.border#ffffff12
  • button.foreground#ffffff
  • button.hoverBackground#3474f0e6
  • button.secondaryBackground#FFFFFF0F
  • button.secondaryForeground#BCBEC4
  • button.secondaryHoverBackground#ffffff15
  • checkbox.background#313131
  • checkbox.border#ffffff1f
  • debugToolBar.background#181818
  • descriptionForeground#8b949e
  • diffEditor.insertedLineBackground#29443633
  • diffEditor.insertedTextBackground#2386364d
  • diffEditor.removedLineBackground#484A4A33
  • diffEditor.removedTextBackground#484A4A4d
  • dropdown.background#313131
  • dropdown.border#ffffff1f
  • dropdown.foreground#BCBEC4
  • dropdown.listBackground#313131
  • editor.background#1E1F22
  • editor.findMatchBackground#228ca77d
  • editor.findMatchHighlightBackground#1149577a
  • editor.foreground#BCBEC4
  • editor.selectionBackground#214283
  • editor.selectionHighlightBackground#373b39ad
  • editor.wordHighlightBackground#373b39ad
  • editor.wordHighlightTextBackground#373b39ad
  • editorBracketHighlight.foreground1#467CDA
  • editorBracketHighlight.foreground2#C57633
  • editorBracketHighlight.foreground3#d064cc
  • editorGroup.border#34373c
  • editorGroupHeader.tabsBackground#1e1f22
  • editorGroupHeader.tabsBorder#34373c
  • editorGutter.addedBackground#2ea043
  • editorGutter.deletedBackground#f85149
  • editorGutter.modifiedBackground#0078d4
  • editorHoverWidget.background#2b2d30
  • editorHoverWidget.border#43454a
  • editorInlayHint.background#8b949e33
  • editorInlayHint.foreground#8b949e
  • editorInlayHint.typeBackground#8b949e33
  • editorInlayHint.typeForeground#8b949e
  • editorLightBulb.foreground#f2c55c
  • editorLineNumber.activeForeground#a1a3ab
  • editorLineNumber.foreground#4b5059
  • editorOverviewRuler.border#010409
  • editorRuler.foreground#2b2d30
  • editorSuggestWidget.background#2b2d30
  • editorSuggestWidget.selectedBackground#43454a
  • editorWidget.background#1E1F22
  • errorForeground#f85149
  • focusBorder#3474f0
  • foreground#dfe1e5
  • gitDecoration.addedResourceForeground#73BD79
  • gitDecoration.conflictingResourceForeground#DE6A66
  • gitDecoration.deletedResourceForeground#6F737A
  • gitDecoration.ignoredResourceForeground#D69A6B
  • gitDecoration.modifiedResourceForeground#70AEFF
  • gitDecoration.untrackedResourceForeground#E88F89
  • icon.foreground#dfe1e5
  • input.background#2a2a2a
  • input.border#ffffff1f
  • input.foreground#BCBEC4
  • input.placeholderForeground#ffffff79
  • inputOption.activeBackground#2489db82
  • inputOption.activeBorder#2488db
  • keybindingLabel.foreground#BCBEC4
  • list.activeSelectionBackground#323232
  • list.activeSelectionForeground#ffffff
  • list.activeSelectionIconForeground#ffffff
  • menu.background#1E1F22
  • notificationCenterHeader.background#1E1F22
  • notificationCenterHeader.foreground#dfe1e5
  • notifications.background#1E1F22
  • notifications.border#ffffff15
  • notifications.foreground#dfe1e5
  • outputView.background#1E1F22
  • panel.background#2b2d30
  • panel.border#1f2023
  • panelInput.border#ffffff15
  • panelTitle.activeBorder#3474f0
  • panelTitle.activeForeground#BCBEC4
  • panelTitle.inactiveForeground#8b949e
  • peekViewEditor.background#1E1F22
  • peekViewEditor.matchHighlightBackground#bb800966
  • peekViewResult.background#1E1F22
  • peekViewResult.matchHighlightBackground#bb800966
  • pickerGroup.border#ffffff15
  • pickerGroup.foreground#8b949e
  • progressBar.background#3474f0
  • quickInput.background#1E1F22
  • quickInput.foreground#BCBEC4
  • scrollbar.shadow#484f5833
  • scrollbarSlider.activeBackground#6e768187
  • scrollbarSlider.background#6e768133
  • scrollbarSlider.hoverBackground#6e768145
  • settings.dropdownBackground#313131
  • settings.dropdownBorder#ffffff1f
  • settings.headerForeground#ffffff
  • settings.modifiedItemIndicator#bb800966
  • sideBar.background#2b2d30
  • sideBar.border#1f2023
  • sideBar.foreground#BCBEC4
  • sideBarSectionHeader.background#2b2d30
  • sideBarSectionHeader.border#1f2023
  • sideBarSectionHeader.foreground#dfe1e5
  • sideBarTitle.foreground#BCBEC4
  • statusBar.background#2b2d30
  • statusBar.border#1f2023
  • statusBar.debuggingBackground#3474f0
  • statusBar.debuggingForeground#ffffff
  • statusBar.focusBorder#3474f0
  • statusBar.foreground#BCBEC4
  • statusBar.noFolderBackground#1E1F22
  • statusBarItem.focusBorder#3474f0
  • statusBarItem.prominentBackground#6e768166
  • statusBarItem.remoteBackground#3474f0
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#1E1F22
  • tab.activeBorder#1E1F22
  • tab.activeBorderTop#3474f0
  • tab.activeForeground#ffffff
  • tab.border#34373c
  • tab.hoverBackground#1E1F22
  • tab.inactiveBackground#1e1f22
  • tab.inactiveForeground#ffffff80
  • tab.unfocusedActiveBorder#1E1F22
  • tab.unfocusedActiveBorderTop#ffffff15
  • tab.unfocusedHoverBackground#6e76811a
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#3993D4
  • terminal.ansiBrightBlue#1FB0FF
  • terminal.ansiBrightCyan#00E5E5
  • terminal.ansiBrightGreen#4FC414
  • terminal.ansiBrightMagenta#ED7EED
  • terminal.ansiBrightRed#FF4050
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#E5BF00
  • terminal.ansiCyan#00A3A3
  • terminal.ansiGreen#5C962C
  • terminal.ansiMagenta#A771BF
  • terminal.ansiRed#F0524F
  • terminal.ansiYellow#A68A0D
  • terminal.background#1E1F22
  • terminal.foreground#BCBEC4
  • terminal.tab.activeBorder#3474f0
  • textBlockQuote.background#010409
  • textBlockQuote.border#ffffff14
  • textCodeBlock.background#6e768166
  • textLink.activeForeground#40A6FF
  • textLink.foreground#40A6FF
  • textSeparator.foreground#21262d
  • titleBar.activeBackground#2b2d30
  • titleBar.activeForeground#BCBEC4
  • titleBar.border#1f2023
  • titleBar.inactiveBackground#3c3f41
  • titleBar.inactiveForeground#8b949e
  • welcomePage.progress.foreground#3474f0
  • welcomePage.tileBackground#ffffff0f
  • widget.border#ffffff15

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.type.class#16BAAC—
constant.other.caps.python#C77DBB—
storage.type.string.python#CF8E6D—
meta.attribute.directive.vue entity.other.attribute-name.html.vue, meta.attribute.directive.vue punctuation.attribute-shorthand.event.html.vue, meta.attribute.directive.vue punctuation.attribute-shorthand.bind.html.vue, punctuation.attribute-shorthand.slot.html.vue#CF8E6D—
entity.name.type.class#16BAAC—
constant.other.caps.python#C77DBB—
storage.type.string.python#CF8E6D—
meta.attribute.directive.vue entity.other.attribute-name.html.vue, meta.attribute.directive.vue punctuation.attribute-shorthand.event.html.vue, meta.attribute.directive.vue punctuation.attribute-shorthand.bind.html.vue, punctuation.attribute-shorthand.slot.html.vue#CF8E6D—
entity.name.type.class#16BAAC—
constant.other.caps.python#C77DBB—
storage.type.string.python#CF8E6D—
meta.attribute.directive.vue entity.other.attribute-name.html.vue, meta.attribute.directive.vue punctuation.attribute-shorthand.event.html.vue, meta.attribute.directive.vue punctuation.attribute-shorthand.bind.html.vue, punctuation.attribute-shorthand.slot.html.vue#CF8E6D—
emphasis—italic
strong—bold
header#000080—
invalid#FA6675—
text#BCBEC4—
source#BCBEC4—
comment, punctuation.definition.comment#7A7E85—
string.quoted.double, string.quoted.single, punctuation.definition.string.begin, punctuation.definition.string.end#6AAB73—
variable.other.readwrite#BCBEC4—
keyword#CF8E6D—
keyword.operator.flow#CF8E6D—
keyword.operator#BCBEC4—
keyword.operator.logical#BCBEC4—
storage.type.function#CF8E6D—
constant.character#CF8E6D—
entity.name.function.definition#56A8F5—
meta.definition.function#56A8F5—
entity.name.function#56A8F5—
support.function#56A8F5—
constant.language#CF8E6D—
constant.other.caps#C77DBB—
constant.numeric, storage.type.numeric.bigint, keyword.operator.plus.exponent, keyword.operator.minus.exponent#2AACB8—
constant.character.escape#CF8E6D—
variable.object.property#C77DBB—
punctuation.decorator, punctuation.definition.decorator, entity.name.function.decorator#B3AE60—
comment.block.documentation, punctuation.definition.comment.begin.documentation, punctuation.definition.comment.end.documentation, comment.block.documentation punctuation.definition.comment, comment.block.javadoc.java, comment.block.javadoc.java punctuation.definition.comment.java#5F826Bitalic
comment.block.documentation storage.type.class, comment.block.documentation punctuation.definition.block.tag, keyword.other.documentation.javadoc.java#67A37C—
comment.block.documentation variable.other, comment.block.documentation variable.parameter#ABADB3—
support.type.property-name.json, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json#C77DBB—
variable.other.anchor.yaml, variable.other.alias.yaml, punctuation.definition.anchor.yaml, punctuation.definition.alias.yaml#E8BF6A—
keyword.other.definition.ini, punctuation.separator.key-value.ini#BCBEBC—
source.ini#6AAB73—
entity.name.section.group-title.ini, entity.name.section.group-title.ini punctuation.definition.entity.ini#CF8E6D—
support.type.property-name.table.toml, meta.array.table.toml support.type.property-name.array.toml#CF8E6D—
entity.name.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.tag.xml, keyword.other.doctype.xml#D5B778—
entity.other.attribute-name.html, entity.other.attribute-name.tsx#BABABA—
punctuation.separator.key-value.html#6AAB73—
text.html constant.character.entity, punctuation.definition.entity.html#56A8F5—
meta.tag.custom.start.html entity.name.tag.html, meta.tag.custom.end.html entity.name.tag.html#2FBAA3—
text.xml entity.other.attribute-name, source.xaml entity.other.attribute-name#BCBEC4—
text.xml constant.character.entity.xml, punctuation.definition.constant.xml#56A8F5—
punctuation.separator.key-value.html, meta.tag.xml, meta.tag.preprocessor.xml#6AAB73—
entity.other.attribute-name, support.type.map.key.scss#D5B778—
source.css support.function, source.scss support.function, source.less support.function, entity.name.function.scss#D5B778—
variable.argument.css#D5B778—
keyword.other.unit.percentage#BCBEC4—
support.type.property-name#BABABA—
constant.character.escape.scss, source.css keyword.other.unit, source.scss keyword.other.unit, source.less keyword.other.unit, keyword.operator.gradient, source.css support.constant, source.scss support.constant#6AAB73—
constant.other.color.rgb-value, constant.other.color.rgb-value.hex, constant.other.color.rgb-value punctuation.definition.constant#56A8F5—
punctuation.definition.keyword#CF8E6D—
variable.parameter.url#5C92FF—
variable.scss, support.other.variable.less, punctuation.definition.variable.less#6D9CBE—
variable.interpolation.scss#BCBEC4—
keyword.control.at-rule.mixin, keyword.control.at-rule.mixin punctuation.definition.keyword#D0D0FF—
meta.decorator.js variable.other.readwrite.js, meta.decorator.ts variable.other.readwrite.ts#B3AE60—
support.type.builtin.ts, support.type.builtin.js#8888C6—
variable.other.constant entity.name.function.js#56A8F5—
entity.name.function.ts, entity.name.function.js, entity.name.function.jsx, entity.name.function.tsx#56A8F5—
meta.definition.method#56A8F5—
storage.type.class, keyword.operator.expression.keyof, keyword.operator.expression.typeof, keyword.operator.expression.in, keyword.operator.expression.of, keyword.operator.expression.delete.js, keyword.operator.expression.delete.ts, keyword.operator.expression.instanceof, keyword.operator.expression.void.ts, variable.language.this#CF8E6D—
storage.modifier#CF8E6D—
storage.type, keyword.operator.new#CF8E6D—
support.type.primitive#CF8E6D—
entity.name.type.ts#BCBEC4—
variable.other.object.property.js, variable.other.object.property.ts, variable.other.property.js, variable.other.property.ts#C77DBB—
variable.language.super.js, variable.language.super.ts#CF8E6D—
variable.other.jsdoc, entity.name.type.instance.jsdoc#ABADB3—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, string.template variable, string.template meta.brace, string.template punctuation.accessor, string.template support.variable#BCBEC4—
string.template.js, string.template.ts#6AAB73—
string.regexp.ts punctuation.definition.string.begin.ts, string.regexp.js punctuation.definition.string.begin.js, string.regexp.js punctuation.definition.string.end.js, string.regexp.ts punctuation.definition.string.end.ts, string.regexp.js, string.regexp.ts#42C3D4—
support.class.component.tsx#16BAAC—
meta.tag.attributes.tsx keyword.operator.assignment.tsx#6AAB73—
entity.name.tag.style.html.vue, entity.name.tag.script.html.vue, entity.name.tag.template.html.vue, meta.tag.structure.slot.start.html entity.name.tag.html, meta.tag.structure.slot.end.html entity.name.tag.html#2FBAA3—
text.html.derivative entity.name.tag.template.html.vue#D5B778—
support.class.component.svelte#16BAAC—
string.quoted.docstring.single, string.quoted.docstring.multi, string.quoted.docstring.raw.multi.python, string.quoted.docstring punctuation.definition.string.begin.python, string.quoted.docstring punctuation.definition.string.end.python#5F826Bitalic
keyword.codetag.notation.python#8BB33D—
string.regexp.quoted.single.python#6AAB73—
support.type.python, support.function.builtin#8888C6—
variable.other.enummember.python#BCBEC4—
storage.type.number.python#2AACB8—
storage.type.string.python, string.quoted.multi.python#6AAB73—
string.quoted.binary.single.python, string.quoted.binary.single.python storage.type.string, string.quoted.binary.single.python punctuation.definition.string.begin.python, string.quoted.binary.single.python punctuation.definition.string.end.python#A5C261—
meta.function.decorator support.type.python#B3AE60—
keyword.operator.logical.python#CF8E6D—
meta.function.python support.function.magic.python, support.function.magic.python#B200B6—
support.variable.magic.python#B200B6—
variable.language.special.self.python, variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python#94558D—
meta.fstring.python constant.character.format.placeholder.other.python#CF8E6D—
variable.parameter.function-call.python#AA4926—
source.c keyword.control.directive, source.cpp keyword.control.directive, punctuation.definition.directive.c, punctuation.definition.directive.cpp#B3AE60—
string.quoted.other.lt-gt.include.c, string.quoted.other.lt-gt.include.cpp#6AAB73—
keyword.other.unit.binary.c, keyword.other.unit.octal.c, keyword.other.unit.hexadecimal.c#2AACB8—
keyword.operator.sizeof.c#CF8E6D—
entity.name.scope-resolution.cpp, entity.name.namespace.cpp#B5B6E3—
entity.name.type.struct.cpp, entity.name.type.class.cpp, entity.name.type.enum.cpp#B5B6E3—
entity.name.type.template.cpp#B9BCD1—
variable.other.property.cpp#9373A5—
keyword.operator.bitwise.shift.cpp#5F8CBA—
variable.other.enummember.cpp#C77DBBitalic
storage.modifier.reference.cpp#BCBEC4—
entity.name.function.preprocessor.cpp#908B25—
keyword.other.unit.suffix.floating-point.cpp, keyword.other.unit.binary.cpp, keyword.other.unit.octal.cpp, keyword.other.unit.hexadecimal.cpp#2AACB8—
entity.name.type.package.go#AFBF7E—
entity.name.type.go#6FAFBD—
storage.type.numeric.go#CC7832—
entity.name.function.support.builtin.go#CC7832—
variable.other.constant.go#C77DBBitalic
comment.line.roxygen.r, comment.line.roxygen.r punctuation.definition.comment#5F826Bitalic
comment.line.roxygen.r keyword.other.r#67A37C—
entity.name.type.lifetime.rust, punctuation.definition.lifetime.rust, storage.modifier.lifetime.rust#20999D—
variable.language.self#CF8E6D—
keyword.operator.question.rust#CF8E6D—
entity.name.function.macro.rust, entity.name.function.macro.rules.rust, keyword.operator.macro.dollar.rust, variable.other.metavariable.specifier.rust, variable.other.metavariable.name#FFC66D—
entity.name.type.metavariable.rust, variable.other.metavariable.name.rust#56A8F5—
meta.attribute.rust, punctuation.definition.attribute.rust, punctuation.brackets.attribute.rust, meta.attribute.rust punctuation.brackets.round.rust#B3AE60—
entity.name.command.shell, support.function.builtin.shell#C57633—
entity.name.function.shell#56A8F5—
meta.shebang.shell, punctuation.definition.comment.shebang.shell, punctuation.definition.string.heredoc.delimiter.shell#BCBEC4bold
meta.statement.command.shell constant.other.option, string.unquoted.argument.shell, string.unquoted.heredoc.no-indent.EOF#BCBEC4—
punctuation.definition.subshell.single.shell#CF8E6D—
meta.argument.shell keyword.operator.redirect.shell, punctuation.definition.evaluation.backticks.shell, punctuation.definition.variable.shell#CF8E6D—
keyword.operator.logical.batchfile#CF8E6D—
support.variable.automatic.powershell#BCBEC4—
source.powershellvariable.other.member#56A8F5—
meta.group.simple.subexpression.powershellpunctuation.section.group#BCBEC4—
source.powershellmeta.embedded#BCBEC4—
punctuation.section.embedded, meta.group.complex.subexpression.powershell>punctuation.section.group#CF8E6D—
keyword.other.phpdoc.php#67A37C—
meta.other.type.phpdoc.php keyword.other.type.php#ABADB3—
meta.other.type.phpdoc.php support.class.php#16BAAC—
entity.name.function.php, support.function.constructor.php#57AAF7—
meta.method-call.static.php entity.name.function.php#57AAF7italic
entity.name.variable.parameter.php#467CDA—
meta.attribute.php#B3AE60—
variable.other.php, punctuation.definition.variable.php, variable.language.this.php#9876AA—
constant.enum.php, constant.other.php, storage.type.php, constant.other.class.php#9876AAitalic
variable.other.property.php#C77DBB—
support.function.construct.output.php#CF8E6D—
punctuation.section.embedded.end.php source.php#CF8E6D—
keyword.other.special-method.ruby#FC9800—
variable.ruby, variable.other.readwrite.ruby#D4B01Ditalic
variable.other.readwrite.global.ruby, variable.other.readwrite.global.pre-defined.ruby#D0D0FF—
entity.name.function.ruby#FFC66D—
entity.name.type.module.ruby#FFC66Ditalic
variable.other.constant.ruby#FFC66Ditalic
source.ruby punctuation.section.embedded#BCBEC4—
support.function.kernel.ruby#BCBEC4—
variable.other.readwrite.instance.ruby, variable.other.readwrite.class.ruby#C77DBB—
variable.parameter.function.ruby, variable.other.block.ruby#D4B01D—
constant.language.symbol.ruby, constant.language.symbol.hashkey.ruby#89A6AF—
constant.numeric.ruby#74A4C8—
comment.line.number-sign.ruby, punctuation.definition.comment.ruby#808080—
comment.line.keyword.yard.ruby, comment.line.keyword.punctuation.yard.ruby#9a9a9aitalic
comment.line.parameter.yard.ruby, comment.line.type.yard.ruby#9a9a9a—
punctuation.separator.java#BCBEC4—
variable.language.wildcard.java#BCBEC4—
punctuation.definition.annotation.java#B3AE60—
storage.type.function.arrow.java#BCBEC4—
comment.block.javadoc.java variable.parameter.java#ABADB3—
support.function.section#94558D—
variable.parameter.function.latex#B3AE60—
text.tex support.class.math, text.tex support.class.math punctuation.definition.string.end, text.tex support.class.math punctuation.definition.string.begin#16BAAC—
meta.separator.markdown#CF8E6D—
entity.name.section.markdown, punctuation.definition.heading.markdown#C77DBBitalic
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#CF8E6D—
markup.bold.markdown—bold
markup.italic.markdown—italic
markup.bold.markdown markup.italic.markdown—italic bold
markup.strikethrough.markdown—strikethrough
punctuation.definition.list.begin.markdown#CF8E6D—
punctuation.definition.quote.begin.markdown, markup.quote.markdown#6AAB73—
punctuation.definition.math.begin.markdown, punctuation.definition.math.end.markdown#CF8E6D—
punctuation.definition.table.markdown, punctuation.separator.table.markdown#CF8E6D—
string.other.link.description.markdown, punctuation.definition.link.description.begin.markdown, punctuation.definition.link.description.end.markdown#56A8F5—
string.other.link.title.markdown, punctuation.definition.link.title.begin.markdown, punctuation.definition.link.title.end.markdown#56A8F5—
markup.underline.link.markdown, punctuation.definition.link.markdown, meta.image.inline.markdown markup.underline.link.image.markdown#57AAF7—
meta.link.reference.def.markdown punctuation.definition.constant.markdown, constant.other.reference.link.markdown, meta.link.reference.markdown punctuation.definition.constant.begin.markdown, meta.link.reference.markdown punctuation.definition.constant.end.markdown#CF8E6D—
markup.inline.raw.string.markdown punctuation.definition.raw.markdown, markup.fenced_code.block.markdown punctuation.definition.markdown#CF8E6D—
fenced_code.block.language.markdown#C77DBBitalic