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#e4e0cc
  • activityBar.foreground#151516
  • activityBarBadge.background#ffffff
  • activityBarBadge.foreground#181919
  • badge.background#e4e0cc
  • button.background#6f6e67
  • debugToolBar.background#ded9c4
  • diffEditor.insertedTextBackground#c0ffff33
  • dropdown.background#ded9c4
  • dropdown.border#1a1d22
  • editor.background#e4e0cc
  • editor.findMatchBackground#fcffff
  • editor.findMatchBorder#3764cc
  • editor.findMatchHighlightBackground#ffffff2f
  • editor.foreground#111113
  • editor.lineHighlightBackground#e8e4d3
  • editor.selectionBackground#ffffff60
  • editor.selectionHighlightBackground#ffffff10
  • editor.selectionHighlightBorder#ddd
  • editor.wordHighlightBackground#ffffff2f
  • editor.wordHighlightBorder#656971
  • editor.wordHighlightStrongBackground#ffffff26
  • editor.wordHighlightStrongBorder#656971
  • editorActiveLineNumber.foreground#0b0c0d
  • editorBracketMatch.background#fffffd
  • editorBracketMatch.border#404855
  • editorCursor.background#ffffffc9
  • editorCursor.foreground#080d19
  • editorError.foreground#130605
  • editorGroup.background#d6cfb9
  • editorGroup.border#131418
  • editorGroupHeader.tabsBackground#ded9c4
  • editorHoverWidget.background#ded9c4
  • editorHoverWidget.border#131418
  • editorIndentGuide.activeBackground#ffffff59
  • editorIndentGuide.background#f5f2de
  • editorLineNumber.foreground#070809
  • editorMarkerNavigation.background#ded9c4
  • editorRuler.foreground#11111326
  • editorSuggestWidget.background#ded9c4
  • editorSuggestWidget.border#131418
  • editorSuggestWidget.selectedBackground#e8e4d1
  • editorWarning.foreground#140f0a
  • editorWhitespace.foreground#5e6673
  • editorWidget.background#ded9c4
  • focusBorder#383838
  • input.background#dad4bd
  • list.activeSelectionBackground#e8e4d1
  • list.activeSelectionForeground#151516
  • list.focusBackground#f3f0e0
  • list.highlightForeground#131313
  • list.hoverBackground#e5e1cd
  • list.inactiveSelectionBackground#e8e4d1
  • list.inactiveSelectionForeground#151516
  • list.warningForeground#140f0a
  • menu.foreground#141414
  • peekViewEditor.background#d8d2bd
  • peekViewEditor.matchHighlightBackground#e5d8e1
  • peekViewResult.background#dfdac4
  • scrollbarSlider.activeBackground#ffffff80
  • scrollbarSlider.background#fffff960
  • scrollbarSlider.hoverBackground#ffffff80
  • sideBar.background#ded9c4
  • sideBarSectionHeader.background#e4e0cc
  • statusBar.background#ded9c4
  • statusBar.debuggingBackground#ffb8ff
  • statusBar.debuggingBorder#510061
  • statusBar.debuggingForeground#191919
  • statusBar.foreground#0f1012
  • statusBar.noFolderBackground#ded9c4
  • statusBarItem.hoverBackground#e8e4d1
  • statusBarItem.remoteBackground#ffffff
  • statusBarItem.remoteForeground#181919
  • tab.activeBackground#e4e0cc
  • tab.activeForeground#161616
  • tab.border#131418
  • tab.hoverBackground#edead8
  • tab.inactiveBackground#ded9c4
  • tab.unfocusedHoverBackground#edead8
  • terminal.ansiBlack#24272d
  • terminal.ansiBlue#4d8cbf
  • terminal.ansiBrightBlack#656971
  • terminal.ansiBrightBlue#416fcc
  • terminal.ansiBrightCyan#44919b
  • terminal.ansiBrightGreen#799c60
  • terminal.ansiBrightMagenta#640078
  • terminal.ansiBrightRed#c33838
  • terminal.ansiBrightWhite#acaeb3
  • terminal.ansiBrightYellow#b79962
  • terminal.ansiCyan#44919b
  • terminal.ansiGreen#799c60
  • terminal.ansiMagenta#9e60b0
  • terminal.ansiRed#b3565d
  • terminal.ansiWhite#acaeb3
  • terminal.ansiYellow#b79962
  • terminal.foreground#141414
  • textLink.foreground#091117
  • titleBar.activeBackground#e4e0cc
  • titleBar.activeForeground#0f1012
  • titleBar.inactiveBackground#ded9c4
  • titleBar.inactiveForeground#0a0b0c

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#00000e
variable.other.generic-type.haskell#9e60b0
storage.type.haskell#a77b51
support.variable.magic.python#00000e
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python,#888e98
variable.parameter.function.language.special.self.python#030d14
storage.modifier.lifetime.rust#888e98
support.function.std.rust#4d8cbf
entity.name.lifetime.rust#030d14
variable.language.rust#00000e
support.constant.edge#9e60b0
constant.other.character-class.regexp#00000e
keyword.operator.quantifier.regexp#a77b51
punctuation.definition.string.begin,punctuation.definition.string.end#799c60
variable.parameter.function#888e98
comment, punctuation.definition.comment#656971
comment markup.link#494f59
markup.changed.diff#030d14
meta.diff.header.from-file,punctuation.definition.from-file.diff#4d8cbf
markup.inserted.diff#799c60
markup.deleted.diff#00000e
meta.function.c,meta.function.cpp#00000e
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#888e98
punctuation.separator.key-value#888e98
entity.other.attribute-name.js,entity.other.attribute-name.ts,entity.other.attribute-name.jsx,entity.other.attribute-name.tsx,variable.parameter,variable.language.super
keyword.operator.expression.import#4d8cbf
support.constant.math#030d14
support.constant.property.math#a77b51
variable.other.constant#030d14
storage.type.annotation.java, storage.type.object.array.java#030d14
source.java#00000e
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#888e98
meta.method.java#4d8cbf
storage.modifier.import.java,storage.type.java,storage.type.generic.java#030d14
keyword.operator.instanceof.java#9e60b0
meta.definition.variable.name.java#00000e
keyword.operator.logical#44919b
keyword.operator.bitwise#44919b
keyword.operator.channel#44919b
support.constant.property-value.scss,support.constant.property-value.css#a77b51
keyword.operator.css,keyword.operator.scss,keyword.operator.less#44919b
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#a77b51
punctuation.separator.list.comma.css#888e98
support.constant.color.w3c-standard-color-name.css#a77b51
support.type.vendored.property-name.css#44919b
punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end#00000e
support.module.node,support.type.object.module,support.module.node#030d14
entity.name.type.module#030d14
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node#00000e
comment.line.double-slash,comment.block.documentation
support.constant.json#a77b51
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof#9e60b0
support.type.object.console#00000e
support.variable.property.process#a77b51
entity.name.function,support.function.console#4d8cbf
keyword.operator#44919b
keyword.operator.delete#9e60b0
support.type.object.dom#44919b
support.variable.dom,support.variable.property.dom#00000e
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational#44919b
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#9e60b0
punctuation.separator.delimiter#888e98
punctuation.separator.c,punctuation.separator.cpp#9e60b0
support.type.posix-reserved.c,support.type.posix-reserved.cpp#44919b
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp#9e60b0
variable.parameter.function.language.python#a77b51
support.type.python#44919b
keyword.operator.logical.python#9e60b0
variable.parameter.function.python#a77b51
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python#888e98
meta.function-call.generic.python#4d8cbf
constant.character.format.placeholder.other.python#a77b51
none#888e98
keyword.operator#888e98
keyword.operator.assignment.compound#9e60b0
keyword#9e60b0
variable#00000e
variable.language#030d14
token.variable.parameter.java#888e98
import.storage.java#030d14
token.package.keyword#9e60b0
token.package#888e98
entity.name.function, meta.require, support.function.any-method, variable.function#4d8cbf
entity.name.type.namespace#030d14
support.class, entity.name.type.class#030d14
entity.name.class.identifier.namespace.type#030d14
entity.name.class, variable.other.class.js, variable.other.class.ts#030d14
variable.other.class.php#00000e
entity.name.type#030d14
keyword.control#9e60b0
keyword.control.import.python,keyword.control.flow.python
control.elements, keyword.operator.less#a77b51
keyword.other.special-method#4d8cbf
storage#9e60b0
token.storage#9e60b0
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#9e60b0
token.storage.type.java#030d14
support.function#44919b
support.type.property-name#888e98
support.constant.property-value#888e98
support.constant.font-name#a77b51
meta.tag#888e98
string#799c60
entity.other.inherited-class#030d14
constant.other.symbol#44919b
constant.numeric#a77b51
none#a77b51
none#a77b51
constant#a77b51
punctuation.definition.constant#a77b51
entity.name.tag#00000e
entity.other.attribute-name#a77b51
entity.other.attribute-name.id#4d8cbfnormal
entity.other.attribute-name.class.css#a77b51normal
meta.selector#9e60b0
none#a77b51
markup.heading#00000ebold
markup.heading punctuation.definition.heading, entity.name.section#4d8cbf
keyword.other.unit#00000e
markup.bold,todo.bold#140f0abold
punctuation.definition.bold#030d14
markup., punctuation.definition.,todo.emphasis#9e60b0
emphasis md#9e60b0
entity.name.section.markdown#00000e
punctuation.definition.heading.markdown#00000e
punctuation.definition.list.begin.markdown#00000e
markup.heading.setext#888e98
punctuation.definition.bold.markdown#a77b51
markup.inline.raw.markdown#799c60
markup.inline.raw.string.markdown#799c60
punctuation.definition.list.markdown#00000e
markup.quote.markdown#494f59
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#00000e
beginning.punctuation.definition.list.markdown#00000e
punctuation.definition.metadata.markdown#00000e
markup.underline.link.markdown,markup.underline.link.image.markdown#9e60b0
string.other.link.title.markdown,string.other.link.description.markdown#4d8cbf
markup..markdown
markup.bold.markdownbold
string.regexp#44919b
constant.character.escape#44919b
punctuation.section.embedded, variable.interpolation#00000e
invalid.illegal#cccccc
invalid.illegal.bad-ampersand.html#888e98
invalid.broken#cccccc
invalid.deprecated#cccccc
invalid.unimplemented#cccccc
source.json meta.structure.dictionary.json > string.quoted.json#00000e
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#00000e
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#799c60
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#44919b
support.type.property-name.json#00000e
support.type.property-name.json punctuation#00000e
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade#9e60b0
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade#9e60b0
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php#030d14
keyword.operator.error-control.php#9e60b0
keyword.operator.type.php#9e60b0
punctuation.section.array.begin.php#888e98
punctuation.section.array.end.php#888e98
invalid.illegal.non-null-typehinted.php#c33838
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php#030d14
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php#4d8cbf
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#888e98
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php#a77b51
entity.name.goto-label.php,support.other.php#4d8cbf
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php#44919b
keyword.operator.regexp.php#9e60b0
keyword.operator.comparison.php#44919b
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#9e60b0
meta.function.decorator.python#4d8cbf
support.token.decorator.python,meta.function.decorator.identifier.python#44919b
function.parameter#a77b51
function.parameter#888e98
function.brace#888e98
function.parameter.ruby, function.parameter.cs#888e98
constant.language.symbol.ruby#44919b
rgb-value#44919b
inline-color-decoration rgb-value#a77b51
less rgb-value#a77b51
selector.sass#00000e
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#030d14
block.scope.end,block.scope.begin#888e98
storage.type.cs#030d14
entity.name.variable.local.cs#00000e
token.info-token#4d8cbf
token.warn-token#a77b51
token.error-token#c33838
token.debug-token#9e60b0
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#9e60b0
meta.template.expression#888e98
keyword.operator.module#9e60b0
support.type.type.flowtype#4d8cbf
support.type.primitive#030d14
meta.property.object#00000e
variable.parameter.function.js#00000e
keyword.other.template.begin#799c60
keyword.other.template.end#799c60
keyword.other.substitution.begin#799c60
keyword.other.substitution.end#799c60
keyword.operator.assignment#44919b
keyword.operator.assignment.go, keyword.operator.address.go#030d14
entity.name.package.go#030d14
support.type.prelude.elm#44919b
support.constant.elm#a77b51
punctuation.quasi.element#9e60b0
constant.character.entity#00000e
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#44919b
entity.global.clojure#030d14
meta.symbol.clojure#00000e
constant.keyword.clojure#44919b
meta.arguments.coffee, variable.parameter.function.coffee#00000e
source.ini#799c60
meta.scope.prerequisites.makefile#00000e
source.makefile#030d14
storage.modifier.import.groovy#030d14
meta.method.groovy#4d8cbf
meta.definition.variable.name.groovy#00000e
meta.definition.class.inherited.classes.groovy#799c60
support.variable.semantic.hlsl#030d14
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#9e60b0
text.variable, text.bracketed#00000e
support.type.swift, support.type.vb.asp#030d14
entity.name.function.xi#030d14
entity.name.class.xi#44919b
constant.character.character-class.regexp.xi#00000e
constant.regexp.xi#9e60b0
keyword.control.xi#44919b
invalid.xi#888e98
beginning.punctuation.definition.quote.markdown.xi#799c60
beginning.punctuation.definition.list.markdown.xi#656971
constant.character.xi#4d8cbf
accent.xi#4d8cbf
wikiword.xi#a77b51
constant.other.color.rgb-value.xi#cccccc
punctuation.definition.tag.xi#494f59
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition#030d14
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#00000e
meta.brace.square#888e98
best-themes by smdfuck - VS Code Theme