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#1e2838
  • activityBar.border#1e2838
  • activityBar.foreground#b5cbe9
  • activityBarBadge.background#1e2838
  • button.background#80aed5
  • button.foreground#1e2838
  • diffEditor.insertedLineBackground#59b06f52
  • diffEditor.insertedTextBackground#57be7352
  • diffEditor.removedLineBackground#ab344052
  • diffEditor.removedTextBackground#e95d6752
  • dropdown.background#1e2838
  • dropdown.border#b2b2b2
  • dropdown.listBackground#1e2838
  • editor.background#1e2838
  • editor.findMatchBackground#2b5148
  • editor.findMatchHighlightBackground#83652293
  • editor.findRangeHighlightBackground#0e13214d
  • editor.foreground#b5cbe9
  • editor.hoverHighlightBackground#add6ff26
  • editor.inactiveSelectionBackground#253a5a80
  • editor.inlineValuesBackground#ffc80033
  • editor.inlineValuesForeground#b5cbe980
  • editor.lineHighlightBackground#232f43
  • editor.lineHighlightBorder#232f43
  • editor.rangeHighlightBackground#0e132133
  • editor.selectionBackground#253a5a
  • editor.snippetFinalTabstopHighlightBackground#253a5a3f
  • editor.snippetTabstopHighlightBackground#253a5a3f
  • editor.stackFrameHighlightBackground#ffff6673
  • editor.symbolHighlightBackground#ea5c0055
  • editor.wordHighlightBackground#b0b9cf40
  • editor.wordHighlightStrongBackground#ffd09e40
  • editor.wordHighlightTextBackground#b0b9cf40
  • editorBracketMatch.background#88721a
  • editorBracketMatch.border#b5cbe900
  • editorGroup.border#1e2838
  • editorGroupHeader.noTabsBackground#1e2838
  • editorGroupHeader.tabsBackground#1e2838
  • editorGroupHeader.tabsBorder#1e2838
  • editorIndentGuide.activeBackground1#5d7dab33
  • editorIndentGuide.background1#394f6d33
  • editorLineNumber.activeForeground#b5cbe9
  • editorLineNumber.foreground#5f7ca7
  • editorSuggestWidget.highlightForeground#80aed5
  • editorSuggestWidget.selectedBackground#232f43
  • editorWidget.background#1e2838
  • editorWidget.border#b5cbe9
  • focusBorder#1e283800
  • foreground#b5cbe9
  • input.background#1e2838
  • input.border#b2b2b2
  • inputOption.activeBorder#b5cbe9
  • inputOption.activeForeground#b5cbe9
  • list.activeSelectionBackground#232f43
  • list.activeSelectionForeground#80aed5
  • list.focusBackground#232f43
  • list.focusForeground#80aed5
  • list.highlightForeground#80aed5
  • list.hoverBackground#232f43
  • list.hoverForeground#80aed5
  • list.inactiveSelectionBackground#232f43
  • list.inactiveSelectionForeground#80aed5
  • notificationCenter.border#1e2838
  • notificationCenterHeader.background#1e2838
  • notifications.background#1e2838
  • notifications.border#1e2838
  • notificationToast.border#1e2838
  • panel.border#80aed5
  • scrollbar.shadow#1e2838
  • scrollbarSlider.activeBackground#2e3e6c99
  • scrollbarSlider.background#3b507466
  • scrollbarSlider.hoverBackground#3b5074b3
  • sideBar.background#1e2838
  • sideBar.border#1e2838
  • sideBar.foreground#80aed5
  • sideBarSectionHeader.background#1e2838
  • statusBar.background#1e2838
  • statusBar.border#1e2838
  • statusBar.debuggingBackground#1e2838
  • statusBar.debuggingForeground#b5cbe9
  • statusBar.foreground#b5cbe9
  • statusBar.noFolderBackground#1e2838
  • statusBar.noFolderForeground#b5cbe9
  • tab.activeBackground#1e2838
  • tab.activeBorder#80aed5
  • tab.activeForeground#80aed5
  • tab.border#1e2838
  • tab.inactiveBackground#1e2838
  • titleBar.activeBackground#1e2838
  • titleBar.activeForeground#b5cbe9
  • titleBar.border#1e2838
  • titleBar.inactiveBackground#1e2838
  • titleBar.inactiveForeground#b5cbe9

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#71849f—
entity.name.constant, variable.language, keyword.operator.new#95b3e8italic
variable.other.constant#b5cbe9—
constant#7ac09e—
constant.language.null, constant.language.undefined#7aa89d—
punctuation.accessor, punctuation.separator.comma, punctuation.separator.parameter#8bade8—
keyword.operator.symbole, keyword.other.mark#b5cbe9—
entity, entity.name#d593ff—
entity.name.type#e575c3—
entity.name.type.alias, entity.name.type.interface, entity.name.type.class#d593ff—
meta.type punctuation.accessor, punctuation.definition.typeparameters, meta.type.parameters punctuation.separator.comma#b5cbe9—
meta.field.declaration meta.definition.property entity.name, meta.object-literal.key entity.name#b5cbe9—
meta.object-literal.key entity.name.function#d593ff—
meta.type.tuple entity.name.label, punctuation.terminator.statement#677281—
variable.parameter.function#b5cbe9—
entity.name.tag, entity.name.tag support.class.component, support.class.component.astro#bdff95—
punctuation.definition.tag#7add3c—
keyword#ff6983—
storage, storage.type#ff6983—
storage.type.function.arrow#D593FF—
storage.modifier.package, storage.modifier.import, storage.type.java#b5cbe9—
string, punctuation.definition.string, string punctuation.section.embedded source#7ac09e—
punctuation.definition.template-expression#53afff—
string.unquoted.import.ada——
support#ffa850—
support.class#b5cbe9—
meta.class support.class, meta.class entity.other.inherited-class, meta.interface support.class, meta.interface entity.other.inherited-class#e575c3—
meta.property-name#53afff—
variable#b5cbe9—
variable.other#b5cbe9—
variable.object.property#b5cbe9—
invalid.broken#b31d28bold italic underline
invalid.deprecated#b31d28bold italic underline
invalid.illegal#b31d28italic underline
carriage-return#ff6983italic underline
invalid.unimplemented#b31d28bold italic underline
message.error#b31d28—
string source#b5cbe9—
string variable#53afff—
support.constant#53afff—
support.variable#b5cbe9—
meta.module-reference#53afff—
markup.list#735c0f—
markup.heading, markup.heading entity.name#53afffbold
markup.quote#20c173—
markup.italic#b5cbe9italic
markup.bold#b5cbe9bold
markup.raw#53afff—
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#b31d28—
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#20c173—
markup.changed, punctuation.definition.changed#ffa850—
markup.ignored, markup.untracked#53afff—
meta.diff.range#d593ffbold
meta.diff.header#53afff—
meta.separator#53afffbold
meta.brace.square#53afff—
meta.type meta.brace.square#e69acf—
meta.output#53afff—
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#586069—
brackethighlighter.unmatched#b31d28—
sublimelinter.mark.error#b31d28—
sublimelinter.mark.warning#ffa850—
sublimelinter.gutter-mark#959da5—
constant.other.reference.link, string.other.link#7ea7edunderline
meta.function-call support.function, meta.function-call entity.name.function#53afff—
keyword.operator, keyword.operator.expression.in#20c173—
keyword.operator.logical, keyword.operator.assignment, keyword.operator.ternary, keyword.operator.expression, keyword.operator.increment, keyword.operator.decrement, punctuation.separator.label, punctuation.separator.key-value, punctuation.destructuring, meta.type storage.modifier#ff6983
meta.var storage.type, keyword.control.flow, keyword.operator.type, keyword.operator.optional, keyword.operator.definiteassignment, keyword.operator.expression.infer#f08f6c—
meta.object.type punctuation.definition.block, meta.object.type keyword.operator.spread, meta.objectliteral meta.object.member meta.block punctuation.definition.block, meta.objectliteral meta.method.declaration meta.block punctuation.definition.block#b5cbe9—
meta.objectliteral punctuation.definition.block, meta.object keyword.operator.spread#ff8b4d—
punctuation.section.embedded#55719f—
punctuation.definition.section#91a4bf—
entity.other.attribute-name#7ea7ed—
variable.parameter, entity.name.label#d2a6ed—
meta.tag.attributes keyword.operator.assignment#7ea7ed—
storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc#ca89aa—
meta.decorator, meta.decorator variable.other#8dc4ff—
source.json meta.structure.dictionary.json support.type.property-name#53afff—
source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary support.type.property-name#d593ff—
source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary.json support.type.property-name#e575c3—
source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary.json support.type.property-name#53afff—
source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary.json support.type.property-name#d593ff—
source.json meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary meta.structure.dictionary.value meta.structure.dictionary.json support.type.property-name#e575c3—
punctuation.support.type.property-name#b5cbe9—
punctuation.definition.array#ff8b4d—
punctuation.separator.dictionary.key-value.json, punctuation.separator.dictionary.pair.json, punctuation.separator.array.json#91a4bf—
source.css keyword.other.unit#7ac09e—
source.css support.constant, source.css meta.property-value#d593ff—
source.css support.type.property-name, source.css support.type.vendored#b5cbe9—
source.css support.function, source.css entity.other.attribute-name.pseudo-class, source.css entity.other.attribute-name.pseudo-element#53afff—
source.css punctuation.terminator, source.css punctuation.separator.key-value#91a4bf—
source.css meta.attribute-selector keyword.operator.pattern#20c173—