Skip to main content
Coding Theme

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.activeBorder#ff8c42
  • activityBar.background#1a1625
  • activityBar.foreground#b8a8d0
  • activityBarBadge.background#ff8c42
  • activityBarBadge.foreground#1a1625
  • badge.background#ff8c42
  • badge.foreground#1a1625
  • breadcrumb.activeSelectionForeground#ffb366
  • breadcrumb.focusForeground#e8e3f0
  • breadcrumb.foreground#8b7a9f
  • breadcrumbPicker.background#252030
  • button.background#ff8c42
  • button.foreground#1a1625
  • button.hoverBackground#ff9c5a
  • checkbox.background#252030
  • checkbox.border#4a3d5a
  • diffEditor.insertedTextBackground#7fb06920
  • diffEditor.removedTextBackground#e85a5a20
  • dropdown.background#252030
  • dropdown.border#4a3d5a
  • dropdown.foreground#e8e3f0
  • editor.background#1a1625
  • editor.foreground#e8e3f0
  • editor.lineHighlightBackground#252030
  • editor.selectionBackground#3d2f4a
  • editor.selectionHighlightBackground#2d233580
  • editorBracketMatch.background#3d2f4a
  • editorBracketMatch.border#ff8c42
  • editorCursor.foreground#ff8c42
  • editorError.foreground#e85a5a
  • editorGutter.addedBackground#7fb069
  • editorGutter.background#1a1625
  • editorGutter.deletedBackground#e85a5a
  • editorGutter.modifiedBackground#ffb366
  • editorHint.foreground#5fb3b3
  • editorIndentGuide.activeBackground1#4a3d5a
  • editorIndentGuide.background1#2d2335
  • editorInfo.foreground#6b9bd1
  • editorLineNumber.activeForeground#b8a8d0
  • editorLineNumber.foreground#5a5468
  • editorSuggestWidget.background#252030
  • editorSuggestWidget.border#4a3d5a
  • editorSuggestWidget.foreground#e8e3f0
  • editorSuggestWidget.highlightForeground#ff8c42
  • editorSuggestWidget.selectedBackground#3d2f4a
  • editorWarning.foreground#ffb366
  • editorWhitespace.foreground#2d2335
  • editorWidget.background#252030
  • editorWidget.border#4a3d5a
  • input.background#252030
  • input.border#4a3d5a
  • input.foreground#e8e3f0
  • inputOption.activeBorder#ff8c42
  • list.activeSelectionBackground#3d2f4a
  • list.activeSelectionForeground#ffb366
  • list.focusBackground#3d2f4a
  • list.hoverBackground#2d2335
  • list.inactiveSelectionBackground#2d2335
  • merge.commonHeaderBackground#4a3d5a40
  • merge.currentHeaderBackground#6b9bd140
  • merge.incomingHeaderBackground#7fb06940
  • panel.background#1a1625
  • panel.border#4a3d5a
  • panelTitle.activeForeground#ffb366
  • panelTitle.inactiveForeground#8b7a9f
  • peekView.border#ff8c42
  • peekViewEditor.background#252030
  • peekViewResult.background#1f1a2e
  • peekViewResult.selectionBackground#3d2f4a
  • progressBar.background#ff8c42
  • scrollbarSlider.activeBackground#5a4d6a80
  • scrollbarSlider.background#3d2f4a80
  • scrollbarSlider.hoverBackground#4a3d5a80
  • sideBar.background#1f1a2e
  • sideBar.foreground#d4cae8
  • sideBarSectionHeader.background#1f1a2e
  • sideBarSectionHeader.foreground#b8a8d0
  • sideBarTitle.foreground#ffb366
  • statusBar.background#1a1625
  • statusBar.debuggingBackground#8b4c7a
  • statusBar.foreground#b8a8d0
  • statusBar.noFolderBackground#1a1625
  • statusBarItem.activeBackground#3d2f4a
  • statusBarItem.hoverBackground#2d2335
  • tab.activeBackground#252030
  • tab.activeBorder#ff8c42
  • tab.activeForeground#ffb366
  • tab.border#1a1625
  • tab.hoverBackground#2d2335
  • tab.inactiveBackground#1f1a2e
  • tab.inactiveForeground#8b7a9f
  • terminal.ansiBlack#1a1625
  • terminal.ansiBlue#6b9bd1
  • terminal.ansiBrightBlack#5a5468
  • terminal.ansiBrightBlue#8bb8e8
  • terminal.ansiBrightCyan#7fd4d4
  • terminal.ansiBrightGreen#95d98f
  • terminal.ansiBrightMagenta#d4a8e0
  • terminal.ansiBrightRed#ff6b6b
  • terminal.ansiBrightWhite#f5f0ff
  • terminal.ansiBrightYellow#ffc966
  • terminal.ansiCyan#5fb3b3
  • terminal.ansiGreen#7fb069
  • terminal.ansiMagenta#b88bc7
  • terminal.ansiRed#e85a5a
  • terminal.ansiWhite#e8e3f0
  • terminal.ansiYellow#ffb366
  • terminal.background#1a1625
  • terminal.foreground#e8e3f0
  • textBlockQuote.background#252030
  • textBlockQuote.border#4a3d5a
  • textCodeBlock.background#252030
  • textLink.activeForeground#8bb8e8
  • textLink.foreground#6b9bd1
  • textPreformat.foreground#b88bc7
  • titleBar.activeBackground#1a1625
  • titleBar.activeForeground#e8e3f0
  • titleBar.inactiveBackground#1a1625
  • titleBar.inactiveForeground#8b7a9f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6b7a8fitalic
string, string.quoted, string.template#7fb069
constant.numeric, constant.language.boolean, constant.language.null#ffb366
keyword, storage.type, storage.modifier, keyword.control#b88bc7bold
entity.name.function, meta.function-call.generic, support.function#6b9bd1
entity.name.class, entity.name.type.class, support.class#ffb366bold
variable, variable.other, variable.parameter#e8e3f0
entity.name.type, support.type, storage.type#5fb3b3
variable.other.property, support.type.property-name#d4a8e0
entity.name.tag, punctuation.definition.tag#e85a5a
entity.other.attribute-name#ffb366
constant, constant.other, constant.language#ff8c42
keyword.operator, punctuation#b8a8d0
string.regexp#5fb3b3
markup.bold#ffb366bold
markup.italicitalic
markup.heading#ffb366bold
markup.underline.link#6b9bd1underline
markup.inline.raw, markup.fenced_code.block#b88bc7
meta.diff.header#6b9bd1
markup.deleted#e85a5a
markup.inserted#7fb069
invalid, invalid.illegal#e85a5a
invalid.deprecated#ffb366strikethrough
Tbilisi Night by Ioseb Koplatadze - VS Code Theme