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#160F12
  • activityBar.foreground#FF8FA3
  • button.background#FF8FA3
  • button.foreground#160F12
  • button.hoverBackground#FFB3C2
  • editor.background#1A1115
  • editor.foreground#F3E2E2
  • editor.lineHighlightBackground#2E1419
  • editor.selectionBackground#4F1F2D
  • editor.wordHighlightBackground#4F1F2D
  • editorGroupHeader.tabsBackground#160F12
  • focusBorder#FF8FA350
  • inputOption.activeBorder#FF8FA3
  • progressBar.background#FF8FA3
  • sideBar.background#1A1115
  • sideBar.foreground#E2B8B8
  • statusBar.background#160F12
  • statusBar.foreground#FF8FA3
  • tab.activeBackground#1A1115
  • tab.inactiveBackground#160F12
  • titleBar.activeBackground#160F12

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation, comment.block.javadoc, comment.line.double-slash, comment.line.number-sign.python, comment.line.hash.ruby, comment.block.documentation.rust, comment.block.documentation.ts, comment.block.html, comment.line.triple-slash.directive, comment.block.documentation.phpdoc#9F6161italic
variable, string constant.other.placeholder, variable.other.readwrite, variable.parameter, variable.other.object, variable.language, variable.other.property, variable.other.member, variable.scss, variable.other.php, variable.other.normal.shell, variable.other.special.rust, variable.other.readwrite.global, variable.other.constant, variable.argument.css, variable.other.object.property.js#F3E2E2
keyword, storage.type, storage.modifier, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.control.flow, storage.type.class.python, storage.type.function.python, keyword.other.fn.rust, storage.type.cs, keyword.package.go, storage.type.kotlin, keyword.control.import, keyword.control.export, storage.type.class.ts, keyword.control.conditional, keyword.control.loop#FF7E7E
keyword.operator, punctuation, meta.brace, meta.delimiter, punctuation.definition.parameters, punctuation.separator, punctuation.terminator, punctuation.accessor, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment, keyword.operator.type.annotation, meta.decorator punctuation#FF8FA3
entity.name.tag, support.class.component, entity.name.tag.html, entity.name.tag.xml, entity.name.tag.jsx, entity.name.tag.tsx, punctuation.definition.tag, meta.tag.sgml, meta.tag.html, meta.tag.xml, meta.tag.js, meta.tag.tsx#FF9B9B
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, meta.method-call, meta.function, support.function.builtin, support.function.core, meta.function.python, entity.name.function.go, entity.name.function.rust, support.function.std.rust, entity.name.function.php, support.function.magic#FFB4B4
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, constant.other.color, constant.other.symbol, constant.other.key, constant.numeric.decimal, constant.numeric.hex, constant.numeric.binary, constant.numeric.octal, constant.numeric.float#FFCB8B
string, string.quoted.single, string.quoted.double, string.template, string.interpolated, string.regexp, string.other.link, string.quoted.backtick, string.unquoted.heredoc, string.quoted.triple, string.quoted.docstring.multi.python, string.template.js, string.quoted.template#FFD9A3
entity.name.type, support.type, support.class, storage.type.generic, storage.type.primitive, entity.name.class, entity.other.inherited-class, entity.name.struct, entity.name.enum, entity.name.interface, support.type.builtin, entity.name.type.class, entity.name.type.module, support.type.primitive.ts#FFA3A3
entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx, entity.other.attribute-name.class.css, meta.decorator, meta.decorator entity.name.function, entity.other.attribute-name.id#FF9B9B
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass, support.type.vendored.property-name, support.constant.property-value.css, support.constant.font-name, support.constant.media, constant.other.color.rgb-value#FF8FA3
markup.heading, markup.bold, markup.italic, markup.inline.raw, markup.quote, markup.list, markup.link, markup.underline, markup.raw.block, markup.fenced_code, markup.heading.markdown#FF9B9B
string.regexp, constant.character.escape.regex, string.regexp.character-class, string.regexp.anchor, string.regexp.group, punctuation.definition.group.regexp#FFD9A3
punctuation.definition.template-expression, punctuation.section.embedded, meta.embedded.line, meta.template.expression, meta.embedded.expression#FF8FA3
Cosmic Night Theme Collection by CosmicNight - VS Code Theme