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#0F121C
  • activityBar.foreground#d7dae0
  • activityBarBadge.background#4d78cc
  • activityBarBadge.foreground#f8fafd
  • badge.background#0F121C
  • button.background#404754
  • button.secondaryBackground#30333d
  • button.secondaryForeground#c0bdbd
  • checkbox.border#404754
  • contrastActiveBorder#0F121C
  • contrastBorder#0F121C
  • debugToolBar.background#21252b
  • descriptionForeground#abb2bf
  • diffEditor.insertedTextBackground#00809b33
  • dropdown.background#21252b
  • dropdown.border#21252b
  • editor.background#0F121C
  • editor.findMatchBackground#42557b
  • editor.findMatchBorder#457dff
  • editor.findMatchHighlightBackground#6199ff2f
  • editor.foreground#abb2bf
  • editor.lineHighlightBackground#171B2B
  • editor.lineHighlightBorder#0F121C
  • editor.selectionBackground#67769660
  • editor.selectionHighlightBackground#ffffff10
  • editor.selectionHighlightBorder#dddddd
  • editor.wordHighlightBackground#d2e0ff2f
  • editor.wordHighlightBorder#7f848e
  • editor.wordHighlightStrongBackground#abb2bf26
  • editor.wordHighlightStrongBorder#7f848e
  • editorBracketMatch.background#515a6b
  • editorBracketMatch.border#515a6b
  • editorCursor.background#e033ed
  • editorCursor.foreground#e033ed
  • editorError.foreground#c24038
  • editorGroup.border#0F121C
  • editorGroup.emptyBackground#0F121C
  • editorGroupHeader.tabsBackground#0F121C
  • editorGroupHeader.tabsBorder#0F121C
  • editorGutter.addedBackground#109868
  • editorGutter.deletedBackground#9a353d
  • editorGutter.modifiedBackground#948b60
  • editorHoverWidget.background#171B2B
  • editorHoverWidget.border#181a1f
  • editorIndentGuide.activeBackground#46507a
  • editorIndentGuide.background#323955
  • editorLineNumber.activeForeground#74b9ff
  • editorLineNumber.foreground#323955
  • editorMarkerNavigation.background#21252b
  • editorRuler.foreground#abb2bf26
  • editorSuggestWidget.background#171B2B
  • editorSuggestWidget.border#181a1f
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWarning.foreground#d19a66
  • editorWhitespace.foreground#3b4048
  • editorWidget.background#0F121C
  • editorWidget.border#171B2B
  • focusBorder#0F121C
  • gitDecoration.ignoredResourceForeground#636b78
  • input.background#181c2c
  • list.activeSelectionBackground#171B2B
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#323842
  • list.focusForeground#f0f0f0
  • list.highlightForeground#c5c5c5
  • list.hoverBackground#171B2B
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#171B2B
  • list.inactiveSelectionForeground#d7dae0
  • list.warningForeground#d19a66
  • menu.foreground#abb2bf
  • menu.separatorBackground#343a45
  • minimapGutter.addedBackground#109868
  • minimapGutter.deletedBackground#9a353d
  • minimapGutter.modifiedBackground#948b60
  • panel.background#0F121C
  • panel.border#0F121C
  • panelSectionHeader.background#21252b
  • peekViewEditor.background#0F121C
  • peekViewEditor.matchHighlightBackground#29244b
  • peekViewResult.background#22262b
  • sash.hoverBorder#74b9ff
  • scrollbar.shadow#0F121C
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566660
  • scrollbarSlider.hoverBackground#5a637580
  • selection.background#0abde3
  • settings.focusedRowBackground#282c34
  • settings.headerForeground#ffffff
  • sideBar.background#0F121C
  • sideBar.foreground#abb2bf
  • sideBarSectionHeader.background#171B2B
  • sideBarSectionHeader.foreground#abb2bf
  • statusBar.background#0F121C
  • statusBar.debuggingBackground#cc6633
  • statusBar.debuggingBorder#66017a
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#0F121C
  • statusBarItem.hoverBackground#171B2B
  • statusBarItem.remoteBackground#0F121C
  • statusBarItem.remoteForeground#f8fafd
  • tab.activeBackground#171B2B
  • tab.activeBorder#74b9ff
  • tab.activeForeground#dcdcdc
  • tab.border#171B2B
  • tab.hoverBackground#171B2B
  • tab.hoverBorder#171B2B
  • tab.inactiveBackground#0F121C
  • tab.unfocusedActiveBorder#74b9ff
  • tab.unfocusedHoverBackground#323842
  • tab.unfocusedHoverBorder#171B2B
  • 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#d7dae0
  • terminal.ansiBrightYellow#f0a45d
  • terminal.ansiCyan#42b3c2
  • terminal.ansiGreen#8cc265
  • terminal.ansiMagenta#c162de
  • terminal.ansiRed#e05561
  • terminal.ansiWhite#e6e6e6
  • terminal.ansiYellow#d18f52
  • terminal.background#0F121C
  • terminal.border#abb2bf
  • terminal.foreground#83B3FF
  • terminal.selectionBackground#abb2bf30
  • textBlockQuote.background#2e3440
  • textBlockQuote.border#4b5362
  • textLink.foreground#83b2ff
  • textPreformat.foreground#d19a66
  • titleBar.activeBackground#0F121C
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#0F121C
  • titleBar.inactiveForeground#6b717d
  • walkThrough.embeddedEditorBackground#2e3440
  • welcomePage.buttonHoverBackground#404754
  • widget.shadow#0F121C

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#83b2ff
variable.other.generic-type.haskell#C678DD
storage.type.haskell#D19A66
support.variable.magic.python#83b2ff
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python#ABB2BF
variable.parameter.function.language.special.self.python#E5C07B
storage.modifier.lifetime.rust#ABB2BF
support.function.std.rust#83b2ff
entity.name.lifetime.rust#E5C07B
variable.language.rust#83b2ff
support.constant.edge#C678DD
constant.other.character-class.regexp#83b2ff
keyword.operator.quantifier.regexp#D19A66
punctuation.definition.string.begin,punctuation.definition.string.end#98C379
variable.parameter.function#ABB2BF
comment markup.link#5C6370
markup.changed.diff#E5C07B
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff#83b2ff
markup.inserted.diff#98C379
markup.deleted.diff#83b2ff
meta.function.c,meta.function.cpp#83b2ff
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#ABB2BF
punctuation.separator.key-value#ABB2BF
keyword.operator.expression.import#83b2ff
support.constant.math#E5C07B
support.constant.property.math#D19A66
variable.other.constant#E5C07B
storage.type.annotation.java, storage.type.object.array.java#E5C07B
source.java#83b2ff
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#ABB2BF
meta.method.java#83b2ff
storage.modifier.import.java,storage.type.java,storage.type.generic.java#E5C07B
keyword.operator.instanceof.java#C678DD
meta.definition.variable.name.java#83b2ff
keyword.operator.logical#56B6C2
keyword.operator.bitwise#56B6C2
keyword.operator.channel#56B6C2
support.constant.property-value.scss,support.constant.property-value.css#D19A66
keyword.operator.css,keyword.operator.scss,keyword.operator.less#56B6C2
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#D19A66
punctuation.separator.list.comma.css#ABB2BF
support.constant.color.w3c-standard-color-name.css#D19A66
support.type.vendored.property-name.css#56B6C2
support.module.node,support.type.object.module,support.module.node#E5C07B
entity.name.type.module#E5C07B
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node#83b2ff
support.constant.json#D19A66
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof#C678DD
support.type.object.console#83b2ff
support.variable.property.process#D19A66
entity.name.function,support.function.console#83b2ff
keyword.operator.misc.rust#ABB2BF
keyword.operator.sigil.rust#C678DD
keyword.operator.delete#C678DD
support.type.object.dom#56B6C2
support.variable.dom,support.variable.property.dom#83b2ff
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational#56B6C2
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#C678DD
punctuation.separator.delimiter#ABB2BF
punctuation.separator.c,punctuation.separator.cpp#C678DD
support.type.posix-reserved.c,support.type.posix-reserved.cpp#56B6C2
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp#C678DD
variable.parameter.function.language.python#D19A66
support.type.python#56B6C2
keyword.operator.logical.python#C678DD
variable.parameter.function.python#D19A66
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python#ABB2BF
meta.function-call.generic.python#83b2ff
constant.character.format.placeholder.other.python#D19A66
keyword.operator#ABB2BF
keyword.operator.assignment.compound#C678DD
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts#56B6C2
keyword#C678DD
entity.name.namespace#E5C07B
variable#83b2ff
variable.c#ABB2BF
variable.language#E5C07B
token.variable.parameter.java#ABB2BF
import.storage.java#E5C07B
token.package.keyword#C678DD
token.package#ABB2BF
entity.name.function, meta.require, support.function.any-method, variable.function#83b2ffbold
entity.name.type.namespace#E5C07Bbold
support.class, entity.name.type.class#E5C07B
entity.name.class.identifier.namespace.type#E5C07B
entity.name.class, variable.other.class.js, variable.other.class.ts#E5C07B
variable.other.class.php#83b2ff
entity.name.type#E5C07B
keyword.control#C678DD
control.elements, keyword.operator.less#D19A66
keyword.other.special-method#83b2ff
storage#C678DD
token.storage#C678DD
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#C678DD
token.storage.type.java#E5C07B
support.function#56B6C2
support.type.property-name#ABB2BF
support.constant.property-value#ABB2BF
support.constant.font-name#D19A66
meta.tag#ABB2BF
string#98C379
constant.other.symbol#56B6C2
constant.numeric#D19A66
constant#D19A66
punctuation.definition.constant#D19A66
entity.name.tag#83b2ff
entity.other.attribute-name#D19A66
entity.other.attribute-name.id#83b2ff
entity.other.attribute-name.class.css#D19A66
meta.selector#C678DD
markup.heading#83b2ffbold
markup.heading punctuation.definition.heading, entity.name.section#83b2ff
keyword.other.unit#83b2ff
markup.bold,todo.bold#D19A66bold
punctuation.definition.bold#E5C07B
markup.italic, punctuation.definition.italic,todo.emphasis#C678DD
emphasis md#C678DD
entity.name.section.markdown#83b2ff
punctuation.definition.heading.markdown#83b2ff
punctuation.definition.list.begin.markdown#83b2ff
markup.heading.setext#ABB2BF
punctuation.definition.bold.markdown#D19A66
markup.inline.raw.markdown#98C379
markup.inline.raw.string.markdown#98C379
punctuation.definition.list.markdown#83b2ff
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#83b2ff
beginning.punctuation.definition.list.markdown#83b2ff
punctuation.definition.metadata.markdown#83b2ff
markup.underline.link.markdown,markup.underline.link.image.markdown#C678DD
string.other.link.title.markdown,string.other.link.description.markdown#83b2ff
string.regexp#56B6C2
constant.character.escape#56B6C2
punctuation.section.embedded, variable.interpolation#83b2ff
punctuation.section.embedded.begin,punctuation.section.embedded.end#C678DD
invalid.illegal#FFFFFF
invalid.illegal.bad-ampersand.html#ABB2BF
invalid.broken#FFFFFF
invalid.deprecated#FFFFFF
invalid.unimplemented#FFFFFF
source.json meta.structure.dictionary.json > string.quoted.json#83b2ff
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#83b2ff
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#98C379
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#56B6C2
support.type.property-name.json#83b2ff
support.type.property-name.json punctuation#83b2ff
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade#C678DD
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade#C678DD
support.other.namespace.use.php,support.other.namespace.use-as.php,entity.other.alias.php,meta.interface.php#E5C07B
keyword.operator.error-control.php#C678DD
keyword.operator.type.php#C678DD
punctuation.section.array.begin.php#ABB2BF
punctuation.section.array.end.php#ABB2BF
invalid.illegal.non-null-typehinted.php#F44747
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php#E5C07B
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php#83b2ff
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#ABB2BF
support.constant.core.rust#D19A66
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php#D19A66
entity.name.goto-label.php,support.other.php#83b2ff
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php#56B6C2
keyword.operator.regexp.php#C678DD
keyword.operator.comparison.php#56B6C2
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#C678DD
meta.function.decorator.python#83b2ff
support.token.decorator.python,meta.function.decorator.identifier.python#56B6C2
function.parameter#ABB2BF
function.brace#ABB2BF
function.parameter.ruby, function.parameter.cs#ABB2BF
constant.language.symbol.ruby#56B6C2
rgb-value#56B6C2
inline-color-decoration rgb-value#D19A66
less rgb-value#D19A66
selector.sass#83b2ff
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#E5C07B
block.scope.end,block.scope.begin#ABB2BF
storage.type.cs#E5C07B
entity.name.variable.local.cs#83b2ff
token.info-token#83b2ff
token.warn-token#D19A66
token.error-token#F44747
token.debug-token#C678DD
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#C678DD
meta.template.expression#ABB2BF
keyword.operator.module#C678DD
support.type.type.flowtype#83b2ff
support.type.primitive#E5C07B
meta.property.object#83b2ff
variable.parameter.function.js#83b2ff
keyword.other.template.begin#98C379
keyword.other.template.end#98C379
keyword.other.substitution.begin#98C379
keyword.other.substitution.end#98C379
keyword.operator.assignment#56B6C2
keyword.operator.assignment.go#E5C07B
keyword.operator.arithmetic.go, keyword.operator.address.go#C678DD
entity.name.package.go#E5C07B
support.type.prelude.elm#56B6C2
support.constant.elm#D19A66
punctuation.quasi.element#C678DD
constant.character.entity#83b2ff
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#56B6C2
entity.global.clojure#E5C07B
meta.symbol.clojure#83b2ff
constant.keyword.clojure#56B6C2
meta.arguments.coffee, variable.parameter.function.coffee#83b2ff
source.ini#98C379
meta.scope.prerequisites.makefile#83b2ff
source.makefile#E5C07B
storage.modifier.import.groovy#E5C07B
meta.method.groovy#83b2ff
meta.definition.variable.name.groovy#83b2ff
meta.definition.class.inherited.classes.groovy#98C379
support.variable.semantic.hlsl#E5C07B
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#C678DD
text.variable, text.bracketed#83b2ff
support.type.swift, support.type.vb.asp#E5C07B
entity.name.function.xi#E5C07B
entity.name.class.xi#56B6C2
constant.character.character-class.regexp.xi#83b2ff
constant.regexp.xi#C678DD
keyword.control.xi#56B6C2
invalid.xi#ABB2BF
beginning.punctuation.definition.quote.markdown.xi#98C379
beginning.punctuation.definition.list.markdown.xi#7F848E
constant.character.xi#83b2ff
accent.xi#83b2ff
wikiword.xi#D19A66
constant.other.color.rgb-value.xi#FFFFFF
punctuation.definition.tag.xi#5C6370
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition#E5C07B
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#83b2ff
meta.brace.square#ABB2BF
comment, punctuation.definition.comment#7F848Eitalic
markup.quote.markdown#5C6370
punctuation.definition.block.sequence.item.yaml#ABB2BF
constant.language.symbol.elixir, constant.language.symbol.double-quoted.elixir#56B6C2
entity.name.variable.parameter.cs#E5C07B
entity.name.variable.field.cs#83b2ff
markup.deleted#83b2ff
markup.inserted#98C379
markup.underlineunderline
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#BE5046
support.other.namespace.php#ABB2BF
variable.other.object#E5C07B
variable.other.constant.property#83b2ff
entity.other.inherited-class#E5C07B
markup.headingbold
markup.boldbold
entity.name.sectionbold
keyword.other.importantbold
markup.bold.markdownbold
entity.other.attribute-name.js,entity.other.attribute-name.ts,entity.other.attribute-name.jsx,entity.other.attribute-name.tsx,variable.parameter,variable.language.superitalic
comment.line.double-slash,comment.block.documentationitalic
keyword.control.import.python,keyword.control.flow.pythonitalic
markup.italic.markdownitalic
comment#69888F
punctuation.definition.comment#69888F
string#74C589
meta.embedded.assembly#74C589
keyword - keyword.operator#F3A862
keyword.control#F3A862
storage#F3A862
storage.type#F3A862
constant.numeric#F3A862
entity.name.function#83B3FF
support.function#83B3FF
variable#D980FA
entity.name.variable#D980FA
keyword.operator.logical.python#F3A862bold
variable.parameter.function.language.python#F3A862bold
support.type.python#0ABDE3
meta.function-call.generic.python#83B3FF
constant#F3A862