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
emphasisitalic
strongbold
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
variable.other.jsdoc, entity.name.type.instance.jsdoc#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
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, meta.tag.xml, meta.tag.preprocessor.xml#6AAB73
text.xml entity.other.attribute-name#BCBEC4
text.html constant.character.entity, text.xml constant.character.entity.xml, punctuation.definition.entity.html, punctuation.definition.constant.xml#56A8F5
meta.tag.custom.start.html entity.name.tag.html, meta.tag.custom.end.html entity.name.tag.html#2FBAA3
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, variable.language.this#CF8E6D
storage.modifier#CF8E6D
storage.type, keyword.operator.new#CF8E6D
support.type.primitive#CF8E6D
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
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
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
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#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
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.markdownbold
markup.italic.markdownitalic
markup.bold.markdown markup.italic.markdownitalic bold
markup.strikethrough.markdownstrikethrough
punctuation.definition.list.begin.markdown#CF8E6D
punctuation.definition.quote.begin.markdown, markup.quote.markdown#6AAB73
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