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.

  • actionBar.toggledBackground#383a49
  • activityBar.activeBorder#0078d4
  • activityBar.background#18191B
  • activityBar.border#090909
  • activityBar.foreground#d7d7d7
  • activityBar.inactiveForeground#868686
  • activityBarBadge.background#0078d4
  • activityBarBadge.foreground#ffffff
  • badge.background#616161
  • badge.foreground#f8f8f8
  • button.background#0078d4
  • button.border#ffffff12
  • button.foreground#ffffff
  • button.hoverBackground#026ec1
  • button.secondaryBackground#313131
  • button.secondaryForeground#dddddd
  • button.secondaryHoverBackground#3c3c3c
  • chat.editedFileForeground#e2c08d
  • chat.slashCommandBackground#26477866
  • chat.slashCommandForeground#85b6ff
  • checkbox.background#313131
  • checkbox.border#3c3c3c
  • debugToolBar.background#252629
  • descriptionForeground#9d9d9d
  • diffEditor.diagonalFill#e4e4e413
  • diffEditor.insertedLineBackground#3fa26633
  • diffEditor.insertedTextBackground#3d897a80
  • diffEditor.removedLineBackground#b8004933
  • diffEditor.removedTextBackground#f14c4c30
  • dropdown.background#313131
  • dropdown.border#3c3c3c
  • dropdown.foreground#dddddd
  • dropdown.listBackground#18191B
  • editor.background#18191B
  • editor.findMatchBackground#9e6a03
  • editor.foreground#dddddd
  • editor.inactiveSelectionBackground#3a3d41
  • editor.linkedEditingBackground#6e7a8540
  • editor.selectionHighlightBackground#add6ff26
  • editorGroup.border#ffffff17
  • editorGroupHeader.tabsBackground#18191B
  • editorGroupHeader.tabsBorder#090909
  • editorGutter.addedBackground#438E6B
  • editorGutter.background#18191B
  • editorGutter.deletedBackground#D05261
  • editorGutter.modifiedBackground#427CE3
  • editorHoverWidget.background#252629
  • editorHoverWidget.border#3D3F42
  • editorIndentGuide.activeBackground1#707070
  • editorIndentGuide.background1#404040
  • editorLineNumber.activeForeground#dddddd
  • editorLineNumber.foreground#6e7681
  • editorOverviewRuler.border#010409
  • editorSuggestWidget.background#252629
  • editorSuggestWidget.border#3D3F42
  • editorWidget.background#252629
  • errorForeground#f85149
  • focusBorder#0078d4
  • foreground#dddddd
  • gitDecoration.addedResourceForeground#7AAE92
  • gitDecoration.deletedResourceForeground#D05261
  • gitDecoration.modifiedResourceForeground#7BA2E9
  • icon.foreground#dddddd
  • input.background#18191B
  • input.border#3c3c3c
  • input.foreground#dddddd
  • input.placeholderForeground#989898
  • inputOption.activeBackground#2489db82
  • inputOption.activeBorder#2488db
  • keybindingLabel.foreground#dddddd
  • list.activeSelectionIconForeground#ffffff
  • list.dropBackground#383b3d
  • markdownAlert.caution.foreground#f14c4c
  • markdownAlert.important.foreground#b180d7
  • markdownAlert.note.foreground#59a4f9
  • markdownAlert.tip.foreground#89d185
  • markdownAlert.warning.foreground#cca700
  • menu.background#18191B
  • menu.border#454545
  • menu.foreground#dddddd
  • menu.selectionBackground#0078d4
  • menu.separatorBackground#454545
  • notificationCenterHeader.background#18191B
  • notificationCenterHeader.foreground#dddddd
  • notifications.background#18191B
  • notifications.border#090909
  • notifications.foreground#dddddd
  • panel.background#18191B
  • panel.border#090909
  • panelInput.border#090909
  • panelTitle.activeBorder#0078d4
  • panelTitle.activeForeground#dddddd
  • panelTitle.inactiveForeground#9d9d9d
  • peekViewEditor.background#18191B
  • peekViewEditor.matchHighlightBackground#bb800966
  • peekViewResult.background#18191B
  • peekViewResult.matchHighlightBackground#bb800966
  • peekViewTitle.background#252629
  • pickerGroup.border#3c3c3c
  • ports.iconRunningProcessForeground#369432
  • progressBar.background#0078d4
  • quickInput.background#252629
  • quickInput.foreground#bbbbbb
  • settings.dropdownBackground#313131
  • settings.dropdownBorder#3c3c3c
  • settings.headerForeground#ffffff
  • settings.modifiedItemIndicator#bb800966
  • sideBar.background#18191B
  • sideBar.border#090909
  • sideBar.foreground#dddddd
  • sideBarSectionHeader.background#18191B
  • sideBarSectionHeader.border#090909
  • sideBarSectionHeader.foreground#dddddd
  • sideBarTitle.foreground#dddddd
  • statusBar.background#090909
  • statusBar.border#090909
  • statusBar.debuggingBackground#090909
  • statusBar.debuggingForeground#cccccc
  • statusBar.focusBorder#0078d4
  • statusBar.foreground#868686
  • statusBar.noFolderBackground#18191B
  • statusBarItem.focusBorder#0078d4
  • statusBarItem.hoverBackground#f1f1f133
  • statusBarItem.hoverForeground#ffffff
  • statusBarItem.prominentBackground#6e768166
  • statusBarItem.remoteBackground#0078d4
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#18191B
  • tab.activeBorder#18191B
  • tab.activeBorderTop#0078d4
  • tab.activeForeground#ffffff
  • tab.border#090909
  • tab.hoverBackground#18191B
  • tab.inactiveBackground#18191B
  • tab.inactiveForeground#9d9d9d
  • tab.lastPinnedBorder#dddddd33
  • tab.selectedBackground#222222
  • tab.selectedBorderTop#6caddf
  • tab.selectedForeground#ffffffa0
  • tab.unfocusedActiveBorder#18191B
  • tab.unfocusedActiveBorderTop#090909
  • tab.unfocusedHoverBackground#18191B
  • terminal.ansiBlack#cfcfcf
  • terminal.ansiBlue#2A66DE
  • terminal.ansiBrightBlack#DFE0E3
  • terminal.ansiBrightBlue#5B8CE5
  • terminal.ansiBrightCyan#64C9E2
  • terminal.ansiBrightGreen#97DC92
  • terminal.ansiBrightMagenta#DD88DD
  • terminal.ansiBrightRed#e90215
  • terminal.ansiBrightWhite#C3C5C9
  • terminal.ansiBrightYellow#F3D282
  • terminal.ansiCyan#53B7D3
  • terminal.ansiGreen#469C72
  • terminal.ansiMagenta#CE55CD
  • terminal.ansiRed#e10013
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#D5943A
  • terminal.background#18191B
  • terminal.border#212121
  • terminal.foreground#dddddd
  • terminal.inactiveSelectionBackground#3a3d41
  • terminal.tab.activeBorder#0078d4
  • textBlockQuote.background#090909
  • textBlockQuote.border#616161
  • textCodeBlock.background#090909
  • textLink.activeForeground#4daafc
  • textLink.foreground#4daafc
  • textPreformat.background#3c3c3c
  • textPreformat.foreground#d0d0d0
  • textSeparator.foreground#21262d
  • titleBar.activeBackground#090909
  • titleBar.activeForeground#dddddd
  • titleBar.border#090909
  • titleBar.inactiveBackground#090909
  • titleBar.inactiveForeground#9d9d9d
  • welcomePage.progress.foreground#0078d4
  • welcomePage.tileBackground#090909
  • widget.border#313131
  • widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
