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#060a12
  • activityBar.border#1e293b
  • activityBar.foreground#e2e8f0
  • activityBar.inactiveForeground#64748b
  • badge.background#22d3ee
  • badge.foreground#06242b
  • descriptionForeground#a1a1aa
  • dropdown.background#0b1220
  • dropdown.border#111827
  • dropdown.foreground#f8fafc
  • editor.background#070b14
  • editor.findMatchBackground#f59e0b40
  • editor.findMatchHighlightBackground#f59e0b26
  • editor.foreground#e2e8f0
  • editor.hoverHighlightBackground#22d3ee14
  • editor.inactiveSelectionBackground#0891b220
  • editor.lineHighlightBackground#0b1220a6
  • editor.selectionBackground#0891b233
  • editor.wordHighlightBackground#38bdf81f
  • editor.wordHighlightStrongBackground#38bdf830
  • editorBracketMatch.background#22d3ee24
  • editorBracketMatch.border#22d3ee80
  • editorCursor.foreground#22d3ee
  • editorGroupHeader.tabsBackground#070b14
  • editorIndentGuide.activeBackground1#334155
  • editorIndentGuide.background1#111827
  • editorLineNumber.activeForeground#a1a1aa
  • editorLineNumber.foreground#1f2a3d
  • editorOverviewRuler.errorForeground#fb7185cc
  • editorOverviewRuler.infoForeground#38bdf8cc
  • editorOverviewRuler.warningForeground#f59e0bcc
  • errorForeground#fb7185
  • focusBorder#22d3ee
  • foreground#e2e8f0
  • gitDecoration.addedResourceForeground#a3e635
  • gitDecoration.deletedResourceForeground#fb7185
  • gitDecoration.ignoredResourceForeground#64748b
  • gitDecoration.modifiedResourceForeground#38bdf8
  • gitDecoration.untrackedResourceForeground#22d3ee
  • input.background#0b1220
  • input.border#111827
  • input.foreground#f8fafc
  • input.placeholderForeground#64748b
  • list.activeSelectionBackground#0891b233
  • list.activeSelectionForeground#f8fafc
  • list.hoverBackground#0b1220
  • list.hoverForeground#f8fafc
  • list.inactiveSelectionBackground#0b1220
  • notificationCenterHeader.background#060a12
  • notifications.background#0b1220
  • notifications.border#111827
  • notifications.foreground#f8fafc
  • panel.background#070b14
  • panel.border#1e293b
  • sideBar.background#020408
  • sideBar.border#1e293b
  • sideBar.foreground#e2e8f0
  • sideBarTitle.foreground#f8fafc
  • statusBar.background#060a12
  • statusBar.border#1e293b
  • statusBar.debuggingBackground#1d4ed8
  • statusBar.debuggingForeground#f8fafc
  • statusBar.foreground#e2e8f0
  • tab.activeBackground#0b1220
  • tab.activeBorderTop#22d3ee
  • tab.activeForeground#f8fafc
  • tab.border#0b1220
  • tab.inactiveBackground#070b14
  • tab.inactiveForeground#a1a1aa
  • terminal.ansiBlack#0b1220
  • terminal.ansiBlue#38bdf8
  • terminal.ansiCyan#22d3ee
  • terminal.ansiGreen#a3e635
  • terminal.ansiMagenta#f472b6
  • terminal.ansiRed#fb7185
  • terminal.ansiWhite#f8fafc
  • terminal.ansiYellow#f59e0b
  • terminal.background#070b14
  • terminal.foreground#e2e8f0
  • terminalCursor.foreground#22d3ee
  • titleBar.activeBackground#060a12
  • titleBar.activeForeground#e2e8f0
  • titleBar.inactiveBackground#060a12
  • titleBar.inactiveForeground#64748b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#64748bitalic
string, punctuation.definition.string#a3e635
string.template, punctuation.definition.template-expression, punctuation.section.embedded, meta.template.expression#22d3ee
constant.numeric#f59e0b
constant.language#f472b6
keyword, storage.type, storage.modifier, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical#22d3ee
keyword.operator, punctuation, meta.brace, meta.delimiter#b6c2cf
entity.name.function, support.function, meta.function-call, meta.method-call#38bdf8
variable.parameter, meta.parameters, meta.function.parameters#f8fafc
variable, meta.definition.variable, entity.name.variable#f8fafc
variable.other.constant, entity.name.constant#f59e0b
entity.name.type, support.type, support.class, entity.name.class, entity.name.interface, entity.name.struct, entity.name.enum#93c5fd
entity.name.type.parameter, meta.type.parameters, meta.type.annotation#22d3ee
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#22d3ee
variable.language.this, variable.language.super, variable.language.self#f472b6
variable.other.property, support.variable.property#a5b4fc
entity.name.tag#22d3ee
entity.other.attribute-name#93c5fd
invalid, invalid.deprecated#fb7185underline
markup.heading, entity.name.section#22d3eebold
markup.bold, markup.italic#e2e8f0
markup.inline.raw, markup.fenced_code.block, markup.raw.block#a3e635
markup.underline.link, string.other.link, meta.link.inline#38bdf8underline
markup.inserted, meta.diff.header.from-file, punctuation.definition.inserted#a3e635
markup.deleted, meta.diff.header.to-file, punctuation.definition.deleted#fb7185
markup.changed, punctuation.definition.changed#f59e0b
meta.diff.header, meta.diff.range, meta.diff.index#93c5fd
comment.keyword.todo, comment.keyword.fixme, comment.keyword.note, keyword.other.todo, keyword.other.fixme, keyword.other.note#f59e0bbold
support.type.property-name.json, meta.object-literal.key.json string.quoted.double.json, meta.object.member.json string.quoted.double.json#a5b4fc
meta.object-literal.value.json string.quoted.double.json, meta.array.literal.json string.quoted.double.json, string.quoted.double.json#a3e635
constant.numeric.json#f59e0b
constant.language.boolean.json, constant.language.null.json, constant.language.json#f472b6
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#b6c2cf
Tidelight Theme Pack by Slow Clap Software - VS Code Theme