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.activeForeground#FFAA33
  • activityBar.background#073620
  • activityBar.foreground#f8c9e3
  • activityBarBadge.background#5b1c62
  • badge.background#5b1c62
  • editor.background#041f14
  • editor.foreground#FFAA33
  • editor.lineHighlightBackground#ffffff12
  • editor.selectionBackground#5b1c62AA
  • editorBracketHighlight.foreground1#C97424
  • editorBracketHighlight.foreground2#11a056
  • editorBracketHighlight.foreground3#5aa8c4
  • editorBracketHighlight.foreground4#fe6358
  • editorBracketHighlight.foreground5#C61d73
  • editorBracketHighlight.foreground6#5b1c62
  • editorGutter.background#041f14
  • editorLineNumber.activeForeground#11a056
  • editorLineNumber.foreground#f8c9e3
  • editorSuggestWidget.background#0a3d18
  • editorSuggestWidget.highlightForeground#fe6358
  • editorSuggestWidget.selectedBackground#5b1c6240
  • sideBar.background#0a3d18
  • sideBar.border#C97424
  • statusBar.background#073620
  • statusBar.foreground#FFAA33
  • tab.activeBackground#073620
  • tab.activeBorder#5b1c62
  • tab.inactiveBackground#0a3d18
  • titleBar.activeBackground#073620
  • titleBar.activeForeground#FFAA33
  • titleBar.inactiveBackground#073620

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#5aa8c488italic
comment.block, comment.block.documentation#5aa8c488italic
punctuation.definition.block,punctuation.definition.parameters,punctuation.definition.array,punctuation.definition.typeparameters,punctuation.definition.binding-pattern,meta.brace,punctuation.section.embedded#f8c9e3
keyword.operator,keyword.operator.logical,keyword.operator.relational,keyword.operator.assignment,keyword.operator.comparison,keyword.operator.ternary,keyword.operator.arithmetic,keyword.operator.spread#C61d73
string,string.character.escape,string.template.quoted,string.template.quoted.punctuation,string.template.quoted.punctuation.single,string.template.quoted.punctuation.double,string.type.declaration.annotation,string.template.quoted.punctuation.tag#f8f7f1
punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end#C61d73
expression.string,meta.template.expression#FFAA33
constant.numeric#f8c9e3
constant.language,variable.language#fe6358
constant.character, constant.other#f8c9e3
keyword,keyword.operator.new,keyword.operator.delete,keyword.operator.static,keyword.operator.this,keyword.operator.expression#fe6358
entity.name.type,meta.return.type,meta.type.annotation,meta.type.parameters,support.type.primitive#5aa8c4
storage,storage.type,storage.modifier,storage.arrow#fe6358
class.instance.constructor,new.expr entity.name.type#FFAA33
support.function, entity.name.function#FFAA33
annotation.meta.ts, annotation.meta.tsx#C61d73
variable.parameter, operator.rest.parameters#FFAA33
variable.property,variable.other.property,variable.other.object.property,variable.object.property,support.variable.property#FFAA33
quote.module#f8f7f1
markup.heading#fe6358bold
punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end, entity.name.tag#5aa8c4
entity.other.attribute-name#FFAA33
meta.object-literal.key#FFAA33
storage.modifier.ts#fe6358
ts.cast.expr,ts.meta.entity.class.method.new.expr.cast,ts.meta.entity.type.name.new.expr.cast,ts.meta.entity.type.name.var-single-variable.annotation,tsx.cast.expr,tsx.meta.entity.class.method.new.expr.cast,tsx.meta.entity.type.name.new.expr.cast,tsx.meta.entity.type.name.var-single-variable.annotation#5aa8c4
ts.meta.type.support,ts.meta.type.entity.name,ts.meta.class.inherited-class,tsx.meta.type.support,tsx.meta.type.entity.name,tsx.meta.class.inherited-class,type-declaration,enum-declaration#5aa8c4
function-declaration,method-declaration,method-overload-declaration,type-fn-type-parameters#FFAA33
comment.block.documentation, comment.line.documentation, comment.block.documentation.ts, comment.block.documentation.tsx, comment.line.documentation.ts, comment.line.documentation.tsx#5aa8c488italic
storage.type.jsdoc, storage.type.function.jsdoc, storage.type.class.jsdoc, entity.name.type.jsdoc, entity.name.type.instance.jsdoc, variable.parameter.jsdoc, variable.parameter.function.jsdoc, keyword.other.documentation, keyword.operator.documentation, punctuation.definition.comment, punctuation.definition.comment.jsdoc, punctuation.definition.comment.ts, punctuation.definition.comment.tsx#5aa8c488italic
constant.language.import-export-all#FFAA33
objectliteral.key.separator, punctuation.separator.key-value#FFAA33
regex italic
ts.meta.entity.name.namespace,tsx.meta.entity.name.namespace#FFAA33
regex.character-class#FFAA33
entity.name.type.class#FFAA33
entity.other.inherited-class#5aa8c4
entity.name.type.instance.jsdoc#5aa8c488italic
yaml.entity.name,yaml.string.entity.name#fe6358
yaml.string.out#FFAA33
block.support.module,block.support.type.module,block.support.function.variable#FFAA33
string.regexp#fe6358
punctuation.definition.group.regexp,punctuation.definition.character-class.regexp#FFAA33
constant.other.character-class.regexp, constant.character.escape.ts#FFAA33
expr.regex.or.operator#FFAA33
string.template.tag,string.template.punctuation.tag,string.quoted.punctuation.tag,string.quoted.embedded.tag, string.quoted.double.tag#f8f7f1
tag.punctuation.begin.arrow.parameters.embedded,tag.punctuation.end.arrow.parameters.embedded#FFAA33
object-literal.object.member.key.field.other,object-literal.object.member.key.accessor,object-literal.object.member.key.array.brace.square#FFAA33
property-list.property-value,property-list.constant#f8f7f1
support.type.property-name.variable.css,support.type.property-name.variable.scss,variable.scss#5aa8c4
entity.other.attribute-name.class.css,entity.other.attribute-name.class.scss,entity.other.attribute-name.parent-selector-suffix.css,entity.other.attribute-name.parent-selector-suffix.scss#FFAA33
property-list.property-value.rgb-value, keyword.other.unit.css,keyword.other.unit.scss#5aa8c4
property-list.property-value.function#FFAA33
support.constant.property-value.css,support.constant.property-value.scss#f8f7f1
css.entity.name.tag,scss.entity.name.tag#fe6358
meta.selector.css, entity.attribute-name.id, entity.other.attribute-name.pseudo-class.css,entity.other.attribute-name.pseudo-element.css#FFAA33
keyword.scss,keyword.css#fe6358
triple-slash.tag#FFAA33italic
token.info-token#5aa8c4
token.warn-token#fe6358
token.error-token#fe6358
token.debug-token#f8c9e3
keyword.operator.logical.python#fe6358
support.class.dart#fe6358
variable.language.php, variable.other.php#f8c9e3
variable.other.readwrite.perl#f8c9e3
variable.other.property.php#fe6358
support.variable.property.php#FFAA33
Beach Condo Color Themes by Mims Wright - VS Code Theme