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.activeBorder#e299bb
  • activityBar.background#1f0a32
  • activityBar.border#4b357a
  • activityBar.foreground#ede5f2
  • activityBar.inactiveForeground#8da4bb
  • activityBarBadge.background#d64570
  • activityBarBadge.foreground#ede5f2
  • badge.background#d64570
  • badge.foreground#ede5f2
  • button.background#d64570
  • button.foreground#ede5f2
  • button.hoverBackground#e54258
  • button.secondaryBackground#6b52a0
  • button.secondaryForeground#ede5f2
  • button.secondaryHoverBackground#a565a0
  • descriptionForeground#8da4bb
  • dropdown.background#4b357a
  • dropdown.border#6d3a72
  • dropdown.foreground#ede5f2
  • dropdown.listBackground#321848
  • editor.background#1f0a32
  • editor.findMatchBackground#d64570e0
  • editor.findMatchHighlightBackground#d6457040
  • editor.foreground#ede5f2
  • editor.inactiveSelectionBackground#6d3a7250
  • editor.lineHighlightBackground#4b357a20
  • editor.selectionBackground#a565a080
  • editor.selectionHighlightBackground#6b52a040
  • editor.wordHighlightBackground#a565a050
  • editor.wordHighlightStrongBackground#e299bb60
  • editorCursor.foreground#e299bb
  • editorGroup.border#4b357a
  • editorGroupHeader.tabsBackground#1f0a32
  • editorGroupHeader.tabsBorder#4b357a
  • editorGutter.addedBackground#8aabdd
  • editorGutter.background#1f0a32
  • editorGutter.deletedBackground#e54258
  • editorGutter.modifiedBackground#e87a7d
  • editorHoverWidget.background#321848
  • editorHoverWidget.border#4b357a
  • editorIndentGuide.activeBackground#6d3a72
  • editorIndentGuide.background#4b357a40
  • editorLineNumber.activeForeground#c9c3e8
  • editorLineNumber.foreground#7a5f8a
  • editorRuler.foreground#4b357a60
  • editorSuggestWidget.background#321848
  • editorSuggestWidget.border#4b357a
  • editorSuggestWidget.foreground#ede5f2
  • editorSuggestWidget.highlightForeground#e299bb
  • editorSuggestWidget.selectedBackground#a565a0
  • editorWhitespace.foreground#7a5f8a40
  • editorWidget.background#321848
  • editorWidget.border#4b357a
  • editorWidget.foreground#ede5f2
  • errorForeground#e54258
  • focusBorder#e299bb
  • foreground#ede5f2
  • gitDecoration.addedResourceForeground#8aabdd
  • gitDecoration.conflictingResourceForeground#d64570
  • gitDecoration.deletedResourceForeground#e54258
  • gitDecoration.ignoredResourceForeground#7a5f8a
  • gitDecoration.modifiedResourceForeground#e87a7d
  • gitDecoration.submoduleResourceForeground#a565a0
  • gitDecoration.untrackedResourceForeground#8da4bb
  • icon.foreground#c9c3e8
  • input.background#4b357a
  • input.border#6d3a72
  • input.foreground#ede5f2
  • input.placeholderForeground#8da4bb80
  • inputOption.activeBorder#e299bb
  • inputValidation.errorBackground#e5425820
  • inputValidation.errorBorder#e54258
  • inputValidation.warningBackground#e87a7d20
  • inputValidation.warningBorder#e87a7d
  • list.activeSelectionBackground#a565a0
  • list.activeSelectionForeground#ede5f2
  • list.dropBackground#d6457040
  • list.focusBackground#a565a0
  • list.focusForeground#ede5f2
  • list.highlightForeground#e299bb
  • list.hoverBackground#6b52a060
  • list.hoverForeground#ede5f2
  • list.inactiveSelectionBackground#6d3a7280
  • list.inactiveSelectionForeground#ede5f2
  • menu.background#321848
  • menu.border#4b357a
  • menu.foreground#ede5f2
  • menu.selectionBackground#a565a0
  • menu.selectionBorder#e299bb
  • menu.selectionForeground#ede5f2
  • menu.separatorBackground#6d3a72
  • menubar.selectionBackground#4b357a60
  • menubar.selectionBorder#e299bb
  • menubar.selectionForeground#ede5f2
  • notificationCenter.border#4b357a
  • notificationCenterHeader.background#321848
  • notificationLink.foreground#e299bb
  • notifications.background#321848
  • notifications.border#4b357a
  • notifications.foreground#ede5f2
  • notificationToast.border#4b357a
  • panel.background#1f0a32
  • panel.border#4b357a
  • panelTitle.activeBorder#e299bb
  • panelTitle.activeForeground#e299bb
  • panelTitle.inactiveForeground#8da4bb
  • peekView.border#e299bb
  • peekViewEditor.background#321848
  • peekViewEditor.matchHighlightBackground#d6457040
  • peekViewResult.background#1f0a32
  • peekViewResult.fileForeground#ede5f2
  • peekViewResult.lineForeground#8da4bb
  • peekViewResult.matchHighlightBackground#d6457040
  • peekViewResult.selectionBackground#a565a0
  • peekViewResult.selectionForeground#ede5f2
  • peekViewTitle.background#4b357a
  • peekViewTitleDescription.foreground#8da4bb
  • peekViewTitleLabel.foreground#ede5f2
  • progressBar.background#8aabdd
  • scrollbar.shadow#1f0a3260
  • scrollbarSlider.activeBackground#6b52a0
  • scrollbarSlider.background#6d3a7260
  • scrollbarSlider.hoverBackground#a565a080
  • selection.background#a565a080
  • sideBar.background#321848
  • sideBar.border#4b357a
  • sideBar.foreground#ede5f2
  • sideBarSectionHeader.background#4b357a40
  • sideBarSectionHeader.border#6d3a7260
  • sideBarSectionHeader.foreground#c9c3e8
  • sideBarTitle.foreground#e299bb
  • statusBar.background#1f0a32
  • statusBar.border#4b357a
  • statusBar.debuggingBackground#d64570
  • statusBar.debuggingForeground#ede5f2
  • statusBar.foreground#c9c3e8
  • statusBar.noFolderBackground#6b52a0
  • statusBarItem.activeBackground#6d3a7250
  • statusBarItem.hoverBackground#4b357a50
  • tab.activeBackground#4b357a
  • tab.activeBorder#e299bb
  • tab.activeForeground#ede5f2
  • tab.border#4b357a
  • tab.inactiveBackground#1f0a32
  • tab.inactiveForeground#8da4bb
  • tab.unfocusedActiveBackground#4b357a80
  • tab.unfocusedActiveForeground#c9c3e8
  • tab.unfocusedInactiveForeground#7a5f8a
  • terminal.ansiBlack#1f0a32
  • terminal.ansiBlue#8da4bb
  • terminal.ansiBrightBlack#7a5f8a
  • terminal.ansiBrightBlue#c9c3e8
  • terminal.ansiBrightCyan#a565a0
  • terminal.ansiBrightGreen#8aabdd
  • terminal.ansiBrightMagenta#e299bb
  • terminal.ansiBrightRed#d64570
  • terminal.ansiBrightWhite#ede5f2
  • terminal.ansiBrightYellow#e87a7d
  • terminal.ansiCyan#e299bb
  • terminal.ansiGreen#8aabdd
  • terminal.ansiMagenta#a565a0
  • terminal.ansiRed#e54258
  • terminal.ansiWhite#ede5f2
  • terminal.ansiYellow#e87a7d
  • terminal.background#1f0a32
  • terminal.foreground#ede5f2
  • textBlockQuote.background#4b357a20
  • textBlockQuote.border#6d3a72
  • textCodeBlock.background#4b357a40
  • textLink.activeForeground#d64570
  • textLink.foreground#e299bb
  • textPreformat.foreground#8aabdd
  • textSeparator.foreground#6d3a72
  • titleBar.activeBackground#1f0a32
  • titleBar.activeForeground#ede5f2
  • titleBar.border#4b357a
  • titleBar.inactiveBackground#1f0a32
  • titleBar.inactiveForeground#8da4bb
  • widget.shadow#1f0a3280

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8da4bbitalic
comment.block.documentation, comment.line.documentation#c9c3e8italic
variable, variable.other, variable.language.this, variable.parameter, meta.object-literal.key, support.variable#ede5f2
variable.other.property, variable.other.object.property, variable.object.property#c9c3e8
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, storage.type, storage.modifier#e299bbbold
keyword.control.flow, keyword.control.conditional, keyword.control.loop#d64570bold
entity.name.function, meta.function-call entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#8aabddbold
entity.name.function.constructor#a565a0bold
entity.name.class, entity.name.type.class, entity.name.type, support.type, support.class, support.other.namespace, entity.other.inherited-class#a565a0bold
string, string.quoted, string.template#8da4bb
string.regexp, string.other.link#6b52a0
string.template punctuation.definition.string.begin, string.template punctuation.definition.string.end, punctuation.definition.string#c66b88
constant.numeric, constant.language, constant.character, constant.other.color#e87a7d
constant.language.boolean, constant.language.null, constant.language.undefined#d64570bold
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.comparison#e299bb
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor#c9c3e8
punctuation.definition.block, punctuation.definition.group, punctuation.definition.parameters, punctuation.definition.array#c66b88
entity.name.tag, meta.tag.sgml#d64570bold
entity.other.attribute-name, entity.other.attribute-name.html#e299bb
punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end#c66b88
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#a565a0
support.type.property-name.css, meta.property-name.css#8aabdd
support.constant.property-value.css, meta.property-value.css#e87a7d
support.type.property-name.json, meta.structure.dictionary.key.json string.quoted.double.json#e299bb
variable.other.constant.js, variable.other.constant.ts#e87a7dbold
meta.import variable.other.readwrite, meta.export variable.other.readwrite#a565a0
keyword.control.import, keyword.control.export, keyword.control.from#d64570bold
punctuation.definition.template-expression, keyword.other.template#e299bb
markup.heading, entity.name.section.markdown#e299bbbold
markup.bold#d64570bold
markup.italic#a565a0italic
markup.inline.raw, markup.fenced_code#8aabdd
markup.underline.link#e299bbunderline
markup.inserted.git_gutter#8aabdd
markup.deleted.git_gutter#e54258
markup.changed.git_gutter#e87a7d
invalid, invalid.illegal, invalid.deprecated#e54258bold
constant.character.escape, constant.other.character-class.escape#6b52a0bold
*url*, *link*, *uri*#e299bbunderline
meta.decorator, punctuation.decorator#e87a7dbold
73nko Theme by 73nko - VS Code Theme