Skip to main content
Coding Theme

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#2F333D
  • activityBar.foreground#D7DAE0
  • activityBarBadge.background#528bff
  • activityBarBadge.foreground#F8FAFD
  • button.background#528bff
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#1d1f23
  • dropdown.border#181A1F
  • editor.background#282c34
  • editor.findMatchBackground#0e46ff49
  • editor.findMatchHighlightBackground#2a418da2
  • editor.lineHighlightBackground#21242b
  • editor.selectionBackground#6287ffa2
  • editorCursor.foreground#ffd000
  • editorError.background#ff000030
  • editorError.foreground#ff0000
  • editorGroup.border#181A1F
  • editorGroup.emptyBackground#181A1F
  • editorGroupHeader.tabsBackground#21252B
  • editorHoverWidget.background#21252B
  • editorHoverWidget.border#181A1F
  • editorIndentGuide.background#3B4048
  • editorLineNumber.foreground#495162
  • editorRuler.foreground#484848
  • editorSuggestWidget.background#21252B
  • editorSuggestWidget.border#181A1F
  • editorSuggestWidget.selectedBackground#2c313a
  • editorUnnecessaryCode.opacity#000000c0
  • editorWarning.background#ffff0010
  • editorWarning.foreground#ffff00
  • editorWhitespace.foreground#484a50
  • editorWidget.background#21252B
  • input.background#1d1f23
  • list.activeSelectionBackground#2c313a
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#383E4A
  • list.highlightForeground#C5C5C5
  • list.hoverBackground#292d35
  • list.inactiveSelectionBackground#2c313a
  • list.inactiveSelectionForeground#d7dae0
  • notifications.background#21252b
  • scrollbarSlider.activeBackground#747D9180
  • scrollbarSlider.background#4E566680
  • scrollbarSlider.hoverBackground#5A637580
  • sideBar.background#21252b
  • sideBarSectionHeader.background#282c34
  • statusBar.background#21252B
  • statusBar.debuggingBackground#21252B
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#21252B
  • statusBarItem.hoverBackground#2c313a
  • tab.activeBackground#383E4A
  • tab.border#181A1F
  • tab.inactiveBackground#21252B
  • terminal.ansiBlack#2d3139
  • terminal.ansiBlue#528bff
  • terminal.ansiBrightBlack#7f848e
  • terminal.ansiBrightBlue#528bff
  • terminal.ansiBrightCyan#56b6c2
  • terminal.ansiBrightGreen#98c379
  • terminal.ansiBrightMagenta#7e0097
  • terminal.ansiBrightRed#f44747
  • terminal.ansiBrightWhite#d7dae0
  • terminal.ansiBrightYellow#e5c07b
  • terminal.ansiCyan#56b6c2
  • terminal.ansiGreen#98c379
  • terminal.ansiMagenta#c678dd
  • terminal.ansiRed#e06c75
  • terminal.ansiWhite#d7dae0
  • terminal.ansiYellow#e5c07b
  • terminal.foreground#abb2bf
  • titleBar.activeBackground#282c34
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#282C34
  • titleBar.inactiveForeground#6B717D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#676f7d
variable.other.readwrite.alias, variable.other.readwrite.ts#5ea1dfitalic
support.type.property-name.json#98bbdb
support.variable.property, variable.other.property, variable.object.property, meta.object-literal.key#98bbdb
variable.other.constant.property, support.type.object.module#8ba8e2
variable.other, variable.other.object, variable.parameter.misc#86b2dbitalic
variable.other.constant#5ea1dfitalic
variable.parameter#8b8bdbitalic
keyword.other, keyword.control, keyword.operator.new, keyword.operator.logical, keyword.operator.comparison, keyword.operator.relational, keyword.operator.arithmetic, keyword.operator.increment, keyword.operator.decrement, keyword.operator.bitwise, keyword.operator.ternary, keyword.operator.c, keyword.operator.assignment#b9528bbold
storage.modifier, storage.type, keyword.operator.instanceof, keyword.operator.expression#cf5f7bbold italic
variable.language, constant.language, support.constant.property-value, support.constant.media#914c8bbold
support.constant.math, support.constant.dom, support.constant.json, support.class.builtin#daa74abold
support.type.builtin, support.type.primitive, storage.type.primitive#8fd48dbold
meta.brace.round, meta.brace.square, punctuation.definition.block, punctuation.accessor, meta.template.expression, punctuation.definition.bracket.curly.begin.jsdoc, punctuation.definition.bracket.curly.end.jsdoc, punctuation.separator.java#abb2bf
constant.numeric#c9cf93
string.template, string.quoted#d4ba82
constant.character#dfcda8bold
keyword.operator.optional, keyword.operator.type, keyword.operator.definiteassignment, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded, punctuation.definition.tag#525a69
entity.name.type.namespace#caba53bold
entity.name.type.class, entity.name.class, support.class, entity.other.inherited-class#daa74abold
entity.name.type.interface#cec073bold
entity.name.type.annotation#ccdb88bold
entity.name.type.enum#c08cc0bold
entity.name.type.typeParameter#ddb383bold
entity.name.type#8cc7acbold
entity.name.function#af8bd1
string.regexp#d45d5d
constant.other.character-class.regexp#da8b8bbold
punctuation.definition.group.regexp#aacc8a
constant.other.character-class.set.regexp#6ea5bb
constant.other.character-class.range.regexp#8bc9e2
keyword.operator.or.regexp#d39969
keyword.operator.quantifier.regexp#dbbf81
log.info#5284c5
log.error#c55252
log.warning#c5c352
support.type.property-name#da7f7f
support.type.vendored.property-name#dfbd92bold
support.constant.font-name#ff768dbold
support.function#af8bd1
support.constant.color, constant.other.color#e5e5f0bold
variable.other.jsdoc#7480ecitalic
entity.name.type.instance.jsdoc#bddb8d
entity.name.tag#5ea1df
entity.other.attribute-name#98bbdbbold
entity.other.attribute-name.namespace#c5b653bold
Equilibrium by Light - VS Code Theme