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#202329
  • activityBar.border#202329
  • activityBar.foreground#d9d9d9aa
  • activityBarBadge.background#627e9c
  • activityBarBadge.foreground#202329
  • badge.background#627e9c
  • badge.foreground#202329
  • button.background#627e9c
  • button.foreground#202329
  • button.hoverBackground#7ea2c9
  • debugExceptionWidget.background#272d38
  • debugExceptionWidget.border#343d4a
  • debugToolBar.background#272d38
  • diffEditor.insertedTextBackground#95e6cb02
  • diffEditor.removedTextBackground#f0717844
  • dropdown.background#262b30
  • dropdown.listBackground#262b30
  • editor.background#262b30
  • editor.findMatchBackground#d9d9d922
  • editor.findMatchHighlightBackground#d9d9d922
  • editor.findRangeHighlightBackground#d9d9d922
  • editor.foreground#d9d7ce
  • editor.hoverHighlightBackground#d9d9d911
  • editor.inactiveSelectionBackground#d9d9d922
  • editor.lineHighlightBackground#313438
  • editor.rangeHighlightBackground#313438
  • editor.selectionBackground#d9d9d922
  • editor.selectionHighlightBackground#d9d9d922
  • editor.wordHighlightBackground#EDB47922
  • editor.wordHighlightStrongBackground#EDB47922
  • editorBracketMatch.background#d9d9d944
  • editorBracketMatch.border#3d4752
  • editorCursor.foreground#d9d9d9
  • editorError.foreground#ff3333
  • editorGroup.border#343d4a
  • editorGroupHeader.noTabsBackground#262b30
  • editorGroupHeader.tabsBackground#202329
  • editorGroupHeader.tabsBorder#262b30
  • editorGutter.addedBackground#bae67e
  • editorGutter.deletedBackground#ff3333
  • editorGutter.modifiedBackground#5ccfe6
  • editorHoverWidget.background#272d38
  • editorHoverWidget.border#343d4a
  • editorIndentGuide.background1#2b333b
  • editorLineNumber.foreground#3d4752
  • editorLink.activeForeground#d9d9d9
  • editorMarkerNavigation.background#272d38
  • editorOverviewRuler.border#343d4a
  • editorOverviewRuler.errorForeground#ff3333
  • editorOverviewRuler.warningForeground#d9d9d9
  • editorRuler.foreground#343d4a
  • editorSuggestWidget.background#272d38
  • editorSuggestWidget.border#343d4a
  • editorSuggestWidget.highlightForeground#d9d9d9
  • editorSuggestWidget.selectedBackground#303540
  • editorWarning.foreground#d9d9d9
  • editorWhitespace.foreground#3d4752
  • editorWidget.background#272d38
  • extensionButton.prominentBackground#d9d9d9aa
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#d9d9d9bb
  • focusBorder#7386998a
  • foreground#d9d9d960
  • gitDecoration.ignoredResourceForeground#73869977
  • input.background#272d38
  • input.border#7386994c
  • input.foreground#d9d7ce
  • input.placeholderForeground#7386998a
  • inputOption.activeBorder#7386998a
  • inputValidation.errorBackground#262b30
  • inputValidation.errorBorder#ff3333
  • inputValidation.infoBackground#262b30
  • inputValidation.infoBorder#5ccfe6
  • inputValidation.warningBackground#262b30
  • inputValidation.warningBorder#ffd580
  • list.activeSelectionBackground#343d4a
  • list.activeSelectionForeground#d9d7ce
  • list.focusBackground#303540
  • list.focusForeground#d9d7ce
  • list.highlightForeground#d9d9d9
  • list.hoverBackground#303540
  • list.hoverForeground#d9d7ce
  • list.inactiveSelectionBackground#202329
  • list.inactiveSelectionForeground#d9d7ce
  • notebook.cellBorderColor#2C2F36
  • notebook.cellEditorBackground#2C2F36
  • notebook.editorBackground#262b30
  • notebook.focusedEditorBorder#d9d9d944
  • notificationCenter.border#202329
  • notificationCenterHeader.background#202329
  • notificationCenterHeader.foreground#d9d9d9
  • notificationLink.foreground#627e9c
  • notifications.background#343d4a
  • notifications.foreground#ffffff
  • notificationToast.border#202329
  • panel.background#1d2126
  • panel.border#1d2126
  • panelTitle.activeBorder#202329
  • panelTitle.activeForeground#d9d9d9
  • panelTitle.inactiveForeground#d9d9d960
  • peekView.border#343d4a
  • peekViewEditor.background#272d38
  • peekViewEditor.matchHighlightBackground#d9d9d933
  • peekViewResult.background#272d38
  • peekViewResult.fileForeground#d9d9d960
  • peekViewResult.matchHighlightBackground#d9d9d933
  • peekViewTitle.background#272d38
  • peekViewTitleDescription.foreground#d9d9d960
  • peekViewTitleLabel.foreground#d9d9d960
  • pickerGroup.border#202329
  • pickerGroup.foreground#d9d9d9
  • progressBar.background#d9d9d9
  • scrollbar.shadow#11141a11
  • scrollbarSlider.activeBackground#ffffff22
  • scrollbarSlider.background#ffffff11
  • scrollbarSlider.hoverBackground#ffffff22
  • selection.background#d9d9d922
  • sideBar.background#202329
  • sideBar.border#202329
  • sideBar.foreground#d9d9d9
  • sideBarSectionHeader.background#202329
  • sideBarSectionHeader.foreground#d9d9d9
  • sideBarTitle.foreground#d9d9d999
  • statusBar.background#202329
  • statusBar.border#202329
  • statusBar.debuggingBackground#272d38
  • statusBar.debuggingForeground#d9d9d9aa
  • statusBar.foreground#d9d9d9aa
  • statusBar.noFolderBackground#272d38
  • statusBarItem.activeBackground#343d4a
  • statusBarItem.hoverBackground#303540
  • statusBarItem.prominentBackground#343d4a
  • statusBarItem.prominentHoverBackground#303540
  • tab.activeBackground#262b30
  • tab.activeForeground#d9d9d9
  • tab.border#202329
  • tab.inactiveBackground#202329
  • tab.inactiveForeground#d9d9d960
  • tab.unfocusedActiveForeground#d9d7ceaa
  • tab.unfocusedInactiveForeground#d9d9d960
  • terminal.ansiBlack#343d4a
  • terminal.ansiBlue#36a3d9
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#627e9c
  • terminal.ansiBrightCyan#a6fde1
  • terminal.ansiBrightGreen#cbe645
  • terminal.ansiBrightMagenta#ff77ff
  • terminal.ansiBrightRed#f07178
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffdf80
  • terminal.ansiCyan#95e6cb
  • terminal.ansiGreen#bae67e
  • terminal.ansiMagenta#d4bfff
  • terminal.ansiRed#f07178
  • terminal.ansiWhite#c7c7c7
  • terminal.ansiYellow#d4bd61
  • terminal.background#1d2126
  • terminal.border#1b1e23
  • terminal.foreground#d9d7ce
  • textBlockQuote.background#272d38
  • textLink.activeForeground#d9d9d9
  • textLink.foreground#d9d9d9
  • textPreformat.foreground#d9d7ce
  • titleBar.activeBackground#202329
  • titleBar.activeForeground#d9d9d9aa
  • titleBar.border#202329
  • titleBar.inactiveBackground#202329
  • titleBar.inactiveForeground#d9d9d960
  • walkThrough.embeddedEditorBackground#272d38
  • widget.shadow#11141ab3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
