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.background#282c34
  • activityBar.foreground#c7ccd6
  • activityBarBadge.background#21252b
  • activityBarBadge.foreground#f8fafd
  • badge.background#21252b
  • breadcrumbPicker.background#21252b
  • button.background#404754
  • button.secondaryBackground#30333d
  • button.secondaryForeground#c0bdbd
  • checkbox.border#404754
  • debugToolBar.background#21252b
  • descriptionForeground#abb2bf
  • diffEditor.insertedTextBackground#00809b33
  • dropdown.background#21252b
  • dropdown.border#21252b
  • dropdown.listBackground#21252b
  • editor.background#282c34
  • editor.findMatchBackground#42557b
  • editor.findMatchBorder#457dff
  • editor.findMatchHighlightBackground#6199ff2f
  • editor.foreground#abb2bf
  • editor.lineHighlightBackground#2c313c
  • editor.selectionBackground#67769660
  • editor.selectionHighlightBackground#404859
  • editor.selectionHighlightBorder#404859
  • editor.wordHighlightBackground#d2e0ff2f
  • editor.wordHighlightBorder#7f848e
  • editor.wordHighlightStrongBackground#abb2bf26
  • editor.wordHighlightStrongBorder#7f848e
  • editorBracketHighlight.foreground1#d19a66
  • editorBracketHighlight.foreground2#c678dd
  • editorBracketHighlight.foreground3#56b6c2
  • editorBracketMatch.background#515a6b
  • editorBracketMatch.border#515a6b
  • editorCursor.background#ffffffc9
  • editorCursor.foreground#f0f0f0
  • editorError.foreground#c24038
  • editorGroup.border#23252c
  • editorGroup.emptyBackground#282c34
  • editorGroupHeader.tabsBackground#282c34
  • editorGutter.addedBackground#109868
  • editorGutter.deletedBackground#9A353D
  • editorGutter.modifiedBackground#948B60
  • editorHoverWidget.background#21252b
  • editorHoverWidget.border#181a1f
  • editorHoverWidget.highlightForeground#61afef
  • editorIndentGuide.activeBackground#495169
  • editorIndentGuide.background#343a45
  • editorInlayHint.background#2c313c
  • editorInlayHint.foreground#abb2bf
  • editorLineNumber.activeForeground#abb2bf
  • editorLineNumber.foreground#495162
  • editorLink.activeForeground#f0f0f0
  • editorMarkerNavigation.background#21252b
  • editorOverviewRuler.border#282c34
  • editorRuler.foreground#abb2bf26
  • editorSuggestWidget.background#21252b
  • editorSuggestWidget.border#181a1f
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWarning.foreground#d19a66
  • editorWhitespace.foreground#ffffff1d
  • editorWidget.background#21252b
  • focusBorder#282c34
  • gitDecoration.ignoredResourceForeground#636b78
  • input.background#21252b
  • input.foreground#abb2bf
  • list.activeSelectionBackground#2c313a
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#323842
  • list.focusForeground#f0f0f0
  • list.highlightForeground#ecebeb
  • list.hoverBackground#2c313a
  • list.hoverForeground#abb2bf
  • list.inactiveSelectionBackground#323842
  • list.inactiveSelectionForeground#d7dae0
  • list.warningForeground#d19a66
  • listFilterWidget.background#21252b
  • menu.foreground#abb2bf
  • menu.separatorBackground#343a45
  • menubar.selectionBackground#323842
  • menubar.selectionForeground#f0f0f0
  • minimapGutter.addedBackground#109868
  • minimapGutter.deletedBackground#9A353D
  • minimapGutter.modifiedBackground#948B60
  • notificationLink.foreground#f0f0f0
  • notifications.foreground#969aa4
  • panel.background#282c34
  • panel.border#3e4452
  • panelInput.border#23252c
  • panelSection.dropBackground#323842a8
  • panelSectionHeader.background#21252b
  • panelTitle.activeBorder#f0f0f0
  • panelTitle.activeForeground#f0f0f0
  • panelTitle.inactiveForeground#abb2bf
  • peekViewEditor.background#1b1d23
  • peekViewEditor.matchHighlightBackground#29244b
  • peekViewResult.background#22262b
  • progressBar.background#f0f0f0
  • scrollbar.shadow#282c34
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566660
  • scrollbarSlider.hoverBackground#5a637580
  • settings.focusedRowBackground#282c34
  • settings.headerForeground#fff
  • sideBar.background#282c34
  • sideBar.border#23252c
  • sideBar.dropBackground#323842a8
  • sideBar.foreground#969aa4
  • sideBarSectionHeader.background#282c34
  • sideBarSectionHeader.foreground#abb2bf
  • sideBarTitle.foreground#abb2bf
  • statusBar.background#282c34
  • statusBar.border#23252c
  • statusBar.debuggingBackground#cc6633
  • statusBar.debuggingBorder#ff000000
  • statusBar.debuggingForeground#fff
  • statusBar.foreground#969aa4
  • statusBar.noFolderBackground#282c34
  • statusBarItem.remoteBackground#ff000000
  • statusBarItem.remoteForeground#fff
  • statusBarItem.warningBackground#282c34
  • statusBarItem.warningForeground#b78853
  • tab.activeBackground#282c34
  • tab.activeForeground#dcdcdc
  • tab.hoverBackground#323842
  • tab.inactiveBackground#282c34
  • tab.unfocusedHoverBackground#323842
  • terminal.ansiBlack#3f4451
  • terminal.ansiBlue#4aa5f0
  • terminal.ansiBrightBlack#4f5666
  • terminal.ansiBrightBlue#4dc4ff
  • terminal.ansiBrightCyan#4cd1e0
  • terminal.ansiBrightGreen#a5e075
  • terminal.ansiBrightMagenta#de73ff
  • terminal.ansiBrightRed#ff616e
  • terminal.ansiBrightWhite#e6e6e6
  • terminal.ansiBrightYellow#f0a45d
  • terminal.ansiCyan#42b3c2
  • terminal.ansiGreen#8cc265
  • terminal.ansiMagenta#c162de
  • terminal.ansiRed#e05561
  • terminal.ansiWhite#d7dae0
  • terminal.ansiYellow#d18f52
  • terminal.background#282c34
  • terminal.border#3e4452
  • terminal.foreground#abb2bf
  • terminal.selectionBackground#abb2bf30
  • textBlockQuote.background#2e3440
  • textBlockQuote.border#4b5362
  • textLink.activeForeground#f0f0f0
  • textLink.foreground#f0f0f0
  • textPreformat.foreground#d19a66
  • titleBar.activeBackground#282c34
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#21252b
  • titleBar.inactiveForeground#6b717d
  • tree.indentGuidesStroke#343a45
  • walkThrough.embeddedEditorBackground#2e3440
  • widget.shadow#23252c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
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#c0aaff
punctuation#c7c7c7
variable.other.generic-type.haskell#ff6188
storage.type.haskell#fc9867
support.variable.magic.python#ab9df2
entity.name.type.alias.ts,entity.name.type.alias.tsx#d6acff
punctuation.separator,punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python#C0AAFF
storage.modifier.lifetime.rust#fcfcfa
support.function.std.rust#a9dc76
entity.name.lifetime.rust#ab9df2
variable.language.rust#ab9df2
variable.language.self#fc9867italic
support.constant.edge#ff6188
constant.other.character-class.regexp#ab9df2
keyword.operator.quantifier.regexp#fc9867
punctuation.definition.string.begin,punctuation.definition.string.end#fff48a
punctuation.definition.group#55dbe4
comment markup.link#727072
markup.changed.diff#d1d1d1
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff#a9dc76
markup.inserted.diff#fff48a
markup.deleted.diff#ab9df2
meta.tag.other.unrecognized.html.derivative#ab9df2
meta.function.c,meta.function.cpp#ab9df2
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#c7c7c7
punctuation.separator.key-value#coaaff
keyword.operator.expression.import#a9dc76
support.constant.math#d1d1d1
support.constant.property.math#fc9867
variable.other.constant#ab9df2
variable.other.object#ab9df2italic
variable.other.readwrite#fcfcfa
meta.type.annotation#d6acffitalic
punctuation.definition.typeparameters#c7c7c7
meta.return.type#d6acffitalic
storage.type.annotation.java, storage.type.object.array.java#d6acff
source.java#ab9df2
variable.other.definition#fcfcfa
,meta.method.identifier.java,meta.method-call.java,meta.method.body.java#fc9867italic
meta.method.java#a9dc76
storage.modifier.import.java#fcfcfa
storage.type.java#d6aaffitalic
storage.type.generic.java#ab9df2italic
keyword.operator.instanceof.java#ff6188
meta.definition.variable.name.java#ab9df2
keyword.operator.logical#c0aaff
keyword.operator.bitwise#55dbe4
keyword.operator.channel#55dbe4
support.constant.property-value.scss,support.constant.property-value.css#ab9df2
keyword.operator.css,keyword.operator.scss,keyword.operator.less#55dbe4
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#fc9867
punctuation.separator.list.comma.css#c7c7c7
support.constant.color.w3c-standard-color-name.css#fc9867
support.type.vendored.property-name.css#55dbe4italic
support.module.node,support.type.object.module,support.module.node#fcfcfa
meta.definition.method#aae273
entity.name.type.module#fcfcfa
meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node#fcfcfa
support.constant.json#fc9867
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof#c0aaff
support.type.object.console#ab9df2
support.variable.property.process#fc9867
meta.decorator#ab9df2italic
meta.function, support.function.console#aae273
keyword.operator.misc.rust#fcfcfa
keyword.operator.sigil.rust#ff6188
keyword.operator.delete#ff6188
support.type.object.dom#55dbe4
support.variable.dom,support.variable.property.dom#ab9df2
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational#ab9df2
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#ff6188
punctuation.separator.delimiter#c7c7c7
punctuation.accessor#c0aaff
punctuation.separator.c,punctuation.separator.cpp#ff6188
support.type.posix-reserved.c,support.type.posix-reserved.cpp#55dbe4
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp#ff6188
support.type.python#ab9df2italic
keyword.operator.logical.python#ff6188
variable.parameter.function.python#fc9867
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python#c7c7c7
meta.function-call.generic.python#aae273
variable.language.special.self.python,variable.language.special.cls.python#fc9867
constant.character.format.placeholder.other.python#fc9867
keyword.operator#c0aaff
keyword.operator.assignment.compound#ff6188
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts#55dbe4
entity.name.namespace#fcfcfa
variable.other.property#fcfcfa
variable.parameter.function-call#35c0bbitalic
variable.parameter.ts#fc9867italic
variable.parameter.probably#fc9867italic
variable.parameter.function#fc9867italic
meta.function-call.arguments#fcfcfa
variable.c#fcfcfa
variable.language#fcfcfaitalic
variable.language.dart#fc9867
variable.language.this#d6acffitalic
token.variable.parameter.java#fcfcfa
import.storage.java#d1d1d1
token.package.keyword#ff6188
token.package#fcfcfa
meta.require, support.function.any-method#a9dc76
meta.function-call#aae273
entity.name.type.namespace#fcfcfa
entity.name.type.class.python#55dbe4
entity.name.class.identifier.namespace.type#33F3FF
entity.name.class, variable.other.class.js, variable.other.class.ts#55dbe4
support.class.component#55dbe4italic
support.class.dart#d6acffitalic
entity.name.type.rust, entity.name.type.numeric.rust, entity.name.type.primitive.rust#d6acffitalic
entity.name.type.result, entity.name.type.lifetime#ab9df2italic
entity.name.type.go#55dbe4
entity.name.type.option#ab9df2
support.class.kotlin#d6acffitalic
entity.name.type.class.kotlin#ab9df2italic
entity.name.type.struct, entity.name.type.trait#d6acff
variable.other.class.php#ab9df2
source#fcfcfa
keyword.control#ff6188italic
control.elements, keyword.operator.less#fc9867
keyword.other.special-method#ab9df2
storage#ff6188italic
keyword.operator.type
token.storage#ff6188
keyword.operator.expression.delete,keyword.operator.expression.in,keyword.operator.expression.of,keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.expression.typeof,keyword.operator.expression.void#ff6188
token.storage.type.java#d1d1d1
storage.type.go#d6acffitalic
support.function#aae273
entity.name.function#aae273
entity.name.function.macro#aae273
support.type.metaclass#fc9867italic
support.function.builtin#ab9df2
support.type.property-name#fcfcfaitalic
support.constant.property-value#fcfcfa
support.constant.font-name#ab9df2
meta.tag#fcfcfa
string#fff48a
entity.other.inherited-class#fcfcfa
constant.other.symbol#55dbe4
constant.numeric#fc9867
constant#ab9df2
punctuation.definition.constant#fc9867
entity.name.tag#ff6188
entity.other.attribute-name#aae273italic
entity.other.attribute-name.id#a9dc76italic
entity.other.attribute-name.class.css#aae273italic
variable.argument#fcfcfa
meta.selector#ff6188
markup.heading#ab9df2
markup.heading punctuation.definition.heading, entity.name.section#a9dc76
keyword.other.unit#ff6188
markup.bold,todo.bold#fc9867
punctuation.definition.bold#d1d1d1
markup.italic, punctuation.definition.italic,todo.emphasis#ff6188
emphasis md#ff6188
entity.name.section.markdown#ab9df2
punctuation.definition.heading.markdown#ab9df2
punctuation.definition.list.begin.markdown#ab9df2
markup.heading.setext#fcfcfa
punctuation.definition.bold.markdown#fc9867
markup.inline.raw.markdown#fff48a
markup.inline.raw.string.markdown#fff48a
punctuation.definition.list.markdown#ab9df2
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#ab9df2
beginning.punctuation.definition.list.markdown#ab9df2
punctuation.definition.metadata.markdown#ab9df2
markup.underline.link.markdown,markup.underline.link.image.markdown#ff6188
string.other.link.title.markdown,string.other.link.description.markdown#a9dc76
string.regexp, constant.other.character-class.set.regexp, constant.other.character-class#fff48a
constant.character.numeric.regexp#fc9867
constant.character.escape#55dbe4
punctuation.section.embedded, variable.interpolation#ab9df2
punctuation.section.embedded.begin,punctuation.section.embedded.end#ff6188
invalid.illegal#ffffff
invalid.illegal.bad-ampersand.html#fcfcfa
invalid.broken#ffffff
invalid.deprecated#ffffff
invalid.unimplemented#ffffff
source.json meta.structure.dictionary.json > string.quoted.json#ab9df2
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#ab9df2
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#fff48a
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#55dbe4
support.type.property-name.json#fcfcfaitalic
support.type.property-name.json punctuation#a8a8a8italic
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade#ff6188
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade#ff6188
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php#d1d1d1
keyword.operator.error-control.php#ff6188
keyword.operator.type.php#ff6188
punctuation.section.array.begin.php#c7c7c7
punctuation.section.array.end.php#c7c7c7
invalid.illegal.non-null-typehinted.php#f44747
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php#d1d1d1
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#c7c7c7
support.constant.core.rust#fc9867
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php#fc9867
entity.name.goto-label.php,support.other.php#a9dc76
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php#55dbe4
keyword.operator.regexp.php#ff6188
keyword.operator.comparison.php#55dbe4
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#ff6188
support.token.decorator.python,meta.function.decorator.identifier.python#55dbe4
meta.item-access#D6ACFF
function.parameter#fcfcfa
function.brace#fcfcfa
function.parameter.ruby, function.parameter.cs#fcfcfa
constant.language.symbol.ruby#55dbe4
rgb-value#55dbe4
inline-color-decoration rgb-value#fc9867
constant.other.color#fc9867
less rgb-value#fc9867
selector.sass#ab9df2
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#ab9df2italic
block.scope.end,block.scope.begin#fcfcfa
storage.type.cs#d6acff
entity.name.variable.local.cs#fcfcfa
entity.name.type.class.cs#ab9df2
entity.name.type.cs#d6acff
variable.other.object.cs#55dbe4
entity.name.variable.parameter.cs#fc9867
variable.other.object#fcfcfa
entity.name.namespace#acc2ff
entity.name.type.enum.cs#55dbe4
entity.name.type.class.gdscript,entity.name.type.class.builtin.gdscript#d6acff
constant.language.gdscript#ab9df2
support.class.library.gdscript#d6aaff
entity.name.function.decorator.gdscript#60e9f3
variable.other.gdscript#fcfcfa
keyword.operator.arrow#fc9867
keyword#ff6188italic
token.info-token#a9dc76
token.warn-token#fc9867
token.error-token#f44747
token.debug-token#ff6188
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#ff6188
meta.template.expression#fcfcfa
keyword.operator.module#ff6188
support.type.type.flowtype#a9dc76
support.type.primitive#d1d1d1
meta.property.object#ab9df2
variable.parameter.function.js#ab9df2
keyword.other.template.begin#fff48a
keyword.other.template.end#fff48a
keyword.other.substitution.begin#fff48a
keyword.other.substitution.end#fff48a
keyword.operator.assignment#c0aaff
constant.language.go#55dbe4
support.constant#acc2ff
keyword.operator.arithmetic.go, keyword.operator.address.go#ff6188
entity.name.package.go#fcfcfa
support.type.prelude.elm#55dbe4
support.constant.elm#fc9867
punctuation.quasi.element#ff6188
constant.character.entity#ab9df2
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#55dbe4
entity.global.clojure#d1d1d1
meta.symbol.clojure#ab9df2
constant.keyword.clojure#55dbe4
meta.arguments.coffee, variable.parameter.function.coffee#ab9df2
source.ini#fff48a
meta.scope.prerequisites.makefile#ab9df2
source.makefile#d1d1d1
storage.modifier.import.groovy#d1d1d1
meta.method.groovy#a9dc76
meta.definition.variable.name.groovy#ab9df2
meta.definition.class.inherited.classes.groovy#fff48a
support.variable.semantic.hlsl#d1d1d1
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#ff6188
text.variable, text.bracketed#ab9df2
support.type.swift, support.type.vb.asp#d1d1d1
entity.name.function.xi#d1d1d1
entity.name.class.xi#55dbe4
constant.character.character-class.regexp.xi#ab9df2
constant.regexp.xi#ff6188
keyword.control.xi#55dbe4
invalid.xi#fcfcfa
beginning.punctuation.definition.quote.markdown.xi#fff48a
beginning.punctuation.definition.list.markdown.xi#727072
constant.character.xi#a9dc76
accent.xi#a9dc76
wikiword.xi#fc9867
constant.other.color.rgb-value.xi#ffffff
punctuation.definition.tag.xi#727072
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition#d1d1d1
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#ab9df2
meta.brace.square#fcfcfa
comment, punctuation.definition.comment#727072italic
markup.quote.markdown#727072
punctuation.definition.block.sequence.item.yaml#c7c7c7
constant.language.symbol.elixir#55dbe4
entity.other.attribute-name.js,entity.other.attribute-name.ts,entity.other.attribute-name.jsx,entity.other.attribute-name.tsx,variable.language.super#aae273italic
comment.line.double-slash,comment.block.documentationitalic
keyword.control.import.python,keyword.control.flow.pythonitalic
markup.italic.markdownitalic

Shiki preview

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

Loading...

Lotus Flat Dark - Coding Theme