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#0c0c0c
  • activityBar.border#767676
  • activityBar.foreground#cccccc
  • activityBarBadge.background#767676
  • activityBarBadge.foreground#f2f2f2
  • badge.background#767676
  • badge.foreground#f2f2f2
  • button.background#767676
  • button.foreground#f2f2f2
  • button.hoverBackground#cccccc
  • button.secondaryBackground#3b78ff
  • button.secondaryForeground#f2f2f2
  • descriptionForeground#767676
  • diffEditor.diagonalFill#767676
  • diffEditor.insertedTextBackground#13a10e33
  • diffEditor.removedTextBackground#c50f1f33
  • dropdown.background#0c0c0c
  • dropdown.border#767676
  • dropdown.foreground#cccccc
  • editor.background#0c0c0c
  • editor.findMatchBackground#881798
  • editor.findMatchHighlightBackground#88179860
  • editor.foreground#cccccc
  • editor.inactiveSelectionBackground#3a96dd40
  • editor.selectionBackground#0037da99
  • editor.selectionHighlightBackground#0037da33
  • editorCursor.foreground#cccccc
  • editorGroup.border#767676
  • editorGroupHeader.tabsBackground#0c0c0c
  • editorGroupHeader.tabsBorder#767676
  • editorGutter.addedBackground#16c60c
  • editorGutter.deletedBackground#e74856
  • editorGutter.modifiedBackground#3b78ff
  • editorHoverWidget.background#0c0c0c
  • editorHoverWidget.border#767676
  • editorLineNumber.activeForeground#f2f2f2
  • editorLineNumber.foreground#767676
  • editorOverviewRuler.addedForeground#16c60c
  • editorOverviewRuler.deletedForeground#e74856
  • editorOverviewRuler.modifiedForeground#3b78ff
  • editorWidget.background#0c0c0c
  • editorWidget.border#767676
  • errorForeground#e74856
  • focusBorder#767676
  • foreground#cccccc
  • gitDecoration.addedResourceForeground#16c60c
  • gitDecoration.conflictingResourceForeground#b4009e
  • gitDecoration.deletedResourceForeground#e74856
  • gitDecoration.ignoredResourceForeground#767676
  • gitDecoration.modifiedResourceForeground#3b78ff
  • gitDecoration.submoduleResourceForeground#881798
  • gitDecoration.untrackedResourceForeground#13a10e
  • input.background#0c0c0c
  • input.border#767676
  • input.foreground#cccccc
  • input.placeholderForeground#767676
  • inputOption.activeBorder#f2f2f2
  • list.activeSelectionBackground#767676
  • list.activeSelectionForeground#f2f2f2
  • list.dropBackground#767676
  • list.focusBackground#767676
  • list.focusForeground#f2f2f2
  • list.hoverBackground#333333
  • list.inactiveSelectionBackground#333333
  • peekView.border#3b78ff
  • peekViewEditor.background#0c0c0c
  • peekViewResult.background#0c0c0c
  • peekViewTitle.background#0c0c0c
  • progressBar.background#16c60c
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#cccccc
  • scrollbarSlider.background#767676
  • scrollbarSlider.hoverBackground#f2f2f2
  • selection.background#f2f2f2
  • sideBar.background#0c0c0c
  • sideBar.border#767676
  • sideBar.foreground#cccccc
  • sideBarSectionHeader.background#0c0c0c
  • sideBarSectionHeader.border#767676
  • sideBarTitle.foreground#f2f2f2
  • statusBar.background#0c0c0c
  • statusBar.border#767676
  • statusBar.debuggingBackground#c50f1f
  • statusBar.foreground#cccccc
  • statusBarItem.remoteBackground#3b78ff
  • tab.activeBackground#0c0c0c
  • tab.activeBorderTop#f2f2f2
  • tab.activeForeground#f2f2f2
  • tab.activeModifiedBorder#3b78ff
  • tab.border#767676
  • tab.inactiveBackground#0c0c0c
  • tab.inactiveForeground#767676
  • terminal.ansiBlack#0c0c0c
  • terminal.ansiBlue#0037da
  • terminal.ansiBrightBlack#767676
  • terminal.ansiBrightBlue#3b78ff
  • terminal.ansiBrightCyan#61d6d6
  • terminal.ansiBrightGreen#16c60c
  • terminal.ansiBrightMagenta#b4009e
  • terminal.ansiBrightRed#e74856
  • terminal.ansiBrightWhite#f2f2f2
  • terminal.ansiBrightYellow#f9f1a5
  • terminal.ansiCyan#3a96dd
  • terminal.ansiGreen#13a10e
  • terminal.ansiMagenta#881798
  • terminal.ansiRed#c50f1f
  • terminal.ansiWhite#cccccc
  • terminal.ansiYellow#c19c00
  • terminal.background#0c0c0c
  • terminal.foreground#cccccc
  • titleBar.activeBackground#0c0c0c
  • titleBar.activeForeground#cccccc
  • titleBar.border#767676
  • titleBar.inactiveBackground#0c0c0c
  • widget.border#767676

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#767676
string, meta.embedded.assembly, meta.preprocessor.string#61d6d6
constant.character.escape#f9f1a5
constant.numeric, constant.language, constant.other#16c60c
keyword.control, keyword.control.flow, keyword.control.import, keyword.control.from, keyword.control.export#b4009ebold
storage, storage.type, storage.modifier, keyword.other, keyword.operator.new#3b78ffbold
keyword.operator#cccccc
variable.other.constant#16c60c
entity.name.function, support.function, meta.function-call.generic#f9f1a5
entity.name.type, entity.name.class, support.class, support.type, entity.other.inherited-class#3b78ff
variable, meta.definition.variable.name, entity.name.variable#cccccc
variable.parameter#3a96dd
variable.language, variable.language.this, variable.language.self#e74856
variable.other.property, meta.object-literal.key, support.variable.property, variable.object.property#3a96dd
entity.name.tag, punctuation.definition.tag#3b78ff
entity.other.attribute-name#3a96dd
entity.other.attribute-name.class#f9f1a5
entity.other.attribute-name.id#e74856
keyword.other.unit, support.constant.color#16c60c
support.type.property-name.json#3a96dd
string.regexp#e74856
constant.character.character-class.regexp#f9f1a5
markup.heading, entity.name.section#f2f2f2bold
markup.underline.link, string.other.link#3b78ff
markup.inline.raw, markup.raw.block#16c60c
markup.bold#f2f2f2bold
markup.italic#61d6d6italic
markup.quote, punctuation.definition.quote.begin.markdown#13a10e
punctuation.definition.list.begin.markdown, markup.list.numbered.markdown, markup.list.unnumbered.markdown#f9f1a5bold
string.other.link.title.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#3b78ff
markup.underline.link.markdown#767676underline
markup.inline.raw.string.markdown#16c60c
meta.decorator, entity.name.function.decorator#f9f1a5
entity.name.namespace, storage.modifier.package, storage.modifier.import#b4009e
invalid#e74856underline
Neo DOS by AH-oss - VS Code Theme