Skip to main content
CodingTheme

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#1b1b1b
  • activityBar.foreground#eeeeee
  • activityBarBadge.background#3c993e
  • badge.background#3c993e
  • button.background#4d91db
  • button.foreground#ffffff
  • contrastBorder#c0c0c0
  • editor.background#ffffff
  • editor.findMatchBackground#ffff00
  • editor.findMatchHighlightBackground#a3ccfe
  • editor.foreground#000000
  • editor.inactiveSelectionBackground#d8d8d8
  • editor.lineHighlightBackground#f7fafb
  • editor.selectionBackground#a3ccfe
  • editorCursor.foreground#000000
  • editorGroupHeader.noTabsBackground#83d485
  • editorGroupHeader.tabsBackground#f3f3f3
  • editorHoverWidget.background#ffffff
  • editorHoverWidget.border#76b9f7
  • editorIndentGuide.background#d7d7d7
  • editorLineNumber.activeForeground#83d485
  • editorLineNumber.foreground#d7d7d7
  • editorSuggestWidget.background#ffffff
  • editorSuggestWidget.highlightForeground#3c993e
  • editorSuggestWidget.selectedBackground#a3ccfe
  • editorWhitespace.foreground#dd2400
  • editorWidget.background#f1f1f1
  • inputOption.activeBorder#76b9f7
  • list.activeSelectionBackground#3161e9
  • list.activeSelectionForeground#ffffff
  • list.inactiveSelectionBackground#c3c3c3
  • notificationCenterHeader.background#3c993e
  • notificationCenterHeader.foreground#ffffff
  • notifications.background#d8d8d8
  • notifications.border#696969
  • panelTitle.activeBorder#315ffe
  • panelTitle.activeForeground#315ffe
  • panelTitle.inactiveForeground#6b6b6b
  • peekView.border#83d485
  • peekViewEditor.background#ffffff
  • peekViewEditor.matchHighlightBackground#a3ccfe
  • peekViewResult.background#f3f3f3
  • peekViewResult.fileForeground#000000
  • peekViewResult.lineForeground#000000
  • peekViewResult.matchHighlightBackground#a3ccfe
  • peekViewResult.selectionBackground#315ffe
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#83d485
  • peekViewTitleDescription.foreground#676767
  • peekViewTitleLabel.foreground#000000
  • scrollbarSlider.activeBackground#696969
  • scrollbarSlider.background#696969
  • scrollbarSlider.hoverBackground#696969
  • sideBar.background#f3f3f3
  • sideBarTitle.foreground#000000
  • statusBar.background#f3f3f3
  • statusBar.debuggingBackground#83d485
  • statusBar.foreground#676767
  • statusBar.noFolderBackground#f3f3f3
  • tab.activeBackground#83d485
  • tab.border#3c993e
  • tab.inactiveBackground#c0c0c0
  • titleBar.activeBackground#eceded
  • titleBar.activeForeground#000000
  • titleBar.inactiveBackground#eceded
  • titleBar.inactiveForeground#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#000000ff
comment#009000italic
string, support.type.property-name.json, source.json#1A1AA6
constant.numeric#0F20F6
constant.language#916319
constant.character, constant.other#916319
variable#916319
keyword#CA0063
storage#CA0063
entity.name.class#CC4C07
entity.other.inherited-class#CC4C07
entity.name.function#053369
variable.parameter#053369
entity.name.tag, constant.language.php, constant.language.json#881181
entity.other.attribute-name#881181
support.function#7520AF
variable.other, variable.js, punctuation.separator.variable#996633
constant.language#000000
keyword.operator, declaration.function.operator, meta.preprocessor.c.include#000000
punctuation.section.embedded -(source string source punctuation.section.embedded), meta.brace.erb.html#F02A1D
invalid#EB291C
meta.function-call#163369
keyword.control#AA2063
sublimelinter.mark.warning#EDBA00
sublimelinter.gutter-mark#FFFFFF
sublimelinter.mark.error#DA2000
token.info-token#316bcd
token.warn-token#cd9731
token.error-token#cd3131
token.debug-token#800080

Shiki preview

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

Loading...

Coda Classic by Coaster McGee - VS Code Theme