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.activeBackground#1A1625
  • activityBar.activeBorder#6EB8FF
  • activityBar.activeFocusBorder#00000000
  • activityBar.background#0F0D16
  • activityBar.border#00000000
  • activityBar.foreground#6EB8FF
  • activityBar.inactiveForeground#4A5A70
  • activityBarBadge.background#6EB8FF
  • activityBarBadge.foreground#000000
  • button.background#5C78FF
  • button.border#00000000
  • button.focusOutline#00000000
  • button.foreground#FFFFFF
  • button.hoverBackground#5C78FF
  • commandCenter.activeBackground#1A1625
  • commandCenter.activeBorder#00000000
  • commandCenter.activeForeground#99D4FF
  • commandCenter.background#0F0D16
  • commandCenter.border#00000000
  • commandCenter.foreground#6EB8FF
  • commandCenter.inactiveForeground#4A5A70
  • contrastActiveBorder#00000000
  • contrastBorder#00000000
  • dropdown.background#0F0D16
  • dropdown.border#00000000
  • dropdown.foreground#C5C9D1
  • dropdown.listBackground#1C1826
  • editor.background#1A1625
  • editor.findMatchBackground#5C78FF40
  • editor.findMatchHighlightBackground#5C78FF20
  • editor.foreground#C5C9D1
  • editor.hoverHighlightBackground#2A243A
  • editor.inactiveSelectionBackground#252034
  • editor.lineHighlightBackground#1E1A2A
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#2A243A20
  • editor.selectionBackground#2D2640
  • editor.selectionHighlightBackground#2A243A
  • editor.wordHighlightBackground#2D2640
  • editor.wordHighlightStrongBackground#3A3050
  • editorBracketMatch.background#5C78FF30
  • editorBracketMatch.border#5C78FF
  • editorCursor.foreground#A070FF
  • editorIndentGuide.activeBackground#5C78FF
  • editorIndentGuide.background#2A2438
  • editorLineNumber.activeForeground#A89FC8
  • editorLineNumber.foreground#6A6482
  • editorRuler.foreground#2A2438
  • editorWhitespace.foreground#3A3048
  • focusBorder#00000000
  • input.background#1C1826
  • input.border#00000000
  • input.foreground#C5C9D1
  • input.placeholderForeground#6A6482
  • inputOption.activeBackground#2D2640
  • inputOption.activeBorder#00000000
  • inputOption.activeForeground#C5C9D1
  • inputValidation.errorBackground#1C1826
  • inputValidation.errorBorder#FF5F87
  • inputValidation.warningBackground#1C1826
  • inputValidation.warningBorder#FFB347
  • list.activeSelectionBackground#2D2640
  • list.activeSelectionForeground#E0E4EB
  • list.focusBackground#2D2640
  • list.focusOutline#00000000
  • list.highlightForeground#6EB8FF
  • list.hoverBackground#1E1A2A
  • list.hoverForeground#E0E4EB
  • list.inactiveSelectionBackground#252034
  • list.inactiveSelectionForeground#C5C9D1
  • menu.background#1C1826
  • menu.foreground#C5C9D1
  • menu.selectionBackground#2D2640
  • menu.selectionBorder#00000000
  • menu.selectionForeground#6EB8FF
  • menu.separatorBackground#00000000
  • menubar.selectionBackground#1A1625
  • menubar.selectionBorder#00000000
  • menubar.selectionForeground#6EB8FF
  • panel.background#16131F
  • panel.border#00000000
  • panelTitle.activeBorder#5C78FF
  • panelTitle.activeForeground#E0E4EB
  • panelTitle.inactiveForeground#7A7488
  • scrollbarSlider.activeBackground#5A5070C0
  • scrollbarSlider.background#3A305080
  • scrollbarSlider.hoverBackground#4A4060A0
  • sideBar.background#16131F
  • sideBar.border#00000000
  • sideBar.foreground#C5C9D1
  • sideBarSectionHeader.background#1A1625
  • sideBarSectionHeader.border#00000000
  • sideBarSectionHeader.foreground#B8B4C8
  • sideBarTitle.foreground#B8B4C8
  • statusBar.background#13101C
  • statusBar.border#00000000
  • statusBar.debuggingBackground#FF5F87
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#B8B4C8
  • statusBar.noFolderBackground#2D2640
  • statusBarItem.activeBackground#2A243A
  • statusBarItem.hoverBackground#1E1A2A
  • tab.activeBackground#1A1625
  • tab.activeBorder#5C78FF
  • tab.activeBorderTop#00000000
  • tab.activeForeground#E0E4EB
  • tab.border#00000000
  • tab.hoverBackground#1E1A2A
  • tab.hoverForeground#C5C9D1
  • tab.inactiveBackground#13101C
  • tab.inactiveForeground#7A7488
  • tab.unfocusedActiveForeground#B8B4C8
  • tab.unfocusedInactiveForeground#6A6482
  • terminal.ansiBlack#1A1625
  • terminal.ansiBlue#6EB8FF
  • terminal.ansiBrightBlack#6A6482
  • terminal.ansiBrightBlue#99D4FF
  • terminal.ansiBrightCyan#6DD4FF
  • terminal.ansiBrightGreen#5AE65A
  • terminal.ansiBrightMagenta#D89FFF
  • terminal.ansiBrightRed#FF8AA8
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFE099
  • terminal.ansiCyan#32B9FF
  • terminal.ansiGreen#32CB32
  • terminal.ansiMagenta#C173FF
  • terminal.ansiRed#FF5F87
  • terminal.ansiWhite#E0E4EB
  • terminal.ansiYellow#FFD066
  • terminal.background#16131F
  • terminal.foreground#E0E4EB
  • terminalCursor.foreground#A070FF
  • titleBar.activeBackground#0F0D16
  • titleBar.activeForeground#6EB8FF
  • titleBar.border#00000000
  • titleBar.inactiveBackground#0F0D16
  • titleBar.inactiveForeground#4A5A70

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A6482italic
comment.block.documentation, comment.line.documentation#7A7498italic
keyword, storage.type, storage.modifier, keyword.control, keyword.other#C173FF
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.return, keyword.control.flow#BA5AFF
meta.annotation.java, storage.type.annotation.java, punctuation.definition.annotation.java#FFB347italic
meta.attribute.csharp, storage.type.attribute.csharp, punctuation.definition.attribute.csharp#FFB347italic
storage.modifier.java, storage.modifier.csharp, storage.modifier.access#BA5AFF
keyword.other.var.csharp, keyword.type.dynamic.csharp#C173FFitalic
keyword.linq.csharp#D89FFF
punctuation.definition.typeparameters, meta.generic#7A8FFF
constant, variable.other.constant, constant.language#A070FF
constant.numeric, constant.numeric.decimal, constant.numeric.hex, constant.numeric.octal, constant.numeric.binary#FFD066
constant.language.boolean#BA5AFF
constant.language.null, constant.language.undefined, constant.language.void#A070FFitalic
string, string.quoted, punctuation.definition.string#32CB32
string.template, string.interpolated#5AE65A
meta.template.expression, punctuation.definition.template-expression#FFD066
string.regexp, punctuation.definition.string.regexp#32B9FF
constant.character.escape#6DD4FF
variable, variable.other#C5C9D1
variable.parameter#B38F00
variable.other.property, variable.other.member, entity.other.attribute-name, support.type.property-name#FF2A9D
variable.language.this, variable.language.self, variable.language.super#FF5F87italic
entity.name.function, meta.function-call, support.function#6EB8FF
meta.method.declaration, meta.method#6EB8FF
support.function.builtin#99D4FF
entity.name.type, entity.name.class, support.class#3299FF
entity.name.type.interface#5CB4FFitalic
entity.name.type.enum#7FC9FF
entity.name.type.parameter#7A8FFFitalic
storage.type.primitive, support.type.primitive, keyword.type#3299FF
entity.name.namespace, entity.name.type.namespace, storage.type.namespace#A8C8FF
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.logical, keyword.operator.comparison, keyword.operator.relational#32B9FF
punctuation, punctuation.separator, punctuation.terminator#7A8FFF
meta.decorator, entity.name.function.decorator, punctuation.decorator#FFB347italic
entity.name.tag, meta.tag#C173FF
punctuation.definition.tag#A070FF
entity.other.attribute-name.html, entity.other.attribute-name#FFB347
support.class.component, entity.name.tag.tsx, entity.name.tag.jsx#3299FF
entity.other.attribute-name.jsx, entity.other.attribute-name.tsx#FFB347
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#C173FF
support.type.property-name.css, meta.property-name.css#6EB8FF
support.constant.property-value.css, meta.property-value.css#32CB32
keyword.other.unit.css#FFD066
support.type.property-name.json, meta.structure.dictionary.key.json string.quoted.double.json, meta.structure.dictionary.json string.quoted.double.json#A070FF
meta.structure.dictionary.value.json string.quoted.double.json#32CB32
punctuation.separator.dictionary.pair.json, punctuation.separator.dictionary.key-value.json, punctuation.separator.array.json, punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json#7A8FFF
punctuation.definition.array.begin.json, punctuation.definition.array.end.json#C173FF
markup.heading, entity.name.section.markdown#C173FF
markup.bold#FFD066
markup.italic#FF2A9Ditalic
markup.inline.raw, markup.fenced_code#32CB32
markup.underline.link#6EB8FFunderline
markup.quote#7A7498italic
entity.name.tag.yaml#A070FF
keyword.other.sql#C173FF
suprimSigma VSCode Theme by Alessandro Previtali - VS Code Theme