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#111112
  • activityBar.foreground#d7dae0
  • activityBarBadge.background#4d78cc
  • activityBarBadge.foreground#f8fafd
  • badge.background#282c34
  • button.background#404754
  • debugToolBar.background#21252b
  • diffEditor.insertedTextBackground#00809b33
  • dropdown.background#21252b
  • dropdown.border#21252b
  • editor.background#111112
  • editor.findMatchBackground#3b3b3b
  • editor.findMatchBorder#457dff
  • editor.findMatchHighlightBackground#314365
  • editor.foreground#abb2bf
  • editor.lineHighlightBackground#47474744
  • editor.lineHighlightBorder#000000
  • editor.selectionBackground#3b3b3bee
  • editor.selectionHighlightBackground#ffffff10
  • editor.selectionHighlightBorder#47474744
  • editor.wordHighlightBackground#3b3b3b
  • editor.wordHighlightBorder#7f848e
  • editor.wordHighlightStrongBackground#abb2bf26
  • editor.wordHighlightStrongBorder#7f848e
  • editorActiveLineNumber.foreground#737984
  • editorBracketMatch.background#515a6b
  • editorBracketMatch.border#515a6b
  • editorCursor.background#ffffffc9
  • editorCursor.foreground#528bff
  • editorError.foreground#c24038
  • editorGroup.background#181a1f
  • editorGroup.border#181a1f
  • editorGroupHeader.noTabsBackground#111112
  • editorGroupHeader.tabsBackground#111112
  • editorHoverWidget.background#21252b
  • editorHoverWidget.border#181a1f
  • editorIndentGuide.activeBackground#c8c8c859
  • editorIndentGuide.background#3b4048
  • editorLineNumber.foreground#495162
  • editorMarkerNavigation.background#21252b
  • editorRuler.foreground#abb2bf26
  • editorSuggestWidget.background#21252b
  • editorSuggestWidget.border#181a1f
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWarning.foreground#c24038
  • editorWhitespace.foreground#3b4048
  • editorWidget.background#21252b
  • focusBorder#464646
  • gitDecoration.addedResourceForeground#39ca11
  • gitDecoration.conflictingResourceForeground#0079ca
  • gitDecoration.deletedResourceForeground#ff2424
  • gitDecoration.modifiedResourceForeground#e6a938
  • gitDecoration.untrackedResourceForeground#2bbac5
  • input.background#1d1f23
  • list.activeSelectionBackground#2c313a
  • list.activeSelectionForeground#d7dae0
  • list.errorForeground#ff0000
  • list.focusBackground#383e4a
  • list.highlightForeground#c5c5c5
  • list.hoverBackground#292d35
  • list.inactiveSelectionBackground#2c313a
  • list.inactiveSelectionForeground#d7dae0
  • list.warningForeground#c24038
  • menu.foreground#c8c8c8
  • peekViewEditor.background#1b1d23
  • peekViewEditor.matchHighlightBackground#29244b
  • peekViewResult.background#22262b
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566660
  • scrollbarSlider.hoverBackground#5a637580
  • sideBar.background#000000
  • sideBarSectionHeader.background#282c34
  • statusBar.background#111112
  • statusBar.debuggingBackground#7e0097
  • statusBar.debuggingBorder#66017a
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#21252b
  • statusBarItem.hoverBackground#2c313a
  • statusBarItem.remoteBackground#4d78cc
  • statusBarItem.remoteForeground#f8fafd
  • tab.activeBackground#311414
  • tab.activeBorderTop#ff0000
  • tab.activeForeground#dcdcdc
  • tab.border#181a1f
  • tab.hoverBackground#323842
  • tab.inactiveBackground#111112
  • tab.unfocusedHoverBackground#323842
  • terminal.ansiBlack#2d3139
  • terminal.ansiBlue#61afef
  • terminal.ansiBrightBlack#7f848e
  • terminal.ansiBrightBlue#528bff
  • terminal.ansiBrightCyan#56b6c2
  • terminal.ansiBrightGreen#98c379
  • terminal.ansiBrightMagenta#7e0097
  • terminal.ansiBrightRed#f44747
  • terminal.ansiBrightWhite#d7dae0
  • terminal.ansiBrightYellow#e5c07b
  • terminal.ansiCyan#56b6c2
  • terminal.ansiGreen#98c379
  • terminal.ansiMagenta#c678dd
  • terminal.ansiRed#e06c75
  • terminal.ansiWhite#d7dae0
  • terminal.ansiYellow#e5c07b
  • terminal.foreground#c8c8c8
  • textLink.foreground#61afef
  • titleBar.activeBackground#282c34
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#21252b
  • titleBar.inactiveForeground#6b717d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.definition.variable#ff1038
