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#001a15
  • activityBar.foreground#abfcec
  • activityBarBadge.background#7fedd6
  • activityBarBadge.foreground#001a15
  • button.background#7fedd6
  • button.foreground#001610
  • dropdown.background#011f19
  • dropdown.foreground#abfcec
  • editor.background#012a22
  • editor.foreground#abfcec
  • editor.lineHighlightBackground#011f19
  • editor.selectionBackground#023d35
  • editor.selectionHighlightBackground#023d3580
  • editor.wordHighlightBackground#023d3580
  • editorCursor.foreground#abfcec
  • editorGroupHeader.tabsBackground#001610
  • editorIndentGuide.activeBackground#023d35
  • editorIndentGuide.background#011f19
  • editorWhitespace.foreground#011f19
  • focusBorder#7fedd6
  • input.background#011f19
  • input.foreground#abfcec
  • input.placeholderForeground#7fedd6
  • list.activeSelectionBackground#012a22
  • list.activeSelectionForeground#abfcec
  • list.hoverBackground#011f19
  • list.hoverForeground#abfcec
  • sideBar.background#011f19
  • sideBar.foreground#abfcec
  • sideBarTitle.foreground#7fedd6
  • statusBar.background#001a15
  • statusBar.foreground#abfcec
  • statusBar.noFolderBackground#012a22
  • tab.activeBackground#012a22
  • tab.activeForeground#abfcec
  • tab.inactiveBackground#001a15
  • tab.inactiveForeground#7fedd6
  • terminal.ansiBlack#001610
  • terminal.ansiBlue#6bc5ff
  • terminal.ansiBrightBlack#012a22
  • terminal.ansiBrightBlue#92d5ff
  • terminal.ansiBrightCyan#a9fff0
  • terminal.ansiBrightGreen#6bedcc
  • terminal.ansiBrightMagenta#ffb2e7
  • terminal.ansiBrightRed#ff8585
  • terminal.ansiBrightWhite#e2fcf8
  • terminal.ansiBrightYellow#ffe074
  • terminal.ansiCyan#89ffea
  • terminal.ansiGreen#4ddbba
  • terminal.ansiMagenta#ff92df
  • terminal.ansiRed#ff6b6b
  • terminal.ansiWhite#c4fcf2
  • terminal.ansiYellow#ffd93d
  • terminal.background#012a22
  • terminal.foreground#abfcec
  • titleBar.activeBackground#001a15
  • titleBar.activeForeground#abfcec

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#35675citalic
string, string.quoted.single, string.quoted.double, string.quoted.triple, string.template, constant.character, constant.other.symbol#4ddbba
constant.numeric, constant.language, constant.character.escape, constant.other, support.constant#477f72
variable, variable.other, variable.parameter, variable.language, variable.object.property#abfcec
keyword, keyword.control, keyword.operator, keyword.other, storage.type, storage.modifier, punctuation.decorator#6eafa1
entity.name.function, entity.name.method, support.function, meta.function-call, meta.method-call, meta.function.dart#82c8b9
entity.name.type, entity.name.class, entity.name.struct, entity.name.enum, entity.name.union, entity.name.trait, entity.name.interface, support.class, support.type, meta.return-type#89ffeabold
meta.decorator, meta.annotation, punctuation.definition.annotation#477f72
entity.name.tag, punctuation.definition.tag#6eafa1
entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.css, support.type.property-name.css, entity.other.attribute-name.class#6bedcc
support.type.primitive, support.type.builtin, keyword.type, storage.type.primitive, storage.type.built-in, support.type.primitive.dart#89ffea
string.regexp, constant.character.escape.regex#7fedd6
markup.heading, entity.name.section#82c8b9bold
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.fenced_code, markup.raw#4ddbba
support.type.property-name.json, support.type.property-name.jsonc#6bedcc
keyword.operator.expression, keyword.operator.new, keyword.operator.optional, keyword.operator.comparison, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.logical#6eafa1
meta.embedded, source.groovy.embedded, meta.template.expression#abfcec
meta.object-literal.key, variable.object.property, variable.other.property, variable.other.object.property#6bedcc
support.variable.property, support.variable.object.process, support.variable.object.node#6bedcc
source.rust storage.type.rust, source.rust entity.name.type.rust, source.rust entity.name.type.struct.rust#89ffea
source.rust keyword.operator, source.rust keyword.operator.arithmetic, source.rust keyword.operator.logical#6eafa1
source.python support.type.python, source.python support.function.builtin.python#82c8b9
source.cs entity.name.type.class.cs, source.cs storage.type.cs#89ffea
source.dart support.class.dart, source.dart support.type.dart#89ffea
source.prisma keyword.operator, source.prisma constant.language, source.prisma keyword.type#6eafa1
source.graphql support.type, source.graphql constant.character#89ffea
source.sql keyword.other, source.sql storage.type#6eafa1
meta.jsx.children, meta.embedded.block.tsx, meta.embedded.block.jsx#abfcec
meta.decorator.ts, meta.decorator.tsx, meta.decorator.angular#477f72
Naomi's Themes by NHCarrigan - VS Code Theme