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#001015
  • activityBarBadge.background#005a6f
  • badge.background#047aa6
  • button.background#0c302d
  • debugExceptionWidget.background#001015
  • debugExceptionWidget.border#AB395B
  • debugToolBar.background#001015
  • editor.background#001319
  • editor.foreground#839496
  • editor.lineHighlightBackground#04252e
  • editor.selectionBackground#172a27
  • editor.selectionHighlightBackground#005A6FAA
  • editor.wordHighlightBackground#002f3a
  • editor.wordHighlightStrongBackground#005A6FAA
  • editorCursor.foreground#930001
  • editorGroup.border#001015
  • editorGroup.dropBackground#0c302d44
  • editorGroupHeader.tabsBackground#001015
  • editorHoverWidget.background#001920
  • editorHoverWidget.foreground#949494
  • editorIndentGuide.activeBackground1#afcaca
  • editorIndentGuide.background1#93A1A168
  • editorLineNumber.activeForeground#949494
  • editorMarkerNavigationError.background#AB395B
  • editorMarkerNavigationWarning.background#5B7E7A
  • editorSuggestWidget.background#001015
  • editorSuggestWidget.foreground#93a1a1
  • editorSuggestWidget.selectedBackground#002d37
  • editorWhitespace.foreground#93A1A180
  • editorWidget.background#001015
  • errorForeground#ffeaea
  • focusBorder#0c302d
  • gitDecoration.addedResourceForeground#669117
  • gitDecoration.modifiedResourceForeground#268bd2
  • gitDecoration.untrackedResourceForeground#dc322f
  • input.background#001015
  • input.foreground#93a1a1
  • input.placeholderForeground#93a1a1aa
  • inputOption.activeBorder#0c302d
  • inputValidation.errorBackground#4e1822
  • inputValidation.errorBorder#87193a
  • inputValidation.infoBackground#052730
  • inputValidation.infoBorder#363b5f
  • inputValidation.warningBackground#5d5938
  • inputValidation.warningBorder#9d8a5e
  • list.activeSelectionBackground#002d37
  • list.dropBackground#00222a88
  • list.highlightForeground#127076
  • list.hoverBackground#00222aaa
  • list.inactiveSelectionBackground#00222a88
  • menu.background#001015
  • menu.foreground#93a1a1
  • menu.selectionBackground#00222aaa
  • minimap.selectionHighlight#172a27
  • panel.background#001015
  • panel.border#2b2b4a
  • peekView.border#2b2b4a
  • peekViewEditor.background#00141a
  • peekViewEditor.matchHighlightBackground#7744AA40
  • peekViewResult.background#001015
  • peekViewTitle.background#001015
  • pickerGroup.border#0c302d
  • pickerGroup.foreground#0c302d
  • progressBar.background#047aa6
  • quickInput.background#001015
  • quickInputList.focusBackground#002d37
  • selection.background#0c302d
  • sideBar.background#001015
  • sideBarSectionHeader.background#001b21
  • sideBarTitle.foreground#93a1a1
  • statusBar.background#001015
  • statusBar.debuggingBackground#001015
  • statusBar.foreground#93a1a1
  • statusBar.noFolderBackground#001015
  • statusBarItem.remoteBackground#0c302d
  • tab.activeBackground#001a22
  • tab.activeBorder#005a6f
  • tab.activeForeground#d6dbdb
  • tab.border#002731
  • tab.inactiveBackground#001015
  • tab.inactiveForeground#93A1A1
  • tab.lastPinnedBorder#859900
  • terminal.ansiBlack#073642
  • terminal.ansiBlue#268bd2
  • terminal.ansiBrightBlack#002b36
  • terminal.ansiBrightBlue#839496
  • terminal.ansiBrightCyan#93a1a1
  • terminal.ansiBrightGreen#586e75
  • terminal.ansiBrightMagenta#6c71c4
  • terminal.ansiBrightRed#cb4b16
  • terminal.ansiBrightWhite#fdf6e3
  • terminal.ansiBrightYellow#657b83
  • terminal.ansiCyan#2aa198
  • terminal.ansiGreen#859900
  • terminal.ansiMagenta#d33682
  • terminal.ansiRed#dc322f
  • terminal.ansiWhite#eee8d5
  • terminal.ansiYellow#b58900
  • terminal.background#001015
  • titleBar.activeBackground#001116

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#839496
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown#839496
comment, string.quoted.docstring#586E75italic
string#2AA198
string.regexp#DC322F
constant.numeric#D33682
variable.language, variable.other#268BD2
keyword#859900
storage#859900
entity.name.class, entity.name.type, entity.name.namespace, entity.name.scope-resolution#CB4B16
entity.name.function#268BD2
punctuation.definition.variable#859900
punctuation.section.embedded.begin, punctuation.section.embedded.end#DC322F
constant.language, meta.preprocessor#B58900
support.function.construct, keyword.other.new#CB4B16
constant.character, constant.other#b58901
entity.other.inherited-class#6C71C4
variable.parameter
entity.name.tag#859900
punctuation.definition.tag#DC322F
entity.other.attribute-name#93A1A1
support.function#268BD2
punctuation.separator.continuation#DC322F
support.constant, support.variable
support.type, support.class#859900
support.type.exception#CB4B16
support.other.variable
invalid#DC322F
meta.diff, meta.diff.header#268BD2italic
markup.deleted#DC322F
markup.changed#CB4B16
markup.inserted#859900
markup.quote#859900
markup.list#B58900
markup., markup.italic#D33682
markup.
markup.italicitalic
markup.strikethroughstrikethrough
markup.inline.raw#2AA198
markup.heading#268BD2
markup.heading.setext#268BD2
storage.modifier, punctuation.definition.entity.css, punctuation.accessor.optional, fenced_code.block.language.markdown, support.type.property-name.json#859900
keyword.control.from, keyword.control.import, support.type.object.module#DC322F
entity.other.attribute-name, support.type.property-name.css, meta.property-name.css, support.type.vendored.property-name, meta.at-rule.media.header, entity.other.keyframe-offset, support.constant.constant.prisma, meta.selections, keyword.control.conditional.vue, keyword.control.loop.vue#268BD2
support.class.component, meta.parameters, punctuation.definition.block, punctuation.section.embedded, punctuation.section.embedded.begin, punctuation.section.embedded.end, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, meta.brace.round, meta.brace.square, punctuation.definition.binding-pattern.array, punctuation.definition.binding-pattern.object, meta.object-binding-pattern-variable, punctuation.definition.typeparameters.begin, punctuation.definition.typeparameters.end, punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json, punctuation.definition.array.begin.json, punctuation.definition.array.end.json, punctuation.section.property-list.begin.bracket.curly, punctuation.section.property-list.end.bracket.curly, punctuation.section.keyframes.begin.bracket.curly, punctuation.section.keyframes.end.bracket.curly, punctuation.definition.interpolation.begin.html, punctuation.definition.interpolation.end.html, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, meta.brace.angle, entity.name.section.markdown, punctuation.definition.heading.markdown, punctuation.definition.link.title.begin.markdown, punctuation.definition.link.title.end.markdown, punctuation.definition.metadata.markdown, punctuation.section.function.begin.bracket.round.css, punctuation.section.function.end.bracket.round.css, punctuation.definition.entity.begin.bracket.square.css, punctuation.definition.entity.end.bracket.square.css, source.prisma.array, punctuation.definition.tag.prisma, support.class.error, keyword.operator.list_type.prisma, variable.language.this, meta.brace.curly.graphql, source.prisma.embedded.source#CB4B17
support.type.primitive, meta.type.annotation, meta.interface, entity.name.type, entity.name.tag.css, support.type.primitive, meta.type.annotation, entity.name.type.interface, variable.argument.css, variable.css, support.class.builtin, meta.special.start, meta.special.end, meta.special.const.svelte, support.type, meta.return.type, meta.arguments, meta.fragment#cb4b16
variable.other.constant, meta.definition.variable, meta.var-single-variable.expr, meta.var.expr, variable.other.object, meta.embedded.expression, variable.other.readwrite#839496
constant.numeric, constant.numeric.decimal, constant.language.boolean, meta.property-value.css, keyword.other.unit, constant.language#2AA198
markup.underline.link.markdown#6C71C4