string.quoted.binary.single.python#A8CC7C
constant.language.false.cpp, constant.language.true.cpp#82D2CE
constant.language.boolean, constant.language.undefined, constant.language.null#82D2CE
punctuation.definition.delayed.unison,punctuation.definition.list.begin.unison,punctuation.definition.list.end.unison,punctuation.definition.ability.begin.unison,punctuation.definition.ability.end.unison,punctuation.operator.assignment.as.unison,punctuation.separator.pipe.unison,punctuation.separator.delimiter.unison,punctuation.definition.hash.unison#D6D6DD
keyword.control.directive#A8CC7C
constant.other.ellipsis.python#dddddd
variable.other.generic-type.haskell#82D2CE
punctuation.definition.tag#A4A4A4
storage.type.haskell#F8C762
support.variable.magic.python#D6D6DD
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python#D6D6DD
variable.parameter.function.language.special.self.python#EFB080
variable.language.this.cpp#82D2CE
storage.modifier.lifetime.rust#D6D6DD
support.function.std.rust#AAA0FA
entity.name.lifetime.rust#EFB080
variable.language.rust#D6D6DD
support.constant.edge#82D2CE
keyword.operator.quantifier.regexp#F8C762
string, punctuation.definition.string.begin, punctuation.definition.string.end#E394DC
variable.parameter.function#D6D6DD
comment markup.link#D6D6DD
markup.changed.diff#EFB080
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff#AAA0FA
markup.inserted.diff#E394DC
markup.deleted.diff#D6D6DD
meta.function.c,meta.function.cpp#D6D6DD
punctuation.section.block.begin.bracket.curly.cpp,punctuation.section.block.end.bracket.curly.cpp,punctuation.terminator.statement.c,punctuation.section.block.begin.bracket.curly.c,punctuation.section.block.end.bracket.curly.c,punctuation.section.parens.begin.bracket.round.c,punctuation.section.parens.end.bracket.round.c,punctuation.section.parameters.begin.bracket.round.c,punctuation.section.parameters.end.bracket.round.c#D6D6DD
punctuation.separator.key-value#D6D6DD
keyword.operator.expression.import#AAA0FA
support.constant.math#EFB080
support.constant.property.math#F8C762
variable.other.constant, variable.other.readwrite#D6D6DD
storage.type.annotation.java, storage.type.object.array.java#EFB080
source.java#D6D6DD
punctuation.section.block.begin.java,punctuation.section.block.end.java,punctuation.definition.method-parameters.begin.java,punctuation.definition.method-parameters.end.java,meta.method.identifier.java,punctuation.section.method.begin.java,punctuation.section.method.end.java,punctuation.terminator.java,punctuation.section.class.begin.java,punctuation.section.class.end.java,punctuation.section.inner-class.begin.java,punctuation.section.inner-class.end.java,meta.method-call.java,punctuation.section.class.begin.bracket.curly.java,punctuation.section.class.end.bracket.curly.java,punctuation.section.method.begin.bracket.curly.java,punctuation.section.method.end.bracket.curly.java,punctuation.separator.period.java,punctuation.bracket.angle.java,punctuation.definition.annotation.java,meta.method.body.java#D6D6DD
meta.method.java#AAA0FA
storage.modifier.import.java,storage.type.java,storage.type.generic.java#EFB080
keyword.operator.instanceof.java#82D2CE
meta.definition.variable.name.java#D6D6DD
keyword.operator.logical#D6D6DD
keyword.operator.bitwise#D6D6DD
keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.decrement, keyword.operator.increment, keyword.operator.relational#D6D6DD
keyword.operator.channel#D6D6DD
keyword.operator.css,keyword.operator.scss,keyword.operator.less#D6D6DD
support.constant.color.w3c-standard-color-name.css, support.constant.color.w3c-standard-color-name.scss#F8C762
punctuation.separator.list.comma.css#D6D6DD
entity.name.type.module, support.module.node, support.type.object.module#EFB080
meta.object-literal.key,support.variable.object.process,support.variable.object.node#D6D6DD
support.variable.property, variable.other.property, variable.other.object.property, variable.other.property.ts, meta.definition.property.ts#AAA0FA
meta.attribute.python#AAA0FA
support.constant.json#F8C762
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof, keyword.operator.expression.delete, keyword.operator.expression.in, keyword.operator.expression.of, keyword.operator.expression.typeof, keyword.operator.expression.void#82D2CE
support.type.object.console#D6D6DD
support.variable.property.process#F8C762
entity.name.function.js,support.function.console.js#EBC88D
keyword.operator.misc.rust#D6D6DD
keyword.operator.sigil.rust#82D2CE
keyword.operator.delete#82D2CE
support.type.object.dom#D6D6DD
support.variable.dom,support.variable.property.dom#D6D6DD
keyword.operator.assignment.c,keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c,keyword.operator.decrement.c,keyword.operator.bitwise.shift.c,keyword.operator.assignment.cpp,keyword.operator.comparison.cpp,keyword.operator.cpp,keyword.operator.increment.cpp,keyword.operator.decrement.cpp,keyword.operator.bitwise.shift.cpp#82D2CE
punctuation.separator.delimiter#D6D6DD
punctuation.separator.c,punctuation.separator.cpp#82D2CE
support.type.posix-reserved.c,support.type.posix-reserved.cpp#D6D6DD
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp#82D2CE
support.type.python#82D2CE
keyword.operator.logical.python#82D2CE
variable.parameter.function.python, variable.parameter.function.language.python#F8C762
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python#D6D6DD
meta.function-call.generic.python#AAA0FA
constant.character.format.placeholder.other.python#F8C762
keyword.operator#D6D6DD
keyword.operator.assignment.compound#82D2CE
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts#D6D6DD
keyword#82D2CE
entity.name.namespace#dddddd
variable, variable.c#D6D6DD
variable.language#CC7C8A
token.variable.parameter.java#D6D6DD
import.storage.java#EFB080
token.package.keyword#82D2CE
token.package#D6D6DD
entity.name.function, meta.require, support.function, variable.function#EFB080
entity.name.type.namespace#EFB080
support.class, entity.name.type.class#87C3FF
entity.name.class, variable.other.class.js, variable.other.class.ts, entity.name.class.identifier.namespace.type#EFB080
variable.other.class.php#D6D6DD
entity.name.type#EFB080
keyword.control.directive.include.cpp#A8CC7C
control.elements, keyword.operator.less#F8C762
keyword.other.special-method#AAA0FA
storage, token.storage#82D2CE
storage.type.function.arrow#D6D6DD
storage.modifier.reference, storage.modifier.pointer#D6D6DD
token.storage.type.java#EFB080
support.function#EFB080
meta.property-name.css#87C3FF
meta.tag#FAD075
entity.other.inherited-class#EFB080
constant.other.symbol#D6D6DD
constant.numeric#EBC88D
constant.other.color#EBC88D
punctuation.definition.constant#F8C762
entity.name.tag.template, entity.name.tag.script, entity.name.tag.style#AAA0FA
entity.name.tag.html#87C3FF
meta.property-value.css#E394DC
entity.other.attribute-name#AAA0FA
entity.other.attribute-name.id#AAA0FA
entity.other.attribute-name.class.css#F8C762
meta.selector#82D2CE
markup.heading#D6D6DD
markup.heading punctuation.definition.heading, entity.name.section#AAA0FA
keyword.other.unit#EBC88D
markup.bold,todo.bold#F8C762
punctuation.definition.bold#EFB080
markup.italic, punctuation.definition.italic,todo.emphasis#82D2CE
emphasis md#82D2CE
entity.name.section.markdown#EBC88D
punctuation.definition.heading.markdown#82D2CE
markup.heading.setext#D6D6DD
punctuation.definition.bold.markdown#F8C762
markup.inline.raw.markdown, markup.inline.raw.string.markdown#E394DC
punctuation.definition.raw.markdown, markup.fenced_code.block.markdown punctuation.definition.markdown, punctuation.definition.markdown#82D2CE
fenced_code.block.language.markdown, markup.fenced_code.block.markdown fenced_code.block.language#EBC88D
punctuation.definition.list.begin.markdown, punctuation.definition.list.markdown, beginning.punctuation.definition.list.markdown#D6D6DD
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#D6D6DD
punctuation.definition.metadata.markdown#D6D6DD
markup.underline.link.markdown,markup.underline.link.image.markdown#82D2CE
string.other.link.title.markdown,string.other.link.description.markdown#AAA0FA
string.regexp#82D2CE
constant.character.escape#D6D6DD
variable.interpolation#D6D6DD
punctuation.section.embedded.begin,punctuation.section.embedded.end#82D2CE
invalid.illegal, invalid.illegal.bad-ampersand.html, invalid.broken, invalid.deprecated, invalid.unimplemented#D6D6DD
source.json meta.structure.dictionary.json > string.quoted.json#D6D6DD
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#D6D6DD
source.json meta.structure.dictionary.json > value.json > string.quoted.json,source.json meta.structure.array.json > value.json > string.quoted.json,source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation,source.json meta.structure.array.json > value.json > string.quoted.json > punctuation#E394DC
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#D6D6DD
support.type.property-name.json#AAA0FA
constant.language.json.comments#82D2CE
entity.name.tag.laravel-blade, support.constant.laravel-blade#82D2CE
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php#EFB080
keyword.operator.error-control.php#82D2CE
keyword.operator.type.php#82D2CE
punctuation.section.array.begin.php#D6D6DD
punctuation.section.array.end.php#D6D6DD
invalid.illegal.non-null-typehinted.php#F14C4C
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php#EFB080
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php#AAA0FA
punctuation.definition.parameters.begin.bracket.round.php,punctuation.definition.parameters.end.bracket.round.php,punctuation.separator.delimiter.php,punctuation.section.scope.begin.php,punctuation.section.scope.end.php,punctuation.terminator.expression.php,punctuation.definition.arguments.begin.bracket.round.php,punctuation.definition.arguments.end.bracket.round.php,punctuation.definition.storage-type.begin.bracket.round.php,punctuation.definition.storage-type.end.bracket.round.php,punctuation.definition.array.begin.bracket.round.php,punctuation.definition.array.end.bracket.round.php,punctuation.definition.begin.bracket.round.php,punctuation.definition.end.bracket.round.php,punctuation.definition.begin.bracket.curly.php,punctuation.definition.end.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php,punctuation.definition.section.switch-block.start.bracket.curly.php,punctuation.definition.section.switch-block.begin.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php#D6D6DD
support.constant.core.rust#F8C762
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php#F8C762
entity.name.goto-label.php,support.other.php#AAA0FA
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php#D6D6DD
keyword.operator.regexp.php#82D2CE
keyword.operator.comparison.php#D6D6DD
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#82D2CE
meta.function.decorator.python, punctuation.definition.decorator.python, entity.name.function.decorator.python#A8CC7C
support.token.decorator.python,meta.function.decorator.identifier.python#D6D6DD
function.brace#D6D6DD
function.parameter, function.parameter.ruby, function.parameter.cs#D6D6DD
constant.language.symbol.ruby#D6D6DD
rgb-value#D6D6DD
inline-color-decoration rgb-value#F8C762
less rgb-value#F8C762
selector.sass#D6D6DD
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#82D2CE
block.scope.end,block.scope.begin#D6D6DD
storage.type.cs#EFB080
entity.name.variable.local.cs#D6D6DD
token.info-token#AAA0FA
token.warn-token#F8C762
token.error-token#F14C4C
token.debug-token#82D2CE
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#82D2CE
meta.template.expression#D6D6DD
keyword.operator.module#82D2CE
support.type.type.flowtype#AAA0FA
support.type.primitive#EFB080
meta.property.object#D6D6DD
variable.parameter.function.js#D6D6DD
keyword.other.template.begin, keyword.other.template.end, keyword.other.substitution.begin, keyword.other.substitution.end#E394DC
keyword.operator.assignment#D6D6DD
keyword.operator.assignment.go#EFB080
keyword.operator.arithmetic.go, keyword.operator.address.go#82D2CE
entity.name.package.go#EFB080
support.type.prelude.elm#D6D6DD
support.constant.elm#F8C762
punctuation.quasi.element#82D2CE
constant.character.entity#D6D6DD
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#D6D6DD
entity.global.clojure#EFB080
meta.symbol.clojure#D6D6DD
constant.keyword.clojure#D6D6DD
meta.arguments.coffee, variable.parameter.function.coffee#D6D6DD
source.ini#E394DC
meta.scope.prerequisites.makefile#D6D6DD
source.makefile#EFB080
storage.modifier.import.groovy#EFB080
meta.method.groovy#AAA0FA
meta.definition.variable.name.groovy#D6D6DD
meta.definition.class.inherited.classes.groovy#E394DC
support.variable.semantic.hlsl#EFB080
support.type.texture.hlsl, support.type.sampler.hlsl, support.type.object.hlsl, support.type.object.rw.hlsl, support.type.fx.hlsl, support.type.object.hlsl#82D2CE
text.variable, text.bracketed#D6D6DD
support.type.swift, support.type.vb.asp#EFB080
entity.name.function.xi#EFB080
entity.name.class.xi#D6D6DD
constant.character.character-class.regexp.xi#D6D6DD
constant.regexp.xi#82D2CE
keyword.control.xi#D6D6DD
invalid.xi#D6D6DD
beginning.punctuation.definition.quote.markdown.xi#E394DC
beginning.punctuation.definition.list.markdown.xi#E4E4E45E
constant.character.xi#AAA0FA
accent.xi#AAA0FA
wikiword.xi#F8C762
constant.other.color.rgb-value.xi#D6D6DD
punctuation.definition.tag.xi#E4E4E45E
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition#EFB080
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#D6D6DD
meta.brace.square#D6D6DD
comment, punctuation.definition.comment, comment.line.double-slash, comment.block.documentation#909192italic
markup.quote.markdown#909192
punctuation.definition.block.sequence.item.yaml#D6D6DD
string.unquoted.plain.out.yaml, constant.language.boolean.yaml#AAA0FA
entity.name.tag.yaml, support.type.property-name.toml, support.type.property-name.table.toml#82D2CE
constant.language.symbol.elixir#D6D6DD
markup.italic.markdownitalic

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

VS Code Fleet - Coding Theme