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#FFFFFF
  • activityBar.background#FF6B00
  • activityBar.foreground#FFFFFF
  • activityBar.inactiveForeground#FFD9B8
  • activityBarBadge.background#FF2D00
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FF3D00
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#FF3D00
  • breadcrumb.background#FFEAD6
  • breadcrumb.foreground#B5713A
  • breadcrumbPicker.background#FFEAD6
  • button.background#FF6B00
  • button.foreground#FFFFFF
  • button.hoverBackground#FF8C1A
  • dropdown.background#FFEAD6
  • dropdown.border#FF9500
  • dropdown.foreground#2B1500
  • editor.background#FFF6EC
  • editor.findMatchBackground#FF8A0066
  • editor.findMatchHighlightBackground#FF8A0033
  • editor.foreground#2B1500
  • editor.lineHighlightBackground#FFEEDB
  • editor.selectionBackground#FFB05540
  • editor.selectionHighlightBackground#FF8A0033
  • editor.wordHighlightBackground#FFA02A33
  • editorCursor.foreground#FF3D00
  • editorError.foreground#FF3D00
  • editorGroupHeader.tabsBackground#FFEAD6
  • editorGutter.addedBackground#2EAD2E
  • editorGutter.deletedBackground#FF3D00
  • editorGutter.modifiedBackground#FF8C1A
  • editorIndentGuide.activeBackground1#FF9500
  • editorIndentGuide.background1#F7DEC6
  • editorInfo.foreground#00A8C4
  • editorLineNumber.activeForeground#FF6B00
  • editorLineNumber.foreground#F0C49A
  • editorOverviewRuler.addedForeground#2EAD2E
  • editorOverviewRuler.errorForeground#FF3D00
  • editorOverviewRuler.modifiedForeground#FF8C1A
  • editorWarning.foreground#FFB300
  • editorWhitespace.foreground#F5DCC2
  • gitDecoration.addedResourceForeground#2EAD2E
  • gitDecoration.deletedResourceForeground#FF3D00
  • gitDecoration.modifiedResourceForeground#FF8C1A
  • gitDecoration.untrackedResourceForeground#C99A6A
  • input.background#FFF6EC
  • input.border#FF9500
  • input.foreground#2B1500
  • input.placeholderForeground#E0B88A
  • inputOption.activeBackground#FF95002A
  • inputOption.activeBorder#FF3D00
  • list.activeSelectionBackground#FF8C1A
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#FF950088
  • list.hoverBackground#FFB87044
  • list.inactiveSelectionBackground#FFE0C8
  • notificationCenterHeader.background#FF6B00
  • notificationCenterHeader.foreground#FFFFFF
  • notifications.background#FFEAD6
  • notifications.border#FF9500
  • panel.background#FFEAD6
  • panel.border#FF9500
  • panelTitle.activeBorder#FF3D00
  • panelTitle.activeForeground#FF3D00
  • quickInput.background#FFEAD6
  • quickInputList.focusBackground#FF8C1A
  • scrollbarSlider.activeBackground#FF3D00AA
  • scrollbarSlider.background#FF950044
  • scrollbarSlider.hoverBackground#FF950088
  • sideBar.background#FFEAD6
  • sideBar.border#FF9500
  • sideBar.foreground#2B1500
  • sideBarSectionHeader.background#FFD6B0
  • sideBarSectionHeader.foreground#C44900
  • sideBarTitle.foreground#E85D04
  • statusBar.background#FF6B00
  • statusBar.debuggingBackground#FF2D00
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#E85D04
  • statusBarItem.hoverBackground#FFFFFF33
  • tab.activeBackground#FFF6EC
  • tab.activeBorderTop#FF3D00
  • tab.activeForeground#2B1500
  • tab.border#FF950044
  • tab.hoverBackground#FFB87044
  • tab.inactiveBackground#FFE0C8
  • tab.inactiveForeground#B5713A
  • terminal.ansiBlack#4A2400
  • terminal.ansiBlue#4D7FFF
  • terminal.ansiBrightBlack#9E6B3A
  • terminal.ansiBrightBlue#8FB0FF
  • terminal.ansiBrightCyan#66E0F0
  • terminal.ansiBrightGreen#80FF44
  • terminal.ansiBrightMagenta#FF8A5D
  • terminal.ansiBrightRed#FF6B3D
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFD24D
  • terminal.ansiCyan#00C2D8
  • terminal.ansiGreen#5FD938
  • terminal.ansiMagenta#FF5C2D
  • terminal.ansiRed#FF3D00
  • terminal.ansiWhite#FFE6CC
  • terminal.ansiYellow#FFB300
  • terminal.background#2B1500
  • terminal.foreground#FFE6CC
  • terminalCursor.foreground#FF3D00
  • titleBar.activeBackground#FF6B00
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#FF8C3D
  • titleBar.inactiveForeground#FFE6D0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#C7A07Aitalic
string, string.quoted#C98A00
constant.character.escape#FF3D00bold
constant.numeric, constant.language#FF7A00bold
keyword, keyword.control, keyword.operator.new#F26000bold
storage, storage.type#C44900bold
entity.name.function, meta.function-call entity.name.function#FF3D00bold
variable.parameter#C8651A
entity.name.class, entity.name.type, support.class#E8730Abold
entity.other.inherited-class#F09A4Ditalic
variable, variable.other#2B1500
variable.language, support.variable#C44900
variable.other.property, support.type.property-name, entity.other.attribute-name#00A8C4
support.function, support.function.builtin#FF8A3D
keyword.operator, punctuation.separator.key-value#FF3D00
punctuation, meta.brace#A6714A
entity.name.tag, meta.tag#F26000bold
entity.other.attribute-name.html#FF8A3D
support.type.property-name.css, meta.property-name.css#00A8C4
meta.property-value.css, support.constant.property-value.css#FF8A3D
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FF3D00bold
keyword.control.import, keyword.control.from, support.module#F26000bold
meta.decorator, entity.name.function.decorator, punctuation.decorator#E8A200italic
meta.type.annotation, support.type.primitive#E8730A
variable.other.constant#FF7A00bold
invalid#FF3D00bold underline
markup.heading, entity.name.section.markdown#F26000bold
markup.bold#FF3D00bold
markup.italic#FF9A40italic
markup.inline.raw, markup.fenced_code.block#00A8C4
markup.underline.link#FF8A3Dunderline
Precipi Themes by precipi - VS Code Theme