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