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.activeBorder#BB86FC
  • activityBar.background#1F1F1F
  • activityBar.foreground#E0E0E0
  • button.background#7C4DFF
  • button.foreground#FFFFFF
  • button.hoverBackground#9C27B0
  • descriptionForeground#A0A0A0
  • diffEditor.insertedTextBackground#2E7D3220
  • diffEditor.removedTextBackground#C6282820
  • disabledForeground#757575
  • editor.background#1E1E1E
  • editor.foreground#E0E0E0
  • editor.lineHighlightBackground#2A2A2A80
  • editorCursor.foreground#BB86FC
  • editorIndentGuide.activeBackground#505050
  • editorIndentGuide.background#353535
  • editorLineNumber.activeForeground#BB86FC
  • editorLineNumber.foreground#5A5A5A
  • editorWhitespace.foreground#404040
  • errorForeground#FF6E6E
  • focusBorder#BB86FC80
  • foreground#E0E0E0
  • gitDecoration.addedResourceForeground#A5D6A7
  • gitDecoration.deletedResourceForeground#FF8A80
  • gitDecoration.ignoredResourceForeground#757575
  • gitDecoration.modifiedResourceForeground#FFE082
  • gitDecoration.untrackedResourceForeground#4FD8E8
  • icon.foreground#BB86FC
  • input.background#252525
  • input.border#404040
  • input.foreground#E0E0E0
  • input.placeholderForeground#808080
  • inputValidation.errorBackground#5E1E1E
  • inputValidation.infoBackground#1E2B5E
  • inputValidation.warningBackground#5E4D1E
  • list.activeSelectionBackground#7C4DFF40
  • list.focusBackground#7C4DFF30
  • list.hoverBackground#2A2A2A
  • list.inactiveSelectionBackground#3D3D3D
  • sash.hoverBorder#7C4DFF
  • selection.background#7C4DFF40
  • sideBar.background#1F1F1F
  • sideBar.foreground#E0E0E0
  • sideBarSectionHeader.background#1A1A1A
  • sideBarTitle.foreground#E8E8E8
  • statusBar.background#1F1F1F
  • statusBar.foreground#E0E0E0
  • statusBarItem.hoverBackground#2A2A2A
  • tab.activeBackground#252525
  • tab.activeForeground#F0F0F0
  • tab.border#252525
  • tab.hoverBackground#2A2A2A
  • tab.inactiveBackground#1F1F1F
  • tab.inactiveForeground#A0A0A0
  • terminal.ansiBlack#1E1E1E
  • terminal.ansiBlue#82B1FF
  • terminal.ansiBrightBlack#5A5A5A
  • terminal.ansiBrightBlue#9EBEFF
  • terminal.ansiBrightCyan#88F3FF
  • terminal.ansiBrightGreen#C8E6C9
  • terminal.ansiBrightMagenta#E1BEE7
  • terminal.ansiBrightRed#FFBCAF
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFECB3
  • terminal.ansiCyan#4FD8E8
  • terminal.ansiGreen#A5D6A7
  • terminal.ansiMagenta#CE93D8
  • terminal.ansiRed#FF8A80
  • terminal.ansiWhite#E0E0E0
  • terminal.ansiYellow#FFE082
  • terminal.background#1E1E1E
  • terminal.foreground#E0E0E0
  • terminalCursor.background#E0E0E0
  • terminalCursor.foreground#BB86FC
  • widget.shadow#00000060
  • window.activeBorder#252525
  • window.inactiveBorder#252525

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6D6D6Ditalic
comment.block.documentation, comment.line.documentation#8E8E8Eitalic
string, string.quoted, string.template, punctuation.definition.string#A5D6A7
string.template punctuation.definition.template-expression, string.interpolation punctuation.definition.interpolation, string.template meta.template.expression#FFE082
constant.numeric, constant.language.boolean#FFAB91
constant.language, support.constant#4FD8E8
keyword, storage.type, storage.modifier, keyword.control, keyword.operator.new, keyword.control.flow#BB86FCbold
keyword.operator#E1BEE7
entity.name.function, support.function, meta.function-call, variable.function, support.method#82B1FF
entity.name.type.class, entity.name.type, support.class, support.type, entity.name.namespace#FFE082bold
variable, variable.parameter, variable.other, meta.parameter#E0E0E0
variable.object.property, support.variable.property, meta.object-literal.key#E1BEE7
variable.other.constant, constant.other, entity.name.variable.constant#4FD8E8bold
meta.decorator, storage.type.annotation#CE93D8italic
entity.name.tag, punctuation.definition.tag#FF8A80
entity.other.attribute-name#CE93D8
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#4FD8E8
support.type.property-name.css#A5D6A7
support.constant.property-value.css#FFE082
support.type.property-name.json#82B1FF
markup.heading, entity.name.section#BB86FCbold
markup.underline.link#82B1FF
markup.inline.raw, markup.fenced_code.block#A5D6A7
markup.boldbold
markup.italicitalic
Midnight Pulse by harshitchaunal321 - VS Code Theme