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.activeBackground#d7141400
  • activityBar.background#333747
  • activityBar.border#fff3f3
  • activityBar.foreground#00c2ff
  • activityBar.inactiveForeground#84c6f0
  • activityBarBadge.background#fb1e45
  • activityBarBadge.foreground#ffffff
  • badge.background#fb1e45
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#ee5f5f
  • breadcrumb.background#ffffff
  • breadcrumb.focusForeground#ee5f5f
  • breadcrumb.foreground#fcb900
  • button.background#00c2ff
  • button.foreground#ffffff
  • button.hoverBackground#124ddb
  • button.secondaryBackground#727581
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#5c5e6a
  • checkbox.background#ffffff
  • checkbox.border#00000000
  • checkbox.foreground#0a0a0a
  • debugExceptionWidget.background#ffffff
  • debugExceptionWidget.border#d6d7dd
  • debugToolBar.background#ffffff
  • debugToolBar.border#d6d7dd
  • diffEditor.border#aaacb4
  • diffEditor.insertedTextBackground#d6fff2c5
  • diffEditor.removedTextBackground#ffc2c762
  • dropdown.background#ffffff
  • dropdown.border#00000000
  • dropdown.foreground#0a0a0a
  • editor.background#f0f3f5
  • editor.findMatchBackground#ffe0ef
  • editor.findMatchBorder#ff8fc3
  • editor.findMatchHighlightBackground#ffe0ef
  • editor.findMatchHighlightBorder#ffffff00
  • editor.findRangeHighlightBackground#f7f8f9
  • editor.findRangeHighlightBorder#ffffff00
  • editor.foldBackground#e0e9ff
  • editor.foreground#04354d
  • editor.hoverHighlightBackground#e0e9ff
  • editor.inactiveSelectionBackground#fff153
  • editor.lineHighlightBackground#e0e9ff
  • editor.lineHighlightBorder#e7e8ec
  • editor.rangeHighlightBackground#e0e9ff
  • editor.rangeHighlightBorder#c7d8ff
  • editor.selectionBackground#ffe0ef
  • editor.selectionHighlightBackground#e0e9ff
  • editor.selectionHighlightBorder#adc6ff
  • editor.wordHighlightBackground#e0e9ff
  • editor.wordHighlightStrongBackground#e0e9ff
  • editorBracketMatch.background#ffe0ef
  • editorBracketMatch.border#ffc2de
  • editorCodeLens.foreground#5c5e6a
  • editorCursor.background#fff153
  • editorCursor.foreground#000000
  • editorError.background#B73A3400
  • editorError.border#ffffff00
  • editorError.foreground#fff153
  • editorGroup.border#aaacb4
  • editorGroup.emptyBackground#f0f3f5
  • editorGroupHeader.border#e7e8ec
  • editorGroupHeader.tabsBackground#eeeeee
  • editorGroupHeader.tabsBorder#8ed1fc
  • editorGutter.addedBackground#00d084
  • editorGutter.background#f0f3f5
  • editorGutter.commentRangeForeground#5c5e6a
  • editorGutter.deletedBackground#fcb622
  • editorGutter.foldingControlForeground#5c5e6a
  • editorGutter.modifiedBackground#ff8fc3
  • editorHoverWidget.background#f7f8f9
  • editorHoverWidget.border#c5c7cd
  • editorHoverWidget.foreground#0a0a0a
  • editorInfo.background#fff153
  • editorInfo.border#4490BF00
  • editorInfo.foreground#2d68f4
  • editorLineNumber.activeForeground#fb1e45
  • editorLineNumber.foreground#5c5e6a
  • editorLink.activeForeground#00c2ff
  • editorMarkerNavigation.background#effaff
  • editorMarkerNavigationError.background#fb1e45
  • editorMarkerNavigationInfo.background#75e0ff
  • editorMarkerNavigationWarning.background#fcb622
  • editorOverviewRuler.background#25252500
  • editorOverviewRuler.border#7f7f7f4d
  • editorRuler.foreground#d6d7dd
  • editorSuggestWidget.background#f7f8f9
  • editorSuggestWidget.border#c5c7cd
  • editorSuggestWidget.foreground#000000
  • editorSuggestWidget.highlightForeground#fb1e45
  • editorSuggestWidget.selectedBackground#ffe0ef
  • editorWarning.background#A9904000
  • editorWarning.border#ffffff00
  • editorWarning.foreground#ff6900
  • editorWhitespace.foreground#33333333
  • editorWidget.background#f7f8f9
  • editorWidget.foreground#0a0a0a
  • editorWidget.resizeBorder#d6d7dd
  • focusBorder#00c2ff
  • foreground#0a0a0a
  • gitDecoration.addedResourceForeground#00d084
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#fb1e45
  • gitDecoration.ignoredResourceForeground#8e8e90
  • gitDecoration.modifiedResourceForeground#00c2ff
  • gitDecoration.stageDeletedResourceForeground#ff6900
  • gitDecoration.stageModifiedResourceForeground#0693e3
  • gitDecoration.submoduleResourceForeground#8ed1fc
  • gitDecoration.untrackedResourceForeground#00d084
  • icon.foreground#0a0a0a
  • input.background#ffffff
  • input.border#00000000
  • input.foreground#0a0a0a
  • input.placeholderForeground#5c5e6a
  • inputOption.activeBackground#e0e9ff
  • inputOption.activeBorder#adc6ff
  • inputOption.activeForeground#00c2ff
  • list.activeSelectionBackground#ffe0ef
  • list.activeSelectionForeground#0a0a0a
  • list.dropBackground#e1edf9
  • list.focusBackground#dbedff
  • list.focusForeground#0a0a0a
  • list.highlightForeground#fb1e45
  • list.hoverBackground#b6ecff
  • list.hoverForeground#0a0a0a
  • list.inactiveSelectionBackground#f3f5ff
  • list.inactiveSelectionForeground#00c2ff
  • listFilterWidget.background#ffe0ef
  • listFilterWidget.noMatchesOutline#fb1e45
  • listFilterWidget.outline#ffc2de
  • menu.background#ffffff
  • menu.border#e7e8ec00
  • menu.foreground#5c5e6a
  • menu.selectionBackground#e0e9ff
  • menu.selectionBorder#c2080800
  • menu.selectionForeground#0a0a0a
  • menu.separatorBackground#e7e8ec
  • menubar.selectionBackground#e0e9ff
  • menubar.selectionBorder#a30e0e00
  • menubar.selectionForeground#0a0a0a
  • merge.commonContentBackground#e7e8ec
  • merge.commonHeaderBackground#d6d7dd
  • merge.currentContentBackground#d6fff2
  • merge.currentHeaderBackground#b2ffe6
  • merge.incomingContentBackground#e0e9ff
  • merge.incomingHeaderBackground#c7d8ff
  • minimap.background#f0f3f5
  • minimap.errorHighlight#d92834
  • minimap.findMatchHighlight#ffe0ef
  • minimap.selectionHighlight#ffe0ef
  • minimap.warningHighlight#ff6900
  • minimapGutter.addedBackground#00d084
  • minimapGutter.deletedBackground#fcb622
  • minimapGutter.modifiedBackground#ff8fc3
  • notificationCenter.border#effaff
  • notificationCenterHeader.background#effaff
  • notificationCenterHeader.foreground#616161
  • notifications.background#effaff
  • notifications.border#effaff
  • notifications.foreground#736f6f
  • notificationsErrorIcon.foreground#fb1e45
  • notificationsInfoIcon.foreground#00c2ff
  • notificationsWarningIcon.foreground#fcb622
  • notificationToast.border#d5d5d5
  • panel.background#ffffff
  • panel.border#d6d7dd
  • panelSection.border#d6d7dd
  • panelTitle.activeBorder#fb1e45
  • panelTitle.activeForeground#ff6900
  • panelTitle.inactiveForeground#5c5e6a
  • peekView.border#2d68f4
  • peekViewEditor.background#ffffff
  • peekViewEditor.matchHighlightBackground#b6ecff
  • peekViewEditor.matchHighlightBorder#00c2ff
  • peekViewEditorGutter.background#e0e9ff
  • peekViewResult.background#f7f8f9
  • peekViewResult.fileForeground#5c5e6a
  • peekViewResult.lineForeground#0a0a0a
  • peekViewResult.matchHighlightBackground#ffe0ef
  • peekViewResult.selectionBackground#e0e9ff
  • peekViewResult.selectionForeground#0a0a0a
  • peekViewTitle.background#e0e9ff50
  • peekViewTitleDescription.foreground#5c5e6a
  • peekViewTitleLabel.foreground#0a0a0a
  • pickerGroup.border#d6d7dd
  • pickerGroup.foreground#00c2ff
  • progressBar.background#fb1e45
  • scrollbar.shadow#d6d7dd
  • scrollbarSlider.activeBackground#aaacb4
  • scrollbarSlider.background#d6d7dd
  • scrollbarSlider.hoverBackground#c5c7cd
  • selection.background#e0e9ff
  • settings.focusedRowBackground#ffffff07
  • settings.headerForeground#0a0a0a
  • sideBar.background#ffffff
  • sideBar.border#caccd7
  • sideBar.dropBackground#e1edf9
  • sideBar.foreground#04354d
  • sideBarSectionHeader.background#f7f8f9
  • sideBarSectionHeader.border#61616100
  • sideBarSectionHeader.foreground#5c5e6a
  • sideBarTitle.foreground#3a3d41
  • statusBar.background#00c2ff
  • statusBar.debuggingBackground#ff6900
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#00c2ff
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.activeBackground#FFFFFF25
  • statusBarItem.hoverBackground#5c5e6a
  • statusBarItem.remoteBackground#fb1e45
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#ffffff
  • tab.activeBorder#fb1e45
  • tab.activeBorderTop#e10e7100
  • tab.activeForeground#0693e3
  • tab.border#c5c7cd
  • tab.hoverBackground#e0e9ff
  • tab.hoverForeground#0a0a0a
  • tab.inactiveBackground#f7f8f9
  • tab.inactiveForeground#5c5e6a
  • terminal.ansiBlack#0a0a0a
  • terminal.ansiBlue#0039c2
  • terminal.ansiBrightBlack#5c5e6a
  • terminal.ansiBrightBlue#00c2ff
  • terminal.ansiBrightCyan#b6ecff
  • terminal.ansiBrightGreen#00d084
  • terminal.ansiBrightMagenta#6b39cc
  • terminal.ansiBrightRed#fb1e45
  • terminal.ansiBrightWhite#727581
  • terminal.ansiBrightYellow#ff6900
  • terminal.ansiCyan#2cd1ff
  • terminal.ansiGreen#00d084
  • terminal.ansiMagenta#4414a3
  • terminal.ansiRed#fb1e45
  • terminal.ansiWhite#5c5e6a
  • terminal.ansiYellow#ff6900
  • terminal.border#d6d7dd
  • terminal.foreground#0a0a0a
  • terminal.selectionBackground#8ed1fc
  • terminalCursor.background#00c2ff
  • terminalCursor.foreground#5c5e6a
  • textLink.foreground#00c2ff
  • titleBar.activeBackground#c1e7ff
  • titleBar.activeForeground#0693e3
  • titleBar.border#e7e8ec
  • titleBar.inactiveBackground#bdd8ea
  • titleBar.inactiveForeground#0693e3
  • tree.indentGuidesStroke#dbdada
  • walkThrough.embeddedEditorBackground#00000050
  • widget.shadow#00000029

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#f78da7italic
comment.block.preprocessor#f78da7
comment.documentation, comment.block.documentation#00c2ff
invalid.illegal#04354d
keyword.operator#ff6900
keyword, storage#ff6900
storage.type, support.type#fb1e45
constant.language, support.constant, variable.language#ff6900
variable, support.variable#9b51e0
entity.name.function, support.function#00C2FFbold
entity.name.type, entity.other.inherited-class, support.class#9b51e0bold
entity.name.exception#660000
entity.name.sectionbold
constant.numeric, constant.character, constant#ff6900
string#04354d
constant.character.escape#00d084
string.regexp#fb1e45
constant.other.symbol#fcb622
punctuation#fb1e45
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#AAAAAA
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#0078ab
entity.name.tag#0078ab
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#FCB622italic
constant.character.entity, punctuation.definition.entity#ff6900
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#9b51e0
meta.property-name, support.type.property-name#ff6900
meta.property-value, meta.property-value constant.other, support.constant.property-value#00d084
keyword.other.importantbold
markup.changed#000000
markup.deleted#000000
markup.italicitalic
markup.error#660000
markup.inserted#000000
meta.link#0078ab
markup.output, markup.raw#777777
markup.prompt#777777
markup.heading#FB1E45
markup.boldbold
markup.traceback#660000
markup.underlineunderline
markup.quote#9b51e0
markup.list#00C2FF
markup.bold, markup.italic#00d084
markup.inline.raw#ff6900
meta.diff.range, meta.diff.index, meta.separator#434343
meta.diff.header.from-file#434343
meta.diff.header.to-file#434343
avenga-theme-vs by juan santos - VS Code Theme