Skip to main content
CodingTheme

Color themes

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#0b1015
  • activityBar.foreground#97a7c8ff
  • activityBarBadge.background#FFD300
  • activityBarBadge.foreground#000000
  • button.hoverBackground#FFD300
  • debugToolBar.background#0b1015
  • dropdown.background#0b1015
  • dropdown.border#97a7c8ff
  • editor.background#0b1015
  • editor.findMatchBackground#18222Dff
  • editor.foreground#cccccc
  • editor.lineHighlightBackground#14344B
  • editor.lineHighlightBorder#14344B
  • editor.selectionBackground#18222Dff
  • editorBracketMatch.border#97a7c8ff
  • editorCursor.foreground#FFD300
  • editorGroup.background#0b1015
  • editorGroup.border#0b1015
  • editorGroupHeader.noTabsBackground#0b1015
  • editorGroupHeader.tabsBackground#0b1015
  • editorGutter.addedBackground#56D6D6
  • editorGutter.deletedBackground#FB467B
  • editorGutter.modifiedBackground#FFCC00
  • editorHoverWidget.background#0b1015
  • editorIndentGuide.activeBackground#495365
  • editorIndentGuide.background#18222Dff
  • editorLineNumber.foreground#5C6370
  • editorOverviewRuler.border#0b1015
  • editorRuler.foreground#18222Dff
  • editorSuggestWidget.background#0b1015
  • editorSuggestWidget.selectedBackground#18222Dff
  • editorWhitespace.foreground#18222Dff
  • editorWidget.background#0b1015
  • focusBorder#97a7c8ff
  • gitDecoration.conflictingResourceForeground#9107c7
  • gitDecoration.deletedResourceForeground#FF3333
  • gitDecoration.ignoredResourceForeground#00B7C9
  • gitDecoration.modifiedResourceForeground#f7f308
  • gitDecoration.untrackedResourceForeground#11eb73
  • input.background#0b1015
  • input.border#FFD300
  • list.activeSelectionBackground#0b1015
  • list.activeSelectionForeground#FFD300
  • list.focusBackground#18222Dff
  • list.focusForeground#FFD300
  • list.highlightForeground#FFD300
  • list.hoverBackground#18222Dff
  • list.inactiveSelectionBackground#0b1015
  • list.inactiveSelectionForeground#FFD300
  • notification.background#0b1015
  • panel.background#0b1015
  • panel.border#18222Dff
  • panelTitle.activeForeground#FFD300
  • panelTitle.inactiveForeground#97a7c8ff
  • peekView.border#97a7c8ff
  • peekViewEditor.background#0b1015
  • peekViewResult.background#0b1015
  • peekViewResult.selectionBackground#0b1015
  • peekViewTitle.background#0b1015
  • peekViewTitleLabel.foreground#FFC66D
  • progressBar.background#FFD300
  • scrollbar.shadow#00000026
  • scrollbarSlider.background#18222Dff
  • scrollbarSlider.hoverBackground#22303Eff
  • sideBar.background#0b1015
  • sideBarSectionHeader.background#0b1015
  • statusBar.background#0b1015
  • statusBar.debuggingBackground#0b1015
  • statusBar.foreground#97a7c8ff
  • tab.activeBackground#0b1015
  • tab.activeBorder#FFD300
  • tab.activeForeground#FFD300
  • tab.border#0b1015
  • tab.inactiveBackground#0b1015
  • tab.inactiveForeground#97a7c8ff
  • tab.unfocusedActiveBorder#97a7c8ff
  • titleBar.activeBackground#0b1015
  • titleBar.inactiveForeground#0b1015
  • widget.shadow#00000026

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#ccccccff
comment#555555
string#F9D423
constant.numeric#F9D423
constant.language#7D8991
constant.character, constant.other#7D8991
variable
keyword#7D8991
storage#7D8991
storage.type#FC913A
entity.name.class#7D8991underline
entity.other.inherited-class#7D8991italic underline
entity.name.function#F9D423
variable.parameteritalic
entity.name.tag#FC913A
entity.other.attribute-name#7D8991
support.function#F85931
support.constant#7D8991
support.type, support.class#7D8991italic
support.other.variable
invalid#f8f8f0
invalid.deprecated#f8f8f0
meta.structure.dictionary.json string.quoted.double.json#F9D423
meta.diff, meta.diff.header#75715E
markup.deleted#00A8C6
markup.inserted#A6E22E
markup.changed#E6DB74
constant.numeric.line-number.find-in-files - match#8FBE00A0
entity.name.filename.find-in-files#E6DB74
keyword.other#808080
meta.property-value, support.constant.property-value, constant.other.color#F9D423
meta.structure.dictionary.json string.quoted.double.json#7D8991
meta.structure.dictionary.value.json string.quoted.double.json#F9D423
meta.property-name support.type.property-namenormal
meta.property-value punctuation.separator.key-value#cccccc
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as#FC913A
meta.use support.class.builtin, meta.other.inherited-class support.class.builtin#ccccccnormal
variable.othernormal
variable.parameter.function.coffee#F9D423italic
entity.name.section.markdown#7D8991
punctuation.definition.heading.markdown#7D8991
markup.raw.inline.markdown#F9D423
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#7D8991
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#7D8991
punctuation.definition.metadata.markdown#7D8991
markup.underline.link.markdown, markup.underline.link.image.markdown, meta.image.inline.markdown#FC913Aitalic
markup.bold.markdown, markup.italic.markdown#FC913A
markup.italic.markdownitalic
markup.bold.markdownbold
markup.raw.block.markdown#00a8c6
markup.deleted.git_gutter#e61f44
markup.inserted.git_gutter#a7da1e
markup.changed.git_gutter#f7b83d
entity.other.attribute-name.class#F9D423
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...