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#DEDAD4
  • activityBar.foreground#635f59
  • activityBarBadge.background#4D78CC
  • activityBarBadge.foreground#EEEEED
  • badge.background#D7D3CB
  • button.background#BFB8AB
  • debugToolBar.background#DEDAD4
  • diffEditor.insertedTextBackground#FF7F6433
  • dropdown.background#DEDAD4
  • dropdown.border#DEDAD4
  • editor.background#EEEEED
  • editor.findMatchBackground#7c93bf
  • editor.findMatchBorder#457DFF
  • editor.findMatchHighlightBackground#7c93bf
  • editor.foreground#544D40
  • editor.lineHighlightBackground#B8B8B844
  • editor.lineHighlightBorder#B8B8B876
  • editor.selectionBackground#C4C4C4ee
  • editor.selectionHighlightBackground#00000010
  • editor.selectionHighlightBorder#B8B8B844
  • editor.wordHighlightBackground#C4C4C4
  • editor.wordHighlightBorder#807B71
  • editor.wordHighlightStrongBackground#544D4026
  • editor.wordHighlightStrongBorder#807B71
  • editorActiveLineNumber.foreground#8C867B
  • editorBracketMatch.background#AEA594
  • editorBracketMatch.border#AEA594
  • editorCursor.background#000000c9
  • editorCursor.foreground#AD7400
  • editorError.foreground#3DBFC7
  • editorGroup.background#E7E5E0
  • editorGroup.border#E7E5E0
  • editorGroupHeader.noTabsBackground#EEEEED
  • editorGroupHeader.tabsBackground#EEEEED
  • editorHoverWidget.background#DEDAD4
  • editorHoverWidget.border#E7E5E0
  • editorIndentGuide.activeBackground#37373759
  • editorIndentGuide.background#C4BFB7
  • editorLineNumber.foreground#B6AE9D
  • editorMarkerNavigation.background#DEDAD4
  • editorRuler.foreground#ABB2BF26
  • editorSuggestWidget.background#DEDAD4
  • editorSuggestWidget.border#E7E5E0
  • editorSuggestWidget.selectedBackground#D3CEC5
  • editorWarning.foreground#3DBFC7
  • editorWhitespace.foreground#C4BFB7
  • editorWidget.background#DEDAD4
  • focusBorder#B9B9B9
  • gitDecoration.addedResourceForeground#1f7009
  • gitDecoration.conflictingResourceForeground#0079ca
  • gitDecoration.deletedResourceForeground#d91e1e
  • gitDecoration.modifiedResourceForeground#cf9732
  • gitDecoration.untrackedResourceForeground#218e96
  • input.background#E2E0DC
  • list.activeSelectionBackground#D3CEC5
  • list.activeSelectionForeground#28251F
  • list.errorForeground#ff0000
  • list.focusBackground#C7C1B5
  • list.highlightForeground#3A3A3A
  • list.hoverBackground#D6D2CA
  • list.inactiveSelectionBackground#D3CEC5
  • list.inactiveSelectionForeground#2C313A
  • list.warningForeground#c24038
  • menu.foreground#373737
  • peekViewEditor.background#E4E2DC
  • peekViewEditor.matchHighlightBackground#B8B8B844
  • peekViewResult.background#DDD9D4
  • scrollbarSlider.activeBackground#8B826E80
  • scrollbarSlider.background#B1A99960
  • scrollbarSlider.hoverBackground#A59C8A80
  • sideBar.background#f2f2f2
  • sideBarSectionHeader.background#D7D3CB
  • statusBar.background#EEEEED
  • statusBar.debuggingBackground#7e0097
  • statusBar.debuggingBorder#66017a
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#625A4B
  • statusBar.noFolderBackground#DEDAD4
  • statusBarItem.hoverBackground#D3CEC5
  • statusBarItem.remoteBackground#4d78cc
  • statusBarItem.remoteForeground#070502
  • tab.activeBackground#ffc4c4
  • tab.activeBorderTop#ff0000
  • tab.activeForeground#232323
  • tab.border#E7E5E0
  • tab.hoverBackground#CDC7BD
  • tab.inactiveBackground#EEEEED
  • tab.unfocusedHoverBackground#CDC7BD
  • terminal.ansiBlack#2d3139
  • terminal.ansiBlue#3779ab
  • terminal.ansiBrightBlack#7f848e
  • terminal.ansiBrightBlue#528bff
  • terminal.ansiBrightCyan#218e96
  • terminal.ansiBrightGreen#98c379
  • terminal.ansiBrightMagenta#7e0097
  • terminal.ansiBrightRed#ff1038
  • terminal.ansiBrightWhite#d7dae0
  • terminal.ansiBrightYellow#db6804
  • terminal.ansiCyan#56b6c2
  • terminal.ansiGreen#98c379
  • terminal.ansiMagenta#c678dd
  • terminal.ansiRed#d91e1e
  • terminal.ansiWhite#d7dae0
  • terminal.ansiYellow#cf9732
  • terminal.foreground#707070
  • textLink.foreground#61afef
  • titleBar.activeBackground#D7D3CB
  • titleBar.activeForeground#625A4B
  • titleBar.inactiveBackground#21252B
  • titleBar.inactiveForeground#948E82

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.definition.variable#ff1038
variable.other.generic-type.haskell#d55fde
storage.type.haskell#b35000
support.variable.magic.python#d91e1e
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python,#24262b
variable.parameter.function.language.special.self.python#b57541
storage.modifier.lifetime.rust#24262b
support.function.std.rust#3779ab
entity.name.lifetime.rust#b57541
variable.language.rust#d91e1e
support.constant.edge#d55fde
constant.other.character-class.regexp#d91e1e
keyword.operator.quantifier.regexp#b35000
punctuation.definition.string.begin,punctuation.definition.string.end#44962d
variable.parameter.function#24262b
comment, punctuation.definition.comment#4f545eitalic
comment markup.link#4f545e
markup.changed.diff#b57541
meta.diff.header.from-file,punctuation.definition.from-file.diff#3779ab
markup.inserted.diff#44962d
markup.deleted.diff#d91e1e
meta.function.c,meta.function.cpp#d91e1e
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#24262b
punctuation.separator.key-value#24262b
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
keyword.operator.expression.import#3779ab
support.constant.math#b57541
support.constant.property.math#b35000
variable.other.constant#b57541
storage.type.annotation.java, storage.type.object.array.java#b57541
source.java#d91e1e
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#24262b
meta.method.java#3779ab
storage.modifier.import.java,storage.type.java,storage.type.generic.java#b57541
keyword.operator.instanceof.java#d55fde
meta.definition.variable.name.java#d91e1e
keyword.operator.logical.js#218e96
keyword.operator.bitwise#218e96
keyword.operator.channel#218e96
support.constant.property-value.scss,support.constant.property-value.css#b35000
keyword.operator.css,keyword.operator.scss,keyword.operator.less#218e96
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#b35000
punctuation.separator.list.comma.css#24262b
support.constant.color.w3c-standard-color-name.css#b35000
support.type.vendored.property-name.css#218e96
punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end#d91e1e
support.module.node,support.type.object.module,support.module.node#b57541
entity.name.type.module#b57541
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node#d91e1e
comment.line.double-slash,comment.block.documentation#4f545eitalic
support.constant.json#b35000
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof#d55fde
support.type.object.console#d91e1e
support.variable.property.process#b35000
entity.name.function,support.function.console#3779ab
keyword.operator#218e96
keyword.operator.delete#d55fde
support.type.object.dom#218e96
support.variable.dom,support.variable.property.dom#d91e1e
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment#218e96
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#d55fde
punctuation.separator.delimiter#24262b
punctuation.separator.c,punctuation.separator.cpp#d55fde
support.type.posix-reserved.c,support.type.posix-reserved.cpp#218e96
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp#d55fde
variable.parameter.function.language.python#b35000
support.type.python#218e96
keyword.operator.logical.python#d55fde
variable.parameter.function.python#b35000
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python#24262b
meta.function-call.generic.python#3779ab
constant.character.format.placeholder.other.python#b35000
none#24262b
keyword.operator#24262b
keyword.operator.assignment.compound#d55fde
keyword#0079ca
variable#d91e1e
variable.language#b57541
token.variable.parameter.java#24262b
import.storage.java#b57541
token.package.keyword#d55fde
token.package#24262b
entity.name.function, meta.require, support.function.any-method, variable.function#3779ab
entity.name.type.namespace#a87b28
support.class, entity.name.type.class#a87b28italic
constant.language.php#d55fdebold
support.class.php#a87b28
entity.name.class.identifier.namespace.type#b57541
entity.name.class, variable.other.class.js, variable.other.class.ts#b57541
variable.other.class.php#d91e1e
entity.name.type#b57541
keyword.control#0079ca
keyword#0079ca
storage#0079ca
keyword.control.import.python,keyword.control.flow.pythonitalic
control.elements, keyword.operator.less#b35000
keyword.other.special-method#3779ab
storage#0079ca
token.storage#d55fde
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#d55fde
token.storage.type.java#b57541
support.function#218e96
support.type.property-name#cc0271
support.constant.property-value#24262b
support.constant.font-name#b35000
meta.tag#24262b
string,punctuation.definition.string.begin,punctuation.definition.string.end#2d9e0e
entity.other.inherited-class#44962d
constant.other.symbol#218e96
constant.numeric#b35000italic
none#b35000
none#b35000
constant#0079caitalic bold
punctuation.definition.constant#0079ca
entity.name.tag#5995ef
entity.other.attribute-name#015692
entity.other.attribute-name.id#3779abnormal
entity.other.attribute-name.class.css#b35000normal
meta.selector#d55fde
none#b35000
markup.heading#d91e1ebold
markup.heading punctuation.definition.heading, entity.name.section#3779ab
keyword.other.unit#d91e1e
markup.bold,todo.bold#b35000bold
punctuation.definition.bold#b57541
markup.italic, punctuation.definition.italic,todo.emphasis#d55fde
emphasis md#d55fde
entity.name.section.markdown#d91e1e
punctuation.definition.heading.markdown#d91e1e
punctuation.definition.list.begin.markdown#d91e1e
markup.heading.setext#24262b
punctuation.definition.bold.markdown#b35000
markup.inline.raw.markdown#44962d
markup.inline.raw.string.markdown#44962d
punctuation.definition.list.markdown#d91e1e
markup.quote.markdown#4f545eitalic
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#d91e1e
beginning.punctuation.definition.list.markdown#d91e1e
punctuation.definition.metadata.markdown#d91e1e
markup.underline.link.markdown,markup.underline.link.image.markdown#d55fde
string.other.link.title.markdown,string.other.link.description.markdown#3779ab
markup.italic.markdownitalic
markup.bold.markdownbold
string.regexp#218e96
constant.character.escape#ff1038
punctuation.section.embedded, variable.interpolation#d91e1e
invalid.illegal#ffffff
invalid.broken#ffffff
invalid.deprecated#ffffff
invalid.unimplemented#ffffff
source.json meta.structure.dictionary.json > string.quoted.json#d91e1e
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#d91e1e
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#44962d
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#218e96
support.type.property-name.json#d91e1e
support.type.property-name.json punctuation#d91e1e
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade#d55fde
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade#d55fde
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php#a87b28
keyword.operator.error-control.php#d55fde
keyword.operator.type.php#d55fde
punctuation.section.array.begin.php#24262b
punctuation.section.array.end.php#24262b
invalid.illegal.non-null-typehinted.php#471414
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php#b57541italic
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php#2d9e0e
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#24262b
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php#b35000
entity.name.goto-label.php,support.other.php#3779ab
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php#218e96
keyword.operator.regexp.php#d55fde
keyword.operator.comparison.php#218e96
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#d55fde
meta.function.decorator.python#3779ab
support.token.decorator.python,meta.function.decorator.identifier.python#218e96
function.parameter#b35000
function.parameter#24262b
function.brace#24262b
function.parameter.ruby, function.parameter.cs#24262b
constant.language.symbol.ruby#218e96
rgb-value#218e96
inline-color-decoration rgb-value#b35000
less rgb-value#b35000
selector.sass#d91e1e
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#b57541
block.scope.end,block.scope.begin#24262b
storage.type.cs#b57541
entity.name.variable.local.cs#d91e1e
token.info-token#3779ab
token.warn-token#b35000
token.error-token#471414
token.debug-token#d55fde
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#d55fde
meta.template.expression#24262b
keyword.operator.module#d55fde
support.type.type.flowtype#3779ab
support.type.primitive#b57541
meta.property.object#d91e1e
variable.parameter.function.js#d91e1e
keyword.other.template.begin#44962d
keyword.other.template.end#44962d
keyword.other.substitution.begin#44962d
keyword.other.substitution.end#44962d
keyword.operator.assignment#218e96
keyword.operator.assignment.go, keyword.operator.address.go#b57541
entity.name.package.go#b57541
support.type.prelude.elm#218e96
support.constant.elm#b35000
punctuation.quasi.element#d55fde
constant.character.entity#d91e1e
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#218e96
entity.global.clojure#b57541
meta.symbol.clojure#d91e1e
constant.keyword.clojure#218e96
meta.arguments.coffee, variable.parameter.function.coffee#d91e1e
source.ini#44962d
meta.scope.prerequisites.makefile#d91e1e
source.makefile#b57541
storage.modifier.import.groovy#b57541
meta.method.groovy#3779ab
meta.definition.variable.name.groovy#d91e1e
meta.definition.class.inherited.classes.groovy#44962d
support.variable.semantic.hlsl#b57541
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#d55fde
text.variable, text.bracketed#d91e1e
support.type.swift, support.type.vb.asp#b57541
entity.name.function.xi#b57541
entity.name.class.xi#218e96
constant.character.character-class.regexp.xi#d91e1e
constant.regexp.xi#d55fde
keyword.control.xi#218e96
invalid.xi#24262b
beginning.punctuation.definition.quote.markdown.xi#44962d
beginning.punctuation.definition.list.markdown.xi#7f848e
constant.character.xi#3779ab
accent.xi#3779ab
wikiword.xi#b35000
constant.other.color.rgb-value.xi#ffffff
punctuation.definition.tag.xi#4f545e
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition#b57541
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#d91e1e

Shiki preview

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

Loading...

RedPro Theme - Coding Theme