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.activeBackground#222831
  • activityBar.activeBorder#444c56
  • activityBar.background#181e26
  • activityBar.foreground#888e98
  • activityBarBadge.background#005299
  • activityBarBadge.foreground#ccced2
  • badge.background#005299
  • badge.foreground#ccced2
  • breadcrumb.background#20272f
  • breadcrumb.focusForeground#ccced2
  • breadcrumb.foreground#888e98
  • button.background#005299
  • button.border#005299
  • button.foreground#ccced2
  • button.hoverBackground#0077dd
  • button.secondaryBackground#333943
  • button.secondaryForeground#ccced2
  • button.secondaryHoverBackground#444c56
  • checkbox.foreground#ccced2
  • debugToolBar.background#111820
  • debugToolBar.border#ccced2
  • diffEditor.insertedTextBorder#bb900040
  • diffEditor.removedTextBorder#aa000040
  • diffEditorGutter.insertedLineBackground#bb900040
  • diffEditorGutter.removedLineBackground#aa000040
  • dropdown.border#333943
  • dropdown.foreground#888e98
  • dropdown.listBackground#333943
  • editor.background#20272f
  • editor.findMatchBackground#222831
  • editor.findMatchBorder#ffffff
  • editor.findMatchForeground#ccced2
  • editor.findMatchHighlightBackground#aa000099
  • editor.findMatchHighlightBorder#aa0000
  • editor.foreground#ffffff99
  • editor.lineHighlightBackground#181e26
  • editor.selectionHighlightBackground#ffffff25
  • editor.selectionHighlightBorder#ffffff50
  • editor.wordHighlightBackground#ffffff15
  • editor.wordHighlightBorder#ffffff50
  • editor.wordHighlightStrongBackground#ffffff15
  • editor.wordHighlightStrongBorder#ffffff
  • editorBracketHighlight.foreground1#b5a444
  • editorBracketHighlight.foreground2#B57EDC
  • editorBracketHighlight.foreground3#d6474a
  • editorBracketHighlight.foreground4#d18016
  • editorBracketHighlight.unexpectedBracket.foreground#ffffff
  • editorBracketMatch.background#000000
  • editorBracketMatch.border#666d78
  • editorBracketPairGuide.activeBackground1#c1ad3b77
  • editorBracketPairGuide.activeBackground2#ae4bc688
  • editorBracketPairGuide.activeBackground3#d1343488
  • editorBracketPairGuide.activeBackground4#d1801677
  • editorCursor.background#ffffff
  • editorCursor.foreground#ccced2
  • editorError.foreground#ff4f4f
  • editorGroup.border#666d78
  • editorGroupHeader.border#111820
  • editorGroupHeader.tabsBackground#222831
  • editorGroupHeader.tabsBorder#333943
  • editorIndentGuide.activeBackground1#888e98
  • editorIndentGuide.background1#666d7850
  • editorInfo.foreground#77bbff
  • editorLineNumber.activeForeground#888e98
  • editorLineNumber.foreground#888e9860
  • editorOverviewRuler.background#181e26
  • editorOverviewRuler.border#222831
  • editorRuler.foreground#ffffff05
  • editorWarning.foreground#ffd500
  • editorWidget.background#181e26
  • editorWidget.resizeBorder#005299
  • extensionButton.background#005299
  • extensionButton.foreground#ccced2
  • extensionButton.hoverBackground#0077dd
  • focusBorder#0077dd
  • foreground#999fa9
  • gitDecoration.addedResourceForeground#27aa5b
  • gitDecoration.deletedResourceForeground#ccced2
  • gitDecoration.modifiedResourceForeground#d4b35e
  • gitDecoration.stageDeletedResourceForeground#ccced2
  • gitDecoration.stageModifiedResourceForeground#d4b35e
  • gitDecoration.untrackedResourceForeground#999fa9
  • icon.foreground#999fa9
  • input.background#222831
  • input.border#333943
  • input.placeholderForeground#888e98
  • inputOption.activeBackground#0077dd
  • inputOption.activeForeground#ffffff
  • inputValidation.errorBackground#aa000080
  • inputValidation.errorBorder#aa0000
  • inputValidation.errorForeground#ffffff
  • inputValidation.infoBackground#007acc80
  • inputValidation.infoBorder#007acc
  • inputValidation.infoForeground#ffffff
  • inputValidation.warningBackground#bb900080
  • inputValidation.warningBorder#bb9000
  • inputValidation.warningForeground#ffffff
  • list.activeSelectionBackground#005299
  • list.activeSelectionForeground#ccced2
  • list.highlightForeground#0077dd
  • list.hoverBackground#333943
  • list.hoverForeground#ccced2
  • list.inactiveSelectionBackground#444c56
  • list.inactiveSelectionForeground#ccced2
  • menu.background#222831
  • menu.border#444c56
  • menu.foreground#ccced2
  • menu.selectionBackground#005299
  • menu.selectionBorder#444c56
  • menubar.selectionBackground#005299
  • menubar.selectionForeground#ccced2
  • minimap.errorHighlight#ffffff
  • minimap.findMatchHighlight#fffffffe
  • minimap.warningHighlight#bb9000
  • notificationCenter.border#333943
  • panel.background#111820
  • panel.border#20272f
  • panelTitle.activeBorder#888e98
  • panelTitle.activeForeground#ccced2
  • panelTitle.inactiveForeground#666d78
  • pickerGroup.border#444c56
  • pickerGroup.foreground#0077dd
  • progressBar.background#005299
  • quickInput.foreground#888e98
  • scrollbarSlider.background#ffffff40
  • selection.background#005299
  • settings.dropdownBorder#444c56
  • settings.dropdownForeground#ccced2
  • settings.headerBorder#444c56
  • settings.modifiedItemIndicator#0077dd
  • sideBar.background#111820
  • sideBar.border#222831
  • sideBar.foreground#888e98
  • sideBarSectionHeader.background#20272f
  • sideBarSectionHeader.border#111820
  • statusBar.background#444c56
  • statusBar.debuggingBackground#73091d
  • statusBar.debuggingForeground#ccced2
  • statusBar.foreground#ccced2
  • statusBar.noFolderBackground#595dab
  • statusBar.noFolderForeground#ccced2
  • statusBarItem.errorBackground#aa0000
  • statusBarItem.errorForeground#ffffff
  • statusBarItem.hoverForeground#ffffff
  • statusBarItem.warningBackground#bb9000
  • statusBarItem.warningForeground#111820
  • tab.activeBackground#444c56
  • tab.activeBorder#888e98
  • tab.activeForeground#ccced2
  • tab.border#111820
  • tab.hoverBackground#444c56
  • tab.hoverForeground#ccced2
  • tab.inactiveBackground#333943
  • tab.inactiveForeground#999fa9
  • terminal.ansiBlack#222222
  • terminal.ansiBlue#60afee
  • terminal.ansiBrightBlack#444444
  • terminal.ansiBrightBlue#609ac2
  • terminal.ansiBrightCyan#55b8c5
  • terminal.ansiBrightGreen#0caba8
  • terminal.ansiBrightMagenta#595dab
  • terminal.ansiBrightRed#e28845
  • terminal.ansiBrightWhite#ffffffcc
  • terminal.ansiBrightYellow#d5c595
  • terminal.ansiCyan#55b8c5
  • terminal.ansiGreen#27aa5b
  • terminal.ansiMagenta#c564b7
  • terminal.ansiRed#f3395c
  • terminal.ansiWhite#ffffff88
  • terminal.ansiYellow#d4b35e
  • terminal.background#08090c
  • terminal.foreground#888e98
  • terminal.selectionBackground#005299
  • textBlockQuote.border#0077dd
  • textLink.activeForeground#0077dd
  • textLink.foreground#0077dd
  • titleBar.activeBackground#181e26
  • titleBar.activeForeground#888e98
  • titleBar.border#333943
  • titleBar.inactiveBackground#003666
  • titleBar.inactiveForeground#ccced2
  • toolbar.hoverBackground#444c56
  • tree.indentGuidesStroke#666d78
  • widget.shadow#060606

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#ffffff35italic
string.template, meta.property-value—italic
punctuation.definition.template-expression, meta.template.expression—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation, punctuation.definition.keyword, punctuation.definition.tag#ffffff55—
keyword, punctuation.definition.string, storage.type, storage.modifier, keyword.operator.type.annotation, keyword.operator.optional#ffffff88—
keyword.operator, keyword.operator.expression, keyword.operator.new, meta.property-value, meta.jsx.children.js.jsx#ffffff99—
keyword.control, constant.numeric, support.variable.property, punctuation.definition.entity.css#ffffffcc—
variable.other, variable.other.constant, variable.other.readwrite, constant.other.enum, support.type.property-name.json#60afee—
support.function, entity.name.function, entity.name.tag, meta.selector.css#27aa5b—
keyword.control.flow, entity.name.type, entity.name.type.class, storage.type.object.array.java, storage.type.java, storage.type.generic.java, storage.type.function.arrow, keyword.operator.ternary, keyword.operator.logical, meta.attribute.id, entity.other.attribute-name.id, keyword.other.debugger, entity.name.type.alias, entity.name.type.enum, entity.name.type.record, entity.name.function.constructor#f3395c—
keyword.other.important.css#f3395cbold
string#d4b35e—
string.template, variable.other.object, constant.character.entity, storage.type.annotation, punctuation.definition.annotation, entity.name.package, entity.name.namespace#d5c595—
variable.other.property, variable.other.object.property, meta.class.body.java variable.other.definition, entity.name.type.type-parameter, meta.attribute.class, entity.other.attribute-name.class#e28845—
variable.language, variable.language.this, variable.language.super, meta.tag.metadata.doctype entity.name.tag, meta.tag.structure.html entity.name.tag, meta.tag.structure.head entity.name.tag, meta.tag.structure.body entity.name.tag, meta.tag.structure.header entity.name.tag, meta.tag.structure.main entity.name.tag, meta.tag.structure.nav entity.name.tag, meta.tag.structure.section entity.name.tag, meta.tag.structure.article entity.name.tag, meta.tag.structure.footer entity.name.tag, meta.tag.structure.div entity.name.tag, meta.tag.structure.form entity.name.tag, meta.tag.structure.figure entity.name.tag, meta.tag.js entity.name.tag.js, meta.tag.jsx entity.name.tag.jsx#c564b7—
entity.name.type.interface#c564b7italic
variable.parameter, constant.language, constant.language.boolean, constant.language.null, entity.other.attribute-name.js.jsx, meta.attribute, support.type.property-name.css#609ac2—
support.type.primitive, storage.type.primitive, storage.type.primitive.array.java, storage.type.void.java, support.type, support.class, support.class.component.js.jsx, support.class.component.tsx#0caba8—
string.regexp, constant.character.escape.backslash.regexp#ffffffaa—
string.regexp keyword.other, punctuation.definition.string.regexp keyword.other, punctuation.definition.group.regexp#ffffff40—
constant.other.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.range.regexp#e7c463dd—
punctuation.definition.character-class.regexp, punctuation.definition.group.no-capture.regexp#ddaa20bb—
keyword.operator.negation.regexp, keyword.operator.or.regexp, meta.assertion.negative-look-ahead.regexp#ff6161bb—
keyword.control.anchor.regexp#ff0000AA—
meta.assertion.look-ahead.regexp#33c049bb—
keyword.operator.quantifier.regexp#3392e499—
keyword.other.back-reference.regexp#d55fdecc—
meta.paragraph#ffffff99—
markup.bold#ffffffccbold
markup.italic—italic
markup.bold markup.italic, markup.italic markup.bold—bold italic
punctuation.definition#ffffff35—
meta.separator#ffffff35bold
markup.heading, entity.name.section, heading.1 punctuation.definition#f3395c—
heading.1—bold
string.other.link.title, string.other.link.description#60afee—
markup.underline.link, markup.underline.link.image#595dabitalic underline
markup.inline.raw, markup.raw.block#d5c595—
markup.fenced_code#609ac2—
entity.name.tag.yaml#60afee—
markup.quote, markup.quote meta.paragraph#d4b35eitalic
punctuation.definition.list.begin#27aa5b—
keyword.other.documentation, keyword.other.javadoc, comment.block.javadoc keyword.other, storage.type.annotation.javadoc#d5c595—
variable.other.javadoc, comment.block.javadoc variable.other#609ac2—
Lascavo Dark Theme by mdrsh - VS Code Theme