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.background#3D1632
  • activityBar.foreground#FFC2D9
  • activityBar.inactiveForeground#FFC2D980
  • activityBarBadge.background#6A9A6C
  • activityBarBadge.foreground#FFFFFF
  • badge.background#6A9A6C
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#DC548F
  • breadcrumb.background#1E1A1D
  • breadcrumb.focusForeground#FFC2D9
  • breadcrumb.foreground#E5E5E5
  • button.background#DC548F
  • button.foreground#FFF0F5
  • button.hoverBackground#D23B80
  • button.secondaryBackground#6A9A6C
  • button.secondaryForeground#FFFFFF
  • button.secondaryHoverBackground#518053
  • editor.background#1E1A1D
  • editor.findMatchBackground#D23B80
  • editor.findMatchHighlightBackground#DC548F40
  • editor.foreground#E5E5E5
  • editor.lineHighlightBackground#DC548F10
  • editor.lineHighlightBorder#DC548F00
  • editor.selectionBackground#502F41
  • editor.selectionHighlightBackground#6A9A6C40
  • editor.wordHighlightBackground#D4E6D580
  • editorCursor.foreground#DC548F
  • editorGroup.border#3D1632
  • editorGroup.dropBackground#DC548F20
  • editorGroupHeader.tabsBackground#2A1F24
  • editorLineNumber.activeForeground#DC548F
  • editorLineNumber.foreground#7A7A7A
  • editorSuggestWidget.background#2A1F24
  • editorSuggestWidget.border#3D1632
  • editorSuggestWidget.highlightForeground#DC548F
  • editorSuggestWidget.selectedBackground#502F41
  • editorWidget.background#2A1F24
  • editorWidget.border#3D1632
  • gitDecoration.addedResourceForeground#6A9A6C
  • gitDecoration.conflictingResourceForeground#E0BD6C
  • gitDecoration.deletedResourceForeground#D23B80
  • gitDecoration.ignoredResourceForeground#7A7A7A
  • gitDecoration.modifiedResourceForeground#8CAFF0
  • gitDecoration.untrackedResourceForeground#8AB68C
  • input.background#2A1F24
  • input.border#3D1632
  • input.foreground#E5E5E5
  • input.placeholderForeground#8AB68C
  • inputOption.activeBackground#DC548F50
  • inputOption.activeBorder#DC548F00
  • inputOption.activeForeground#FFFFFF
  • list.activeSelectionBackground#7A3154
  • list.activeSelectionForeground#FFC2D9
  • list.dropBackground#502F41
  • list.focusBackground#502F41
  • list.focusForeground#FFC2D9
  • list.highlightForeground#DC548F
  • list.hoverBackground#3D1632
  • list.hoverForeground#FFC2D9
  • list.inactiveSelectionBackground#3D1632
  • list.inactiveSelectionForeground#E5E5E5
  • menu.background#2A1F24
  • menu.foreground#E5E5E5
  • menu.selectionBackground#502F41
  • menu.selectionForeground#FFC2D9
  • menu.separatorBackground#DC548F50
  • menubar.selectionBackground#502F41
  • menubar.selectionForeground#FFC2D9
  • notificationCenter.border#3D1632
  • notificationLink.foreground#DC548F
  • notifications.background#2A1F24
  • notifications.border#3D1632
  • notificationsErrorIcon.foreground#D23B80
  • notificationsInfoIcon.foreground#8CAFF0
  • notificationsWarningIcon.foreground#E0BD6C
  • panel.background#2A1F24
  • panel.border#3D1632
  • panelTitle.activeBorder#DC548F
  • panelTitle.activeForeground#DC548F
  • panelTitle.inactiveForeground#E5E5E5
  • peekView.border#DC548F
  • peekViewEditor.background#1E1A1D
  • peekViewEditor.matchHighlightBackground#502F41
  • peekViewResult.background#2A1F24
  • peekViewResult.matchHighlightBackground#DC548F40
  • peekViewResult.selectionBackground#502F41
  • peekViewTitle.background#3D1632
  • peekViewTitleLabel.foreground#FFC2D9
  • pickerGroup.border#3D1632
  • pickerGroup.foreground#DC548F
  • progressBar.background#DC548F
  • scrollbarSlider.activeBackground#DC548F80
  • scrollbarSlider.background#DC548F40
  • scrollbarSlider.hoverBackground#DC548F60
  • settings.headerForeground#DC548F
  • settings.modifiedItemIndicator#DC548F
  • sideBar.background#2A1F24
  • sideBar.foreground#E5E5E5
  • sideBarSectionHeader.background#3D1632
  • sideBarSectionHeader.foreground#FFC2D9
  • sideBarTitle.foreground#DC548F
  • statusBar.background#3D1632
  • statusBar.debuggingBackground#D23B80
  • statusBar.foreground#FFC2D9
  • statusBar.noFolderBackground#306932
  • statusBarItem.activeBackground#DC548F50
  • statusBarItem.hoverBackground#DC548F30
  • statusBarItem.remoteBackground#6A9A6C
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#1E1A1D
  • tab.activeBorder#DC548F
  • tab.activeBorderTop#00000000
  • tab.activeForeground#DC548F
  • tab.border#2A1F24
  • tab.inactiveBackground#2A1F24
  • tab.inactiveForeground#E5E5E5
  • tab.unfocusedActiveBorder#DC548F80
  • terminal.ansiBlack#2A1F24
  • terminal.ansiBlue#8CAFF0
  • terminal.ansiBrightBlack#7A7A7A
  • terminal.ansiBrightBlue#7A9FE8
  • terminal.ansiBrightCyan#7ACAD5
  • terminal.ansiBrightGreen#8AB68C
  • terminal.ansiBrightMagenta#FFB8D9
  • terminal.ansiBrightRed#FF8AC8
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#F0CB7A
  • terminal.ansiCyan#4DACB8
  • terminal.ansiGreen#6A9A6C
  • terminal.ansiMagenta#DC548F
  • terminal.ansiRed#D23B80
  • terminal.ansiWhite#E5E5E5
  • terminal.ansiYellow#E0BD6C
  • terminal.background#1E1A1D
  • terminal.foreground#E5E5E5
  • terminal.selectionBackground#502F41
  • titleBar.activeBackground#3D1632
  • titleBar.activeForeground#FFC2D9
  • titleBar.inactiveBackground#2A1F24
  • titleBar.inactiveForeground#FFC2D980

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#678D69italic
string, punctuation.definition.string#8AB68C—
keyword, storage.type, storage.modifier#DC548F—
entity.name.function, support.function#8CAFF0—
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution#E0BD6C—
variable, entity.name.variable#E5E5E5—
variable.other.constant, support.constant#FFB8D9—
constant.numeric#FFB8D9—
punctuation#AAAAAA—
meta.brace.square, punctuation.definition.bracket#7ACAD5—
meta.brace.curly, punctuation.definition.block#F0CB7A—
meta.brace.round, punctuation.definition.parameters, punctuation.definition.group#FF8AC8—
entity.name.tag, punctuation.definition.tag#DC548F—
entity.other.attribute-name#E0BD6C—
markup.heading#DC548Fbold
markup.bold#E5E5E5bold
markup.italic#E5E5E5italic
markup.underline.link#8CAFF0—
string.regexp#4DACB8—
constant.character.escape#4DACB8—
support.type.property-name.json#DC548F—
string.quoted.double.json#8AB68C—
support.type.property-name.css#FFB8D9—
support.constant.property-value.css#8AB68C—
entity.name.tag.css, entity.other.attribute-name.class.css#DC548F—
entity.name.tag.html#DC548F—
entity.other.attribute-name.html#E0BD6C—
variable.other.readwrite.js, variable.other.object.js#E5E5E5—
support.type.primitive.ts, support.type.builtin.ts#E0BD6C—
variable.parameter.function.language.python#E0BD6C—
meta.function-call.python#8CAFF0—
markup.underline.link.markdown#8CAFF0—
markup.heading.markdown#DC548F—
markup.bold.markdown#FFB8D9bold
markup.italic.markdown#FFB8D9italic
markup.inline.raw.markdown#8AB68C—
Fruitbasket Theme by charlotte-dev - VS Code Theme