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.activeBackground#7A334730
  • activityBar.activeBorder#D4758C
  • activityBar.background#160A0E
  • activityBar.border#00000000
  • activityBar.foreground#F2C4C4
  • activityBar.inactiveForeground#5C2035
  • activityBarBadge.background#C2607A
  • activityBarBadge.foreground#FDF0F0
  • badge.background#C2607A
  • badge.foreground#FDF0F0
  • breadcrumb.activeSelectionForeground#F2C4C4
  • breadcrumb.focusForeground#F2C4C4
  • breadcrumb.foreground#7A3347
  • breadcrumbPicker.background#1A0D10
  • button.background#C2607A
  • button.foreground#FDF0F0
  • button.hoverBackground#A04D5E
  • button.secondaryBackground#2E1218
  • button.secondaryForeground#F2C4C4
  • button.secondaryHoverBackground#3E1A20
  • checkbox.background#220E13
  • checkbox.border#5C2035
  • checkbox.foreground#F2C4C4
  • debugExceptionWidget.background#2E1218
  • debugExceptionWidget.border#C97B87
  • debugToolBar.background#2E1218
  • debugToolBar.border#5C2035
  • descriptionForeground#C97B87
  • dropdown.background#220E13
  • dropdown.border#5C2035
  • dropdown.foreground#F2C4C4
  • editor.background#1A0D10
  • editor.findMatchBackground#D4758C40
  • editor.findMatchHighlightBackground#D4758C25
  • editor.findRangeHighlightBackground#7A334730
  • editor.focusedStackFrameHighlightBackground#D4758C20
  • editor.foreground#F2C4C4
  • editor.hoverHighlightBackground#220E1350
  • editor.inactiveSelectionBackground#7A334730
  • editor.lineHighlightBackground#220E1360
  • editor.rangeHighlightBackground#220E1330
  • editor.selectionBackground#7A334750
  • editor.selectionHighlightBackground#7A334740
  • editor.stackFrameHighlightBackground#7A334720
  • editor.wordHighlightBackground#5C203550
  • editor.wordHighlightStrongBackground#7A334750
  • editorBracketHighlight.foreground1#D4758C
  • editorBracketHighlight.foreground2#C97B87
  • editorBracketHighlight.foreground3#A04D5E
  • editorBracketHighlight.foreground4#B56070
  • editorBracketHighlight.foreground5#EAAEB2
  • editorBracketHighlight.foreground6#F2C4C4
  • editorBracketHighlight.unexpectedBracket.foreground#C97B87
  • editorBracketMatch.background#D4758C20
  • editorBracketMatch.border#D4758C
  • editorCodeLens.foreground#7A3347
  • editorCursor.foreground#D4758C
  • editorError.foreground#C97B87
  • editorGroup.border#00000000
  • editorGroup.dropBackground#D4758C20
  • editorGroupHeader.noTabsBackground#160A0E
  • editorGroupHeader.tabsBackground#160A0E
  • editorGroupHeader.tabsBorder#00000000
  • editorGutter.addedBackground#D9B8A880
  • editorGutter.background#1A0D10
  • editorGutter.deletedBackground#9C334880
  • editorGutter.modifiedBackground#C97B8780
  • editorHint.foreground#7A3347
  • editorIndentGuide.activeBackground#7A334780
  • editorIndentGuide.background#5C203560
  • editorInfo.foreground#C97B87
  • editorLineNumber.activeForeground#C97B87
  • editorLineNumber.foreground#5C2035
  • editorOverviewRuler.addedForeground#D9B8A880
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.deletedForeground#9C334880
  • editorOverviewRuler.errorForeground#C97B8790
  • editorOverviewRuler.findMatchForeground#D4758C80
  • editorOverviewRuler.modifiedForeground#C97B8780
  • editorOverviewRuler.rangeHighlightForeground#D4758C40
  • editorOverviewRuler.selectionHighlightForeground#D4758C30
  • editorOverviewRuler.warningForeground#A04D5E90
  • editorOverviewRuler.wordHighlightForeground#C97B8780
  • editorOverviewRuler.wordHighlightStrongForeground#A04D5E80
  • editorRuler.foreground#5C203570
  • editorWarning.foreground#A04D5E
  • editorWhitespace.foreground#5C203570
  • errorForeground#C97B87
  • extensionButton.prominentBackground#C2607A
  • extensionButton.prominentForeground#FDF0F0
  • extensionButton.prominentHoverBackground#A04D5E
  • focusBorder#D4758C
  • foreground#F2C4C4
  • gitDecoration.addedResourceForeground#D9B8A8
  • gitDecoration.conflictingResourceForeground#C97B87
  • gitDecoration.deletedResourceForeground#9C3348
  • gitDecoration.ignoredResourceForeground#5C2035
  • gitDecoration.modifiedResourceForeground#C97B87
  • gitDecoration.renamedResourceForeground#C97B87
  • gitDecoration.submoduleResourceForeground#7A3347
  • gitDecoration.untrackedResourceForeground#D9B8A8
  • input.background#220E13
  • input.border#5C2035
  • input.foreground#F2C4C4
  • input.placeholderForeground#7A3347
  • inputOption.activeBackground#D4758C25
  • inputOption.activeBorder#D4758C
  • inputOption.activeForeground#F2C4C4
  • inputValidation.errorBackground#2E1218
  • inputValidation.errorBorder#C97B87
  • inputValidation.infoBackground#2E1218
  • inputValidation.infoBorder#C97B87
  • inputValidation.warningBackground#2E1218
  • inputValidation.warningBorder#A04D5E
  • list.activeSelectionBackground#7A334750
  • list.activeSelectionForeground#F2C4C4
  • list.errorForeground#C97B87
  • list.focusBackground#7A334750
  • list.focusForeground#F2C4C4
  • list.highlightForeground#D4758C
  • list.hoverBackground#220E1380
  • list.hoverForeground#F2C4C4
  • list.inactiveSelectionBackground#5C203540
  • list.inactiveSelectionForeground#F2C4C4
  • list.invalidItemForeground#7A3347
  • list.warningForeground#A04D5E
  • menu.background#1A0D10
  • menu.border#5C2035
  • menu.foreground#F2C4C4
  • menu.selectionBackground#7A334750
  • menu.selectionBorder#00000000
  • menu.selectionForeground#F2C4C4
  • menu.separatorBackground#2E1218
  • menubar.selectionBackground#7A334750
  • menubar.selectionBorder#00000000
  • menubar.selectionForeground#F2C4C4
  • notificationCenter.border#5C2035
  • notificationCenterHeader.background#160A0E
  • notificationCenterHeader.foreground#F2C4C4
  • notificationLink.foreground#D4758C
  • notifications.background#1A0D10
  • notifications.border#2E1218
  • notifications.foreground#F2C4C4
  • notificationsErrorIcon.foreground#C97B87
  • notificationsInfoIcon.foreground#C97B87
  • notificationsWarningIcon.foreground#A04D5E
  • panel.background#160A0E
  • panel.border#00000000
  • panel.dropBorder#D4758C
  • panelSectionHeader.background#160A0E
  • panelSectionHeader.border#00000000
  • panelSectionHeader.foreground#F2C4C4
  • panelTitle.activeBorder#D4758C
  • panelTitle.activeForeground#F2C4C4
  • panelTitle.inactiveForeground#7A3347
  • pickerGroup.border#2E1218
  • pickerGroup.foreground#7A3347
  • progressBar.background#D4758C
  • quickInput.background#1A0D10
  • quickInput.foreground#F2C4C4
  • quickInputList.focusBackground#7A334750
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#C2607A80
  • scrollbarSlider.background#7A334740
  • scrollbarSlider.hoverBackground#7A334760
  • settings.checkboxBackground#220E13
  • settings.checkboxBorder#5C2035
  • settings.checkboxForeground#F2C4C4
  • settings.dropdownBackground#220E13
  • settings.dropdownBorder#5C2035
  • settings.dropdownForeground#F2C4C4
  • settings.headerForeground#F2C4C4
  • settings.modifiedItemIndicator#D4758C
  • settings.numberInputBackground#220E13
  • settings.numberInputBorder#5C2035
  • settings.numberInputForeground#F2C4C4
  • settings.textInputBackground#220E13
  • settings.textInputBorder#5C2035
  • settings.textInputForeground#F2C4C4
  • sideBar.background#1F0E12
  • sideBar.border#00000000
  • sideBar.dropBackground#7A334750
  • sideBar.foreground#F2C4C4
  • sideBarSectionHeader.background#160A0E
  • sideBarSectionHeader.border#00000000
  • sideBarSectionHeader.foreground#F2C4C4
  • sideBarTitle.foreground#F2C4C4
  • statusBar.background#160A0E
  • statusBar.border#00000000
  • statusBar.debuggingBackground#9C3348
  • statusBar.debuggingForeground#FDF0F0
  • statusBar.foreground#F2C4C4
  • statusBar.noFolderBackground#2E1218
  • statusBar.noFolderForeground#F2C4C4
  • statusBarItem.activeBackground#7A334750
  • statusBarItem.hoverBackground#7A334730
  • statusBarItem.remoteBackground#C2607A
  • statusBarItem.remoteForeground#FDF0F0
  • symbolIcon.classForeground#EAAEB2
  • symbolIcon.colorForeground#D4758C
  • symbolIcon.constantForeground#EAAEB2
  • symbolIcon.constructorForeground#C97B87
  • symbolIcon.enumeratorForeground#EAAEB2
  • symbolIcon.enumeratorMemberForeground#EDD5C8
  • symbolIcon.eventForeground#D4758C
  • symbolIcon.fieldForeground#F2C4C4
  • symbolIcon.fileForeground#C97B87
  • symbolIcon.folderForeground#C97B87
  • symbolIcon.functionForeground#C97B87
  • symbolIcon.interfaceForeground#EAAEB2
  • symbolIcon.keyForeground#EDD5C8
  • symbolIcon.keywordForeground#D4758C
  • symbolIcon.methodForeground#C97B87
  • symbolIcon.moduleForeground#F2C4C4
  • symbolIcon.namespaceForeground#F2C4C4
  • symbolIcon.nullForeground#7A3347
  • symbolIcon.numberForeground#EAAEB2
  • symbolIcon.objectForeground#F2C4C4
  • symbolIcon.operatorForeground#C97B87
  • symbolIcon.packageForeground#C97B87
  • symbolIcon.propertyForeground#F2C4C4
  • symbolIcon.referenceForeground#EDD5C8
  • symbolIcon.snippetForeground#7A3347
  • symbolIcon.stringForeground#EDD5C8
  • symbolIcon.structForeground#EAAEB2
  • symbolIcon.textForeground#F2C4C4
  • symbolIcon.typeParameterForeground#EAAEB2
  • symbolIcon.unitForeground#EAAEB2
  • symbolIcon.variableForeground#F2C4C4
  • tab.activeBackground#1A0D10
  • tab.activeBorder#00000000
  • tab.activeBorderTop#D4758C
  • tab.activeForeground#F2C4C4
  • tab.border#00000000
  • tab.hoverBackground#220E13
  • tab.inactiveBackground#130A0C
  • tab.inactiveForeground#7A3347
  • tab.unfocusedActiveBackground#1A0D10
  • tab.unfocusedActiveForeground#C97B87
  • tab.unfocusedHoverBackground#220E1380
  • tab.unfocusedInactiveForeground#5C2035
  • terminal.ansiBlack#1A0D10
  • terminal.ansiBlue#B56070
  • terminal.ansiBrightBlack#5C2035
  • terminal.ansiBrightBlue#D4758C
  • terminal.ansiBrightCyan#F2C4C4
  • terminal.ansiBrightGreen#A04D5E
  • terminal.ansiBrightMagenta#EAAEB2
  • terminal.ansiBrightRed#C2607A
  • terminal.ansiBrightWhite#FDF0F0
  • terminal.ansiBrightYellow#C97B87
  • terminal.ansiCyan#C97B87
  • terminal.ansiGreen#7A3347
  • terminal.ansiMagenta#C2607A
  • terminal.ansiRed#9C3348
  • terminal.ansiWhite#EDD5C8
  • terminal.ansiYellow#A04D5E
  • terminal.background#1A0D10
  • terminal.foreground#F2C4C4
  • terminal.selectionBackground#7A334750
  • terminalCursor.background#1A0D10
  • terminalCursor.foreground#D4758C
  • titleBar.activeBackground#160A0E
  • titleBar.activeForeground#F2C4C4
  • titleBar.border#00000000
  • titleBar.inactiveBackground#160A0E
  • titleBar.inactiveForeground#7A3347
  • tree.indentGuidesStroke#5C2035
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A3347italic
keyword, keyword.control#D4758Cbold
keyword.control.dart, keyword.declaration.dart#D4758Cbold
keyword.other.dart#C97B87
keyword.operator#C97B87
storage, storage.type, storage.modifier#D4758Cbold
storage.type.dart, storage.modifier.dart#D4758Cbold
string, string.quoted, string.template#EDD5C8
string.quoted.single.dart, string.quoted.double.dart#EDD5C8
string.interpolated.expression.dart#F2C4C4
string.regexp, constant.character.escape#C97B87
constant.numeric, constant.language#EAAEB2
entity.name.function#C97B87bold
entity.name.function.dart#C97B87bold
meta.function-call#EDD5C8
entity.name.class, entity.name.type#EAAEB2bold
entity.name.class.dart, entity.name.type.dart, support.class.dart, support.class.flutter#EAAEB2bold
entity.name.tag#D4758Cbold
entity.other.attribute-name#EDD5C8
variable, variable.other#F2C4C4
variable.parameter#C97B87italic
variable.language.this#D4758Citalic
support.function, support.type#EAAEB2
meta.object-literal.key#C97B87
meta.decorator, meta.annotation.dart, storage.type.annotation.dart#D4758Citalic
punctuation, punctuation.separator, punctuation.accessor#A04D5E
markup.heading#D4758Cbold
markup.bold#EAAEB2bold
markup.italic#C97B87italic
markup.inline.raw, markup.inline.raw.string.markdown#EDD5C8
invalid, invalid.illegal#FDF0F0
Xiali Vintage Rose by xiali-themes - VS Code Theme