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#0a1220
  • activityBar.border#555c6530
  • activityBar.foreground#f0f2f5
  • activityBar.inactiveForeground#9eaca1
  • activityBarBadge.background#e06b58
  • activityBarBadge.foreground#f0f2f5
  • badge.background#e06b58
  • badge.foreground#f0f2f5
  • breadcrumb.activeSelectionForeground#e48b7a
  • breadcrumb.background#0a1220
  • breadcrumb.focusForeground#f0f2f5
  • breadcrumb.foreground#9eaca1
  • breadcrumbPicker.background#0a1220
  • button.background#e06b58
  • button.foreground#f0f2f5
  • button.hoverBackground#e48b7a
  • diffEditor.insertedTextBackground#88988920
  • diffEditor.removedTextBackground#e06b5820
  • editor.background#0a1220
  • editor.findMatchBackground#b8b5a266
  • editor.findMatchHighlightBackground#b8b5a233
  • editor.foreground#f0f2f5
  • editor.lineHighlightBackground#0f1929
  • editor.selectionBackground#1a2535
  • editor.selectionHighlightBackground#1a253580
  • editorCursor.foreground#f0f2f5
  • editorError.foreground#e06b58
  • editorGutter.addedBackground#889889
  • editorGutter.deletedBackground#e06b58
  • editorGutter.modifiedBackground#b8b5a2
  • editorHint.foreground#555c65
  • editorHoverWidget.background#0a1220
  • editorHoverWidget.border#555c65
  • editorIndentGuide.activeBackground#555c6580
  • editorIndentGuide.background#555c6540
  • editorInfo.foreground#b8b8b6
  • editorLineNumber.activeForeground#f0f2f5
  • editorLineNumber.foreground#555c65
  • editorSuggestWidget.background#0a1220
  • editorSuggestWidget.border#555c65
  • editorSuggestWidget.selectedBackground#1a2535
  • editorWarning.foreground#b8b5a2
  • editorWhitespace.foreground#555c6540
  • editorWidget.background#0a1220
  • editorWidget.border#555c65
  • focusBorder#e48b7a
  • gitDecoration.addedResourceForeground#889889
  • gitDecoration.conflictingResourceForeground#f0a19a
  • gitDecoration.deletedResourceForeground#e06b58
  • gitDecoration.ignoredResourceForeground#555c65
  • gitDecoration.modifiedResourceForeground#b8b5a2
  • gitDecoration.untrackedResourceForeground#889889
  • input.background#0f1929
  • input.border#555c65
  • input.foreground#f0f2f5
  • input.placeholderForeground#9eaca180
  • inputOption.activeBorder#e48b7a
  • inputValidation.errorBackground#e06b5820
  • inputValidation.errorBorder#e06b58
  • inputValidation.infoBackground#b8b8b620
  • inputValidation.infoBorder#b8b8b6
  • inputValidation.warningBackground#b8b5a220
  • inputValidation.warningBorder#b8b5a2
  • list.activeSelectionBackground#1a2535
  • list.activeSelectionForeground#f0f2f5
  • list.highlightForeground#e48b7a
  • list.hoverBackground#0f1929
  • list.inactiveSelectionBackground#0f1929
  • menu.background#0a1220
  • menu.foreground#f0f2f5
  • menu.selectionBackground#1a2535
  • menu.selectionForeground#f0f2f5
  • menu.separatorBackground#555c65
  • menubar.selectionBackground#1a2535
  • menubar.selectionForeground#f0f2f5
  • panel.background#0a1220
  • panel.border#555c6530
  • panelTitle.activeBorder#e48b7a
  • panelTitle.activeForeground#f0f2f5
  • panelTitle.inactiveForeground#9eaca1
  • peekView.border#e48b7a
  • peekViewEditor.background#0a1220
  • peekViewResult.background#0a1220
  • peekViewResult.selectionBackground#1a2535
  • peekViewTitle.background#0f1929
  • progressBar.background#e48b7a
  • scrollbarSlider.activeBackground#555c65
  • scrollbarSlider.background#555c6550
  • scrollbarSlider.hoverBackground#555c6580
  • sideBar.background#0a1220
  • sideBar.border#555c6530
  • sideBar.foreground#e3ddda
  • sideBarSectionHeader.background#0f1929
  • sideBarSectionHeader.border#555c6530
  • sideBarSectionHeader.foreground#f0f2f5
  • sideBarTitle.foreground#f0f2f5
  • statusBar.background#0a1220
  • statusBar.border#555c6530
  • statusBar.debuggingBackground#e06b58
  • statusBar.debuggingForeground#f0f2f5
  • statusBar.foreground#e3ddda
  • statusBar.noFolderBackground#0a1220
  • statusBarItem.prominentBackground#555c65
  • statusBarItem.prominentHoverBackground#1a2535
  • tab.activeBackground#0a1220
  • tab.activeBorder#e48b7a
  • tab.activeBorderTop#e48b7a
  • tab.activeForeground#f0f2f5
  • tab.border#555c6530
  • tab.inactiveBackground#0a1220
  • tab.inactiveForeground#9eaca1
  • terminal.ansiBlack#0a1220
  • terminal.ansiBlue#b8b8b6
  • terminal.ansiBrightBlack#555c65
  • terminal.ansiBrightBlue#cdcbc9
  • terminal.ansiBrightCyan#e3ddda
  • terminal.ansiBrightGreen#9eaca1
  • terminal.ansiBrightMagenta#f0a19a
  • terminal.ansiBrightRed#e06b58
  • terminal.ansiBrightWhite#f0f2f5
  • terminal.ansiBrightYellow#c8c3b8
  • terminal.ansiCyan#d0cac7
  • terminal.ansiGreen#889889
  • terminal.ansiMagenta#e48b7a
  • terminal.ansiRed#e06b58
  • terminal.ansiWhite#f0f2f5
  • terminal.ansiYellow#b8b5a2
  • terminal.background#0a1220
  • terminal.foreground#f0f2f5
  • titleBar.activeBackground#0a1220
  • titleBar.activeForeground#f0f2f5
  • titleBar.border#555c6530
  • titleBar.inactiveBackground#0a1220
  • titleBar.inactiveForeground#9eaca1

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#555c65italic
comment.block.documentation, comment.line.documentation#c8c3b8italic
string, string.quoted#889889
string.regexp#9eaca1
constant.numeric, constant.character#d0cac7
constant.language#e06b58
constant.other, variable.other.constant#e48b7a
keyword, keyword.control, storage#b8b8b6
keyword.operator#f0f2f5
storage.type, storage.modifier#e48b7a
entity.name.function, meta.function-call, support.function#e06b58
entity.name.type, entity.name.class, support.class, support.type#b8b5a2
variable, variable.other#f0f2f5
variable.parameter, meta.parameter#d0cac7
variable.other.property, variable.other.object.property#d0cac7
entity.other.attribute-name#b8b5a2
entity.name.tag#e06b58
meta.tag, punctuation.definition.tag#f0f2f5
meta.preprocessor, keyword.other.preprocessor#f0a19a
punctuation#d0cac7
punctuation.separator, punctuation.terminator#f0f2f5
string.escape, constant.character.escape#9eaca1
markup.heading#e06b58bold
markup.bold#e48b7abold
markup.italic#f0a19aitalic
markup.inline.raw, markup.fenced_code#889889
markup.underline.link#b8b8b6
markup.list#e06b58
invalid, invalid.illegal#e06b58bold
Fireside by cipher-shad0w - VS Code Theme