function#ff0000
type#ff0000
markup.underlineunderline
markup.bold#99B5E5bold
punctuation.definition.heading.markdown#99B5E5
entity.name.section.markdown#99B5E5
markup.underline.link.markdown#99B5E5bold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inserted#B5CEA8
markup.deleted#CE9178
markup.changed#4B76D2
punctuation.definition.list.begin.markdown#4B76D2
comment, punctuation.definition.comment#6a6a74
string#ADAEB3
punctuation.definition, punctuation.section, punctuation.terminator, meta.brace, meta.fstring.python#ADAEB3
emphasisitalic
strongbold
string.quoted, punctiation.definition.string.begin, punctiation.definition.string.end, string.template, string.regexp.quoted#9AB57B
constant.numeric#CD9B6E
keyword#99B5E5
keyword.operator#65AAB9
keyword.control, keyword.operator.new#C287CC
variable, constant#CD9B6E
storage#C287CC
variable.other.readwrite, source.python, variable.parameter#AEB5C2
variable.other.object, entity.name.type#a5a2ff
support.variable#e87f7f
variable.language.this, meta.object-literal.key, #AEB5C2
entity#62A7E3
meta.function.decorator.python, punctuation.definition.decorator#62A7E3
support.function.magic#62A7E3
invalid#df2626
afoalb theme by afoalb-theme - VS Code Theme