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#0F0F13
  • activityBar.border#0F0F13
  • activityBar.foreground#DA70D6
  • activityBar.inactiveForeground#4A3D60
  • activityBarBadge.background#DA70D6
  • activityBarBadge.foreground#141418
  • badge.background#DA70D6
  • badge.foreground#141418
  • button.background#DA70D6
  • button.foreground#141418
  • button.hoverBackground#E080E6
  • diffEditor.insertedTextBackground#A8CC8C15
  • diffEditor.removedTextBackground#F0717815
  • dropdown.background#1A1A20
  • dropdown.border#3A334B
  • editor.background#141418
  • editor.findMatchBackground#DA70D640
  • editor.findMatchHighlightBackground#DA70D620
  • editor.foreground#D8C9E8
  • editor.lineHighlightBackground#1C1C22
  • editor.selectionBackground#3A334B80
  • editor.selectionHighlightBackground#3A334B40
  • editorBracketMatch.background#3A334B50
  • editorBracketMatch.border#DA70D680
  • editorCursor.background#000000
  • editorCursor.foreground#DA70D6
  • editorGroupHeader.tabsBackground#111115
  • editorGutter.addedBackground#A8CC8C80
  • editorGutter.deletedBackground#F0717880
  • editorGutter.modifiedBackground#FFCB6B80
  • editorHoverWidget.background#1A1A20
  • editorHoverWidget.border#2A2535
  • editorIndentGuide.activeBackground1#4A3D60
  • editorIndentGuide.background1#2A2535
  • editorLineNumber.activeForeground#8A7098
  • editorLineNumber.foreground#3D3555
  • editorSuggestWidget.background#1A1A20
  • editorSuggestWidget.border#2A2535
  • editorSuggestWidget.highlightForeground#DA70D6
  • editorSuggestWidget.selectedBackground#3A334B
  • editorWhitespace.foreground#3A334B
  • editorWidget.background#1A1A20
  • editorWidget.border#2A2535
  • focusBorder#DA70D640
  • input.background#1A1A20
  • input.border#3A334B
  • input.foreground#D8C9E8
  • input.placeholderForeground#6A5A7A
  • inputOption.activeBackground#DA70D640
  • inputOption.activeBorder#DA70D6
  • list.activeSelectionBackground#3A334B
  • list.activeSelectionForeground#E8D5FF
  • list.focusOutline#00000000
  • list.highlightForeground#DA70D6
  • list.hoverBackground#1C1C22
  • list.hoverForeground#D8C9E8
  • list.inactiveSelectionBackground#2A2535
  • notificationCenterHeader.background#0F0F13
  • notifications.background#1A1A20
  • notifications.border#2A2535
  • panel.background#111115
  • panel.border#2A2535
  • panelTitle.activeForeground#DA70D6
  • panelTitle.inactiveForeground#6A5A7A
  • progressBar.background#DA70D6
  • quickInput.background#141418
  • quickInput.foreground#D8C9E8
  • quickInputList.focusBackground#3A334B
  • quickInputTitle.background#100B15
  • scrollbarSlider.activeBackground#3A334BAA
  • scrollbarSlider.background#3A334B40
  • scrollbarSlider.hoverBackground#3A334B80
  • selection.background#3A334B80
  • sideBar.background#111115
  • sideBar.border#111115
  • sideBar.foreground#C0B0D5
  • sideBarSectionHeader.background#141418
  • sideBarSectionHeader.foreground#C0B0D5
  • sideBarTitle.foreground#8A7098
  • statusBar.background#100B15
  • statusBar.border#100B15
  • statusBar.foreground#ffaffc
  • statusBarItem.hoverBackground#DA70D620
  • tab.activeBackground#141418
  • tab.activeBorderTop#DA70D6
  • tab.activeForeground#E8D5FF
  • tab.border#111115
  • tab.hoverBackground#1C1C22
  • tab.inactiveBackground#111115
  • tab.inactiveForeground#6A5A7A
  • terminal.ansiBlack#1A1A20
  • terminal.ansiBlue#82AAFF
  • terminal.ansiBrightBlack#4A3D60
  • terminal.ansiBrightBlue#82AAFF
  • terminal.ansiBrightCyan#89DDFF
  • terminal.ansiBrightGreen#A8CC8C
  • terminal.ansiBrightMagenta#ffaffc
  • terminal.ansiBrightRed#F07178
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFCB6B
  • terminal.ansiCyan#89DDFF
  • terminal.ansiGreen#A8CC8C
  • terminal.ansiMagenta#DA70D6
  • terminal.ansiRed#F07178
  • terminal.ansiWhite#D8C9E8
  • terminal.ansiYellow#FFCB6B
  • terminal.background#141418
  • terminal.foreground#D8C9E8
  • titleBar.activeBackground#0F0F13
  • titleBar.activeForeground#D8C9E8
  • titleBar.border#0F0F13
  • titleBar.inactiveBackground#0F0F13
  • titleBar.inactiveForeground#6A5A7A
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#5C5470italic
string, string.quoted, string.template, string.interpolated#FFCB9A
constant.numeric, constant.language, constant.other#B5CEA8
keyword, keyword.control, keyword.operator.new, keyword.other.using, keyword.other.import, storage.type, storage.modifier#DA70D6
keyword.operator#C586C0
entity.name.function, meta.function-call.generic, support.function#82AAFF
entity.name.type, entity.name.class, entity.name.namespace, support.class, support.type#4EC9B0
entity.name.tag#DA70D6
entity.other.attribute-name, meta.property-name, support.type.property-name#82AAFF
variable, variable.other#D8C9E8
variable.language#DA70D6italic
variable.parameter#C8B8D8italic
support.constant#B5CEA8
punctuation#8A7098
invalid#F07178underline
markup.heading#DA70D6bold
markup.boldbold
markup.italicitalic
markup.underline.link#82AAFFunderline
Lust Noir by Roy Developer - VS Code Theme