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#0F1523
  • activityBar.foreground#8AB4FF
  • editor.background#111827
  • editor.foreground#E2E8F3
  • editor.lineHighlightBackground#141C2E
  • editor.selectionBackground#1F2D4F
  • editor.wordHighlightBackground#1F2D4F
  • editorGroupHeader.tabsBackground#0F1523
  • sideBar.background#111827
  • sideBar.foreground#B8C7E2
  • statusBar.background#0F1523
  • statusBar.foreground#8AB4FF
  • tab.activeBackground#111827
  • tab.inactiveBackground#0F1523
  • titleBar.activeBackground#0F1523

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#617B9Fitalic
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#E2E8F3
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#8BCFFF
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#8AB4FF
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#9BCDFF
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#7CCCDE
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#7FD4FF
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#9DFFEB
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#A3E7FF
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#7CCCDE
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#8BCFFF
markup.heading, markup.bold, markup.italic, markup.inline.raw, markup.quote, markup.list, markup.link, markup.underline, markup.raw.block#9BCDFF
string.regexp, constant.character.escape.regex, string.regexp.character-class, string.regexp.anchor#9DFFEB
keyword.operation.graphql, meta.selectionset.graphql, entity.name.fragment.graphql, variable.graphql#8BCFFF
keyword.other.sql, source.sql, support.function.sql, constant.other.database-name.sql#8BCFFF
Cosmic Night Theme Collection by CosmicNight - VS Code Theme