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#070910
  • activityBar.border#1A2030
  • activityBar.foreground#55D65B
  • activityBar.inactiveForeground#2F5233
  • activityBarBadge.background#ff2929
  • activityBarBadge.foreground#0A0E17
  • badge.background#FF4D4D
  • badge.foreground#0A0E17
  • breadcrumb.activeSelectionForeground#10fc1c
  • breadcrumb.focusForeground#10fc1c
  • breadcrumb.foreground#2F5233
  • breadcrumbPicker.background#070910
  • button.background#10fc1c
  • button.foreground#0A0E17
  • button.hoverBackground#FFB86B
  • button.secondaryBackground#1A2030
  • button.secondaryForeground#55D65B
  • button.secondaryHoverBackground#2F5233
  • descriptionForeground#8CE38B
  • diffEditor.insertedLineBackground#55D65B18
  • diffEditor.insertedTextBackground#55D65B22
  • diffEditor.removedLineBackground#FF4D4D18
  • diffEditor.removedTextBackground#FF4D4D22
  • dropdown.background#0A0E17
  • dropdown.border#1A2030
  • dropdown.foreground#55D65B
  • editor.background#010112
  • editor.findMatchBackground#10fc1c55
  • editor.findMatchHighlightBackground#10fc1c33
  • editor.foreground#55D65B
  • editor.inactiveSelectionBackground#16202E
  • editor.lineHighlightBackground#10141F
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#1C2C42
  • editor.selectionHighlightBackground#16202E
  • editor.wordHighlightBackground#1A2030
  • editor.wordHighlightStrongBackground#1C2C42
  • editorBracketHighlight.foreground1#4b7014
  • editorBracketHighlight.foreground2#1a873b
  • editorBracketHighlight.foreground3#791972
  • editorBracketHighlight.foreground4#0c496c
  • editorBracketHighlight.foreground5#576d04
  • editorBracketHighlight.foreground6#044208
  • editorBracketHighlight.unexpectedBracket.foreground#FF4D4D
  • editorBracketMatch.background#1C2C42
  • editorBracketMatch.border#10fc1c
  • editorCodeLens.foreground#2F5233
  • editorCursor.foreground#00ff2a
  • editorError.foreground#FF4D4D
  • editorGroup.border#1A2030
  • editorGroupHeader.tabsBackground#070910
  • editorGroupHeader.tabsBorder#1A2030
  • editorGutter.addedBackground#55D65B
  • editorGutter.background#070609
  • editorGutter.deletedBackground#FF4D4D
  • editorGutter.modifiedBackground#10fc1c
  • editorHint.foreground#8CE38B
  • editorIndentGuide.activeBackground1#2F5233
  • editorIndentGuide.background1#1A2030
  • editorInfo.foreground#4DB6AC
  • editorLineNumber.activeForeground#ff2a00
  • editorLineNumber.foreground#245c5a
  • editorLink.activeForeground#10fc1c
  • editorOverviewRuler.border#0A0E17
  • editorOverviewRuler.errorForeground#FF4D4D
  • editorOverviewRuler.warningForeground#10fc1c
  • editorRuler.foreground#1A2030
  • editorWarning.foreground#10fc1c
  • editorWhitespace.foreground#1A2030
  • errorForeground#FF4D4D
  • extensionButton.prominentBackground#10fc1c
  • extensionButton.prominentForeground#0A0E17
  • focusBorder#ff6325
  • foreground#13df1d
  • gitDecoration.addedResourceForeground#39FF6A
  • gitDecoration.conflictingResourceForeground#FF4D4D
  • gitDecoration.deletedResourceForeground#FF4D4D
  • gitDecoration.ignoredResourceForeground#808080
  • gitDecoration.modifiedResourceForeground#FFA94D
  • gitDecoration.untrackedResourceForeground#39FF6A
  • input.background#0A0E17
  • input.border#1A2030
  • input.foreground#55D65B
  • input.placeholderForeground#2F5233
  • inputOption.activeBorder#10fc1c
  • inputValidation.errorBackground#2A1010
  • inputValidation.errorBorder#FF4D4D
  • list.activeSelectionBackground#1C2C42
  • list.activeSelectionForeground#ff5e00
  • list.errorForeground#FF4D4D
  • list.focusBackground#1C2C42
  • list.focusForeground#ff5e00
  • list.highlightForeground#FF4D4D
  • list.hoverBackground#10141F
  • list.inactiveSelectionBackground#16202E
  • list.warningForeground#10fc1c
  • listFilterWidget.background#0A0E17
  • listFilterWidget.outline#10fc1c
  • notificationCenterHeader.background#070910
  • notifications.background#0A0E17
  • notifications.foreground#55D65B
  • notificationsErrorIcon.foreground#FF4D4D
  • notificationsInfoIcon.foreground#4DB6AC
  • notificationsWarningIcon.foreground#10fc1c
  • panel.background#0A0E17
  • panel.border#1A2030
  • panelTitle.activeBorder#10fc1c
  • panelTitle.activeForeground#10fc1c
  • panelTitle.inactiveForeground#2F5233
  • peekView.border#10fc1c
  • peekViewEditor.background#0A0E17
  • peekViewResult.background#070910
  • peekViewTitle.background#070910
  • pickerGroup.border#1A2030
  • pickerGroup.foreground#10fc1c
  • progressBar.background#10fc1c
  • quickInput.background#0A0E17
  • quickInput.foreground#55D65B
  • scrollbarSlider.activeBackground#10fc1c88
  • scrollbarSlider.background#1A203088
  • scrollbarSlider.hoverBackground#2F523388
  • selection.background#1C2C42
  • sideBar.background#0b1021
  • sideBar.border#323c78
  • sideBar.foreground#bcf9dd
  • sideBarSectionHeader.background#0A0E17
  • sideBarSectionHeader.foreground#55D65B
  • sideBarTitle.foreground#10fc1c
  • statusBar.background#000b02
  • statusBar.border#353bff
  • statusBar.debuggingBackground#FF4D4D
  • statusBar.debuggingForeground#0A0E17
  • statusBar.foreground#55D65B
  • statusBar.noFolderBackground#070910
  • tab.activeBackground#09201e
  • tab.activeBorderTop#10fc1c
  • tab.activeForeground#10fc1c
  • tab.border#1A2030
  • tab.inactiveBackground#070910
  • tab.inactiveForeground#2F5233
  • tab.unfocusedActiveForeground#55D65B
  • terminal.ansiBlack#0A0E17
  • terminal.ansiBlue#4DB6AC
  • terminal.ansiBrightBlack#2F5233
  • terminal.ansiBrightBlue#80CBC4
  • terminal.ansiBrightCyan#80DEEA
  • terminal.ansiBrightGreen#8CE38B
  • terminal.ansiBrightMagenta#DDA6FF
  • terminal.ansiBrightRed#FF7A7A
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFC27A
  • terminal.ansiCyan#4DD0E1
  • terminal.ansiGreen#55D65B
  • terminal.ansiMagenta#C77DFF
  • terminal.ansiRed#FF4D4D
  • terminal.ansiWhite#CFEAD1
  • terminal.ansiYellow#10fc1c
  • terminal.background#0A0E17
  • terminal.foreground#55D65B
  • terminalCursor.foreground#FF9F1C
  • textCodeBlock.background#272829
  • textLink.activeForeground#0B72FF
  • textLink.foreground#0B72FF
  • textPreformat.background#272829
  • textPreformat.foreground#f74eb6
  • titleBar.activeBackground#070910
  • titleBar.activeForeground#55D65B
  • titleBar.border#1A2030
  • titleBar.inactiveBackground#070910
  • titleBar.inactiveForeground#2F5233
  • widget.shadow#000000AA

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#4D7A52italic
string, string.quoted, string.template#ff821c
string, string.quoted, string.template, meta.image#0b5614
constant.numeric, constant.other.number#00b3ff
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined#FF4D4D
keyword, keyword.control, keyword.control.flow#FF9F1Cbold
keyword.operator#6FAE74
storage.type, storage.modifier#10fc1c
variable, variable.other.readwrite, variable.parameter#55D65B
variable.other.constant, variable.other.property#8CE38B
entity.name.function, support.function#7EE787bold
entity.name.type, entity.name.class, support.class, entity.other.inherited-class#E3B341
entity.name.tag#FF9F1C
entity.other.attribute-name#8CE38B
punctuation, punctuation.definition.tag, meta.brace#3E8E45
support.type.property-name.json#00fd37
punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json#5f5df0bold
punctuation.definition.array.begin.json, punctuation.definition.array.end.json#eaff4dbold
entity.name.tag.yaml#00fc26
string.unquoted.plain.out.yaml#f8511a
invalid, invalid.illegal#FF4D4Dbold underline
invalid.deprecated#FF7A7Astrikethrough
markup.heading#a6ffb5
markup.list.unnumbered#22d853
punctuation.definition.list.begin, markup.list.numbered#0195eb
markup.list.numbered#48f0ce
markup.bold, punctuation.definition.bold.markdown#ff45d7bold
markup.italic, punctuation.definition.italic.markdown#fff01aitalic
markup.underline.link#5c4dbaunderline
markup.quote.markdown#e45a5aitalic
punctuation.definition.quote.begin.markdown#ff0051
markup.inline.raw.string.markdown#FF6EC7
punctuation.definition.raw.markdown#8A6E82
string.other.link.title.markdown, meta.link.inline.markdown punctuation.definition.string.begin.markdown, meta.link.inline.markdown punctuation.definition.string.end.markdown#0B72FF
meta.link.inline.markdown markup.underline.link.markdown, meta.link.inline.markdown punctuation.definition.metadata.markdown#12291A
markup.inserted, diff.inserted#55D65B
markup.deleted, diff.deleted#FF4D4D
markup.changed, diff.changed#10fc1c
dasLicht by kazumasa57 - VS Code Theme