variable.other.generic-type.haskell#d55fde
storage.type.haskell#db6804
support.variable.magic.python#ff2424
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python,#abb2bf
variable.parameter.function.language.special.self.python#ff7300
storage.modifier.lifetime.rust#abb2bf
support.function.std.rust#52adf2
entity.name.lifetime.rust#ff7300
variable.language.rust#ff2424
support.constant.edge#d55fde
constant.other.character-class.regexp#ff2424
keyword.operator.quantifier.regexp#db6804
punctuation.definition.string.begin,punctuation.definition.string.end#5bc93d
variable.parameter.function#abb2bf
comment, punctuation.definition.comment#5c6370italic
comment markup.link#5c6370
markup.changed.diff#ff7300
meta.diff.header.from-file,punctuation.definition.from-file.diff#52adf2
markup.inserted.diff#5bc93d
markup.deleted.diff#ff2424
meta.function.c,meta.function.cpp#ff2424
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
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#52adf2
support.constant.math#ff7300
support.constant.property.math#db6804
variable.other.constant#ff7300
storage.type.annotation.java, storage.type.object.array.java#ff7300
source.java#ff2424
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#52adf2
storage.modifier.import.java,storage.type.java,storage.type.generic.java#ff7300
keyword.operator.instanceof.java#d55fde
meta.definition.variable.name.java#ff2424
keyword.operator.logical.js#2bbac5
keyword.operator.bitwise#2bbac5
keyword.operator.channel#2bbac5
support.constant.property-value.scss,support.constant.property-value.css#db6804
keyword.operator.css,keyword.operator.scss,keyword.operator.less#2bbac5
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#db6804
punctuation.separator.list.comma.css#abb2bf
support.constant.color.w3c-standard-color-name.css#db6804
support.type.vendored.property-name.css#2bbac5
punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end#ff2424
support.module.node,support.type.object.module,support.module.node#ff7300
entity.name.type.module#ff7300
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node#ff2424
comment.line.double-slash,comment.block.documentation#5c6370italic
support.constant.json#db6804
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof#d55fde
support.type.object.console#ff2424
support.variable.property.process#db6804
entity.name.function,support.function.console#52adf2
keyword.operator#2bbac5
keyword.operator.delete#d55fde
support.type.object.dom#2bbac5
support.variable.dom,support.variable.property.dom#ff2424
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment#2bbac5
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#abb2bf
punctuation.separator.c,punctuation.separator.cpp#d55fde
support.type.posix-reserved.c,support.type.posix-reserved.cpp#2bbac5
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp#d55fde
variable.parameter.function.language.python#db6804
support.type.python#2bbac5
keyword.operator.logical.python#d55fde
variable.parameter.function.python#db6804
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#52adf2
constant.character.format.placeholder.other.python#db6804
none#abb2bf
keyword.operator#abb2bf
keyword.operator.assignment.compound#d55fde
keyword#0079ca
variable#ff2424
variable.language#ff7300
token.variable.parameter.java#abb2bf
import.storage.java#ff7300
token.package.keyword#d55fde
token.package#abb2bf
entity.name.function, meta.require, support.function.any-method, variable.function#52adf2
entity.name.type.namespace#e6a938
support.class, entity.name.type.class#e6a938italic
constant.language.php#d55fdebold
support.class.php#e6a938
entity.name.class.identifier.namespace.type#ff7300
entity.name.class, variable.other.class.js, variable.other.class.ts#ff7300
variable.other.class.php#ff2424
entity.name.type#ff7300
keyword.control#0079ca
keyword#0079ca
storage#0079ca
keyword.control.import.python,keyword.control.flow.pythonitalic
control.elements, keyword.operator.less#db6804
keyword.other.special-method#52adf2
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#ff7300
support.function#2bbac5
support.type.property-name#ff008c
support.constant.property-value#abb2bf
support.constant.font-name#db6804
meta.tag#abb2bf
string,punctuation.definition.string.begin,punctuation.definition.string.end#39ca11
entity.other.inherited-class#5bc93d
constant.other.symbol#2bbac5
constant.numeric#db6804italic
none#db6804
none#db6804
constant#0079caitalic bold
punctuation.definition.constant#0079ca
entity.name.tag#5995ef
entity.other.attribute-name#015692
entity.other.attribute-name.id#52adf2normal
entity.other.attribute-name.class.css#db6804normal
meta.selector#d55fde
none#db6804
markup.heading#ff2424bold
markup.heading punctuation.definition.heading, entity.name.section#52adf2
keyword.other.unit#ff2424
markup.bold,todo.bold#db6804bold
punctuation.definition.bold#ff7300
markup.italic, punctuation.definition.italic,todo.emphasis#d55fde
emphasis md#d55fde
entity.name.section.markdown#ff2424
punctuation.definition.heading.markdown#ff2424
punctuation.definition.list.begin.markdown#ff2424
markup.heading.setext#abb2bf
punctuation.definition.bold.markdown#db6804
markup.inline.raw.markdown#5bc93d
markup.inline.raw.string.markdown#5bc93d
punctuation.definition.list.markdown#ff2424
markup.quote.markdown#5c6370italic
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#ff2424
beginning.punctuation.definition.list.markdown#ff2424
punctuation.definition.metadata.markdown#ff2424
markup.underline.link.markdown,markup.underline.link.image.markdown#d55fde
string.other.link.title.markdown,string.other.link.description.markdown#52adf2
markup.italic.markdownitalic
markup.bold.markdownbold
string.regexp#2bbac5
constant.character.escape#ff1038
punctuation.section.embedded, variable.interpolation#ff2424
invalid.illegal#ffffff
invalid.broken#ffffff
invalid.deprecated#ffffff
invalid.unimplemented#ffffff
source.json meta.structure.dictionary.json > string.quoted.json#ff2424
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#ff2424
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#5bc93d
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#2bbac5
support.type.property-name.json#ff2424
support.type.property-name.json punctuation#ff2424
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#e6a938
keyword.operator.error-control.php#d55fde
keyword.operator.type.php#d55fde
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#ff7300italic
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php#39ca11
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.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php#db6804
entity.name.goto-label.php,support.other.php#52adf2
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php#2bbac5
keyword.operator.regexp.php#d55fde
keyword.operator.comparison.php#2bbac5
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#d55fde
meta.function.decorator.python#52adf2
support.token.decorator.python,meta.function.decorator.identifier.python#2bbac5
function.parameter#db6804
function.parameter#abb2bf
function.brace#abb2bf
function.parameter.ruby, function.parameter.cs#abb2bf
constant.language.symbol.ruby#2bbac5
rgb-value#2bbac5
inline-color-decoration rgb-value#db6804
less rgb-value#db6804
selector.sass#ff2424
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#ff7300
block.scope.end,block.scope.begin#abb2bf
storage.type.cs#ff7300
entity.name.variable.local.cs#ff2424
token.info-token#52adf2
token.warn-token#db6804
token.error-token#f44747
token.debug-token#d55fde
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#d55fde
meta.template.expression#abb2bf
keyword.operator.module#d55fde
support.type.type.flowtype#52adf2
support.type.primitive#ff7300
meta.property.object#ff2424
variable.parameter.function.js#ff2424
keyword.other.template.begin#5bc93d
keyword.other.template.end#5bc93d
keyword.other.substitution.begin#5bc93d
keyword.other.substitution.end#5bc93d
keyword.operator.assignment#2bbac5
keyword.operator.assignment.go, keyword.operator.address.go#ff7300
entity.name.package.go#ff7300
support.type.prelude.elm#2bbac5
support.constant.elm#db6804
punctuation.quasi.element#d55fde
constant.character.entity#ff2424
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#2bbac5
entity.global.clojure#ff7300
meta.symbol.clojure#ff2424
constant.keyword.clojure#2bbac5
meta.arguments.coffee, variable.parameter.function.coffee#ff2424
source.ini#5bc93d
meta.scope.prerequisites.makefile#ff2424
source.makefile#ff7300
storage.modifier.import.groovy#ff7300
meta.method.groovy#52adf2
meta.definition.variable.name.groovy#ff2424
meta.definition.class.inherited.classes.groovy#5bc93d
support.variable.semantic.hlsl#ff7300
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#ff2424
support.type.swift, support.type.vb.asp#ff7300
entity.name.function.xi#ff7300
entity.name.class.xi#2bbac5
constant.character.character-class.regexp.xi#ff2424
constant.regexp.xi#d55fde
keyword.control.xi#2bbac5
invalid.xi#abb2bf
beginning.punctuation.definition.quote.markdown.xi#5bc93d
beginning.punctuation.definition.list.markdown.xi#7f848e
constant.character.xi#52adf2
accent.xi#52adf2
wikiword.xi#db6804
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#ff7300
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#ff2424

Shiki preview

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

Loading...

RedPro Theme - Coding Theme