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#1a0000
  • activityBar.foreground#ffffff
  • activityBarBadge.background#ff69b4
  • activityBarBadge.foreground#000000
  • badge.background#ff69b4
  • badge.foreground#000000
  • breadcrumb.activeSelectionForeground#ffffff
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#ff69b4
  • contrastActiveBorder#ff69b4
  • contrastBorder#ff69b4
  • debugToolBar.background#1a0000
  • dropdown.background#1a0000
  • dropdown.border#ff69b4
  • dropdown.foreground#ffffff
  • editor.background#000000
  • editor.findMatchBackground#ffff0080
  • editor.findMatchHighlightBackground#ffff0040
  • editor.foreground#ffffff
  • editor.lineHighlightBackground#ff149330
  • editor.selectionBackground#ff149380
  • editor.selectionHighlightBackground#ff149350
  • editor.wordHighlightBackground#ff69b460
  • editor.wordHighlightStrongBackground#ff69b480
  • editorBracketHighlight.foreground1#ff1493
  • editorBracketHighlight.foreground2#00ffff
  • editorBracketHighlight.foreground3#00ff00
  • editorBracketHighlight.foreground4#ffff00
  • editorBracketHighlight.foreground5#ff00ff
  • editorBracketHighlight.foreground6#00ff7f
  • editorBracketMatch.background#ff149340
  • editorBracketMatch.border#ff69b4
  • editorCursor.foreground#ff69b4
  • editorGutter.addedBackground#00ff00
  • editorGutter.background#000000
  • editorGutter.deletedBackground#ff0000
  • editorGutter.modifiedBackground#ffff00
  • editorHoverWidget.background#1a0000
  • editorIndentGuide.activeBackground#ff69b4
  • editorIndentGuide.background#ff149320
  • editorLineNumber.activeForeground#ffffff
  • editorLineNumber.foreground#ff69b4
  • editorSuggestWidget.background#1a0000
  • editorSuggestWidget.border#ff69b4
  • editorWidget.background#1a0000
  • focusBorder#ff69b4
  • input.background#1a0000
  • input.border#ff69b4
  • input.foreground#ffffff
  • input.placeholderForeground#ff69b4
  • inputOption.activeBackground#ff69b4
  • inputOption.activeBorder#ff69b4
  • inputValidation.errorBackground#330000
  • inputValidation.errorBorder#ff0000
  • inputValidation.infoBackground#001a33
  • inputValidation.infoBorder#0080ff
  • inputValidation.warningBackground#333300
  • inputValidation.warningBorder#ffff00
  • list.activeSelectionBackground#ff149360
  • list.activeSelectionForeground#ffffff
  • list.errorForeground#ff0000
  • list.focusBackground#ff149330
  • list.hoverBackground#ff149320
  • list.inactiveSelectionBackground#ff149320
  • list.invalidItemForeground#ff0000
  • list.warningForeground#ffff00
  • menu.background#1a0000
  • menu.foreground#ffffff
  • menu.selectionBackground#ff149360
  • menu.selectionForeground#ffffff
  • menubar.selectionBackground#ff149360
  • menubar.selectionForeground#ffffff
  • merge.currentHeaderBackground#ff149340
  • merge.incomingHeaderBackground#00ff0040
  • notifications.background#1a0000
  • notifications.foreground#ffffff
  • panel.background#1a0000
  • panel.border#ff69b4
  • panelTitle.activeBorder#ff69b4
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#ff69b4
  • peekViewEditor.background#1a0000
  • peekViewEditorGutter.background#1a0000
  • peekViewResult.background#1a0000
  • peekViewTitle.background#1a0000
  • pickerGroup.border#ff69b4
  • progressBar.background#ff69b4
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#ff149380
  • scrollbarSlider.background#ff149340
  • scrollbarSlider.hoverBackground#ff149360
  • settings.headerForeground#ffffff
  • settings.modifiedItemIndicator#ff69b4
  • sideBar.background#0d0000
  • sideBar.foreground#ffffff
  • sideBarTitle.foreground#ff69b4
  • statusBar.background#ff1493
  • statusBar.debuggingBackground#ff0000
  • statusBar.foreground#ffffff
  • tab.activeBackground#000000
  • tab.activeBorder#ff69b4
  • tab.activeForeground#ffffff
  • tab.inactiveBackground#1a0000
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#0080ff
  • terminal.ansiBrightBlack#808080
  • terminal.ansiBrightBlue#69b3ff
  • terminal.ansiBrightCyan#69ffff
  • terminal.ansiBrightGreen#69ff69
  • terminal.ansiBrightMagenta#ff69ff
  • terminal.ansiBrightRed#ff6b6b
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffff69
  • terminal.ansiCyan#00ffff
  • terminal.ansiGreen#00ff00
  • terminal.ansiMagenta#ff69b4
  • terminal.ansiRed#ff0000
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ffff00
  • terminal.background#000000
  • terminal.foreground#ffffff
  • titleBar.activeBackground#1a0000
  • titleBar.activeForeground#ffffff
  • titleBar.inactiveBackground#0d0000
  • titleBar.inactiveForeground#ff69b4
  • tree.indentGuidesStroke#ff149320
  • welcomePage.background#000000
  • widget.shadow#ffffff40

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.line, comment.block#ff69b4italic
comment.block.documentation, comment.line.documentation#00ff00italic bold
keyword, keyword.control, keyword.operator.new, keyword.other.using, keyword.other.import#ff69b4bold
keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.exception, keyword.control.trycatch#ff1493bold
storage.type, storage.modifier, storage.type.class, storage.type.function, storage.type.interface#00ffffbold
keyword.operator, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.assignment#ff69b4
keyword.operator.word, keyword.operator.typeof, keyword.operator.instanceof#ff1493bold
variable, variable.other, variable.language.this, variable.language.super#ffffff
variable.other.property, variable.other.object.property, variable.other.member#00ff00
variable.parameter, variable.parameter.function#ffff00italic bold
entity.name.function, entity.name.method, meta.function-call entity.name.function, support.function#ff69b4
meta.function entity.name.function, meta.method entity.name.function#ff1493bold
support.function.builtin, support.function.magic#00ff7fbold
entity.name.class, entity.name.type.class, entity.other.inherited-class#ffff00bold
entity.name.interface, entity.name.type.interface#00ffffbold
entity.name.type, support.type, meta.type.annotation#00ffff
string, string.quoted, string.quoted.single, string.quoted.double#00ff00
string.template, string.quoted.template#69ff69
string.interpolated, meta.template.expression#00ffffbold
string.regexp, string.regex#ffff00bold
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.decimal, constant.numeric.hex, constant.numeric.binary, constant.numeric.octal#ffff00bold
constant.language.boolean, constant.language.true, constant.language.false#ff1493bold
constant.language.null, constant.language.undefined, constant.language.none#ff0000bold
constant.other, variable.other.constant#ffff00italic bold
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#00ffffbold
keyword.control.flow.async, keyword.control.flow.await#ff1493italic bold
meta.object-binding-pattern-variable entity.name.binding, meta.array-binding-pattern-variable entity.name.binding#00ff00bold
variable.language.special.self.python, variable.language.special.cls.python#00ffffitalic bold
support.function.magic.python#ffff00bold
entity.name.function.decorator.python, punctuation.definition.decorator.python#ffff00bold
punctuation.definition.annotation, storage.type.annotation#ffff00bold
punctuation.definition.typeparameters, entity.name.type.parameter#00ffffbold
keyword.control.directive, meta.preprocessor#00ffffbold
keyword.operator.pointer, keyword.operator.address#ff1493bold
entity.name.type.lifetime.rust, punctuation.definition.lifetime.rust#ffff00bold
entity.name.function.macro.rust, punctuation.definition.macro.rust#00ffffbold
entity.name.package.go#00ff00bold
punctuation.definition.variable.php, variable.other.php#ffffff
entity.name.type.namespace.php#00ff00bold
entity.name.tag.html, punctuation.definition.tag#ff69b4bold
entity.other.attribute-name.html#ffff00bold
string.quoted.double.html, string.quoted.single.html#00ff00bold
support.type.property-name.css#00ffffbold
support.constant.property-value.css, constant.numeric.css#00ff00bold
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ffff00bold
keyword.other.unit.css#ffff00bold
source.json meta.structure.dictionary.json support.type.property-name.json#ff69b4bold
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ff00ffbold
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#e600ffbold
punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json, punctuation.separator.dictionary.key-value.json, punctuation.separator.array.json#ff69b4
string.quoted.double.json, string.quoted.single.json#00ff00bold
constant.numeric.json#ffff00bold
constant.language.json#ff1493bold
constant.language.null.json#ff0000bold
entity.name.tag.yaml#ff69b4bold
string.unquoted.plain.out.yaml#00ff00bold
markup.heading, punctuation.definition.heading.markdown#ff69b4bold
markup.bold#ffff00bold
markup.italic#ff1493italic bold
markup.inline.raw.markdown, markup.fenced_code.block.markdown#00ff7fbold
markup.underline.link.markdown#00ffffbold
markup.quote.markdown#00ff00italic bold
markup.table, punctuation.separator.table-cell.markdown#69b3ffbold
keyword.other.sql#ff69b4bold
support.function.sql#ff69b4bold
punctuation, punctuation.separator, punctuation.terminator#ff69b4
punctuation.section.brackets, punctuation.section.parens, punctuation.section.braces#ff69b4bold
invalid, invalid.illegal#ff0000bold underline
text.embedded, text.html.php, text.javascript, text.typescript, source.js, source.ts, source.coffee, source.python#ffffff
meta.decorator, meta.decorator.identifier, meta.decorator punctuation.decorator#ff00ffitalic bold
source.graphql keyword.operation, source.graphql meta.type.interface#00ffffbold
source.graphql variable.graphql, source.graphql meta.selection-set#00ff00bold
keyword.other.special-method.dockerfile, source.dockerfile keyword.operator.flag#ff1493bold
entity.name.type.anchor.yaml, variable.other.alias.yaml#ff00ffitalic bold
variable.other.special.shell, variable.other.positional.shell, variable.other.normal.shell#ff00ffbold
meta.decorator.ts entity.name.function, meta.decorator.tsx entity.name.function#ffff00italic bold
comment.block.documentation storage.type.class.jsdoc, comment.block.documentation punctuation.definition.block.tag.jsdoc#69ff69bold
markup.changed, meta.diff.header.git#ffff00bold
meta.decorator.python, meta.decorator.identifier.python#ffff00italic bold
meta.attribute.rust, meta.attribute.identifier.rust#ffff00italic bold
ThemeDatabase All Themes by enes ozturk - VS Code Theme