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#182231
  • activityBar.border#111827
  • activityBar.foreground#e5e7eb
  • activityBar.inactiveForeground#94a3b8
  • badge.background#67e8f9
  • badge.foreground#06242b
  • descriptionForeground#b6c2cf
  • dropdown.background#111827cc
  • dropdown.border#374151
  • dropdown.foreground#f8fafc
  • editor.background#1f2937
  • editor.findMatchBackground#f59e0b55
  • editor.findMatchHighlightBackground#f59e0b33
  • editor.foreground#e5e7eb
  • editor.hoverHighlightBackground#67e8f914
  • editor.inactiveSelectionBackground#22d3ee22
  • editor.lineHighlightBackground#0b122033
  • editor.selectionBackground#22d3ee33
  • editor.wordHighlightBackground#38bdf826
  • editor.wordHighlightStrongBackground#38bdf840
  • editorBracketMatch.background#67e8f91f
  • editorBracketMatch.border#67e8f966
  • editorCursor.foreground#67e8f9
  • editorGroupHeader.tabsBackground#1b2636
  • editorIndentGuide.activeBackground1#64748b
  • editorIndentGuide.background1#374151
  • editorLineNumber.activeForeground#cbd5e1
  • editorLineNumber.foreground#64748b
  • editorOverviewRuler.errorForeground#fb7185cc
  • editorOverviewRuler.infoForeground#60a5facc
  • editorOverviewRuler.warningForeground#f59e0bcc
  • errorForeground#fb7185
  • focusBorder#67e8f9
  • foreground#e5e7eb
  • gitDecoration.addedResourceForeground#86efac
  • gitDecoration.deletedResourceForeground#fb7185
  • gitDecoration.ignoredResourceForeground#94a3b8
  • gitDecoration.modifiedResourceForeground#60a5fa
  • gitDecoration.untrackedResourceForeground#67e8f9
  • input.background#11182780
  • input.border#374151
  • input.foreground#f8fafc
  • input.placeholderForeground#94a3b8
  • list.activeSelectionBackground#22d3ee33
  • list.activeSelectionForeground#f8fafc
  • list.hoverBackground#11182766
  • list.hoverForeground#f8fafc
  • list.inactiveSelectionBackground#11182740
  • notificationCenterHeader.background#182231
  • notifications.background#111827cc
  • notifications.border#374151
  • notifications.foreground#f8fafc
  • panel.background#1b2636
  • panel.border#111827
  • sideBar.background#182231
  • sideBar.border#111827
  • sideBar.foreground#e5e7eb
  • sideBarTitle.foreground#f8fafc
  • statusBar.background#182231
  • statusBar.border#111827
  • statusBar.debuggingBackground#1d4ed8
  • statusBar.debuggingForeground#f8fafc
  • statusBar.foreground#e5e7eb
  • tab.activeBackground#1f2937
  • tab.activeBorderTop#67e8f9
  • tab.activeForeground#f8fafc
  • tab.border#111827
  • tab.inactiveBackground#1b2636
  • tab.inactiveForeground#cbd5e1
  • terminal.ansiBlack#111827
  • terminal.ansiBlue#60a5fa
  • terminal.ansiCyan#67e8f9
  • terminal.ansiGreen#86efac
  • terminal.ansiMagenta#f0abfc
  • terminal.ansiRed#fb7185
  • terminal.ansiWhite#f8fafc
  • terminal.ansiYellow#fdba74
  • terminal.background#1b2636
  • terminal.foreground#e5e7eb
  • terminalCursor.foreground#67e8f9
  • titleBar.activeBackground#182231
  • titleBar.activeForeground#e5e7eb
  • titleBar.inactiveBackground#182231
  • titleBar.inactiveForeground#94a3b8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#94a3b8italic
string, punctuation.definition.string#86efac
string.template, punctuation.definition.template-expression, punctuation.section.embedded, meta.template.expression#67e8f9
constant.numeric#fdba74
constant.language#f0abfc
keyword, storage.type, storage.modifier, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#67e8f9
keyword.operator, punctuation, meta.brace, meta.delimiter#cbd5e1
entity.name.function, support.function, meta.function-call, meta.method-call#60a5fa
variable.parameter, meta.parameters, meta.function.parameters#f8fafc
variable, meta.definition.variable, entity.name.variable#f8fafc
variable.other.constant, entity.name.constant#fdba74
entity.name.type, support.type, support.class, entity.name.class, entity.name.interface, entity.name.struct, entity.name.enum#c7d2fe
entity.name.type.parameter, meta.type.parameters, meta.type.annotation#67e8f9
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#67e8f9
variable.language.this, variable.language.super, variable.language.self#f0abfc
variable.other.property, support.variable.property#c7d2fe
entity.name.tag#67e8f9
entity.other.attribute-name#c7d2fe
invalid, invalid.deprecated#fb7185underline
support.type.property-name.json, meta.object-literal.key.json string.quoted.double.json, meta.object.member.json string.quoted.double.json#c7d2fe
meta.object-literal.value.json string.quoted.double.json, meta.array.literal.json string.quoted.double.json, string.quoted.double.json#86efac
constant.numeric.json#fdba74
constant.language.boolean.json, constant.language.null.json, constant.language.json#f0abfc
punctuation.support.type.property-name.json, punctuation.separator.dictionary.key-value.json, punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json, punctuation.definition.array.begin.json, punctuation.definition.array.end.json, punctuation.separator.array.json#cbd5e1
markup.heading, entity.name.section.markdown, markup.heading.markdown punctuation.definition.heading.markdown#67e8f9bold
markup.bold, punctuation.definition.bold#f8fafcbold
markup.italic, punctuation.definition.italic#f8fafcitalic
markup.inline.raw, markup.inline.raw.string.markdown#86efac
markup.fenced_code.block, markup.raw.block#e5e7eb
markup.underline.link, meta.link.inline, meta.link.reference#60a5faunderline
markup.inserted, diff.inserted, meta.diff.header.to-file#86efac
markup.deleted, diff.deleted, meta.diff.header.from-file#fb7185
markup.changed, diff.changed#fdba74
comment.keyword.todo, comment.keyword.fixme, comment.keyword.note, keyword.other.todo, keyword.other.fixme, keyword.other.note#fdba74bold
string.regexp, string.regexp keyword.other, string.regexp punctuation.definition.string, string.regexp punctuation.definition.group, string.regexp punctuation.definition.character-class, string.regexp constant.character.escape#67e8f9
Tidelight Theme Pack by Slow Clap Software - VS Code Theme