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#100C0C
  • activityBar.foreground#CC3333
  • activityBar.inactiveForeground#5A3A3A
  • activityBarBadge.background#CC3333
  • activityBarBadge.foreground#E8DDD0
  • badge.background#CC3333
  • badge.foreground#E8DDD0
  • breadcrumb.activeSelectionForeground#E8DDD0
  • breadcrumb.focusForeground#CC3333
  • breadcrumb.foreground#5A3A3A
  • button.background#CC3333
  • button.foreground#E8DDD0
  • button.hoverBackground#DD4444
  • dropdown.background#100C0C
  • dropdown.border#5A3A3A
  • dropdown.foreground#E8DDD0
  • editor.background#141010
  • editor.findMatchBackground#CC333344
  • editor.findMatchHighlightBackground#CC333322
  • editor.foreground#E8DDD0
  • editor.lineHighlightBackground#1C1616
  • editor.selectionBackground#CC333340
  • editor.selectionHighlightBackground#CC333325
  • editor.wordHighlightBackground#CC333325
  • editor.wordHighlightStrongBackground#CC333340
  • editorBracketHighlight.foreground1#CC3333
  • editorBracketHighlight.foreground2#E8943A
  • editorBracketHighlight.foreground3#9B5675
  • editorBracketHighlight.foreground4#5A6A8B
  • editorBracketHighlight.foreground5#6B8B5E
  • editorBracketHighlight.foreground6#BB7695
  • editorBracketMatch.background#CC333325
  • editorBracketMatch.border#CC3333
  • editorCursor.foreground#CC3333
  • editorError.foreground#FF4444
  • editorGroupHeader.tabsBackground#100C0C
  • editorGutter.addedBackground#6B8B5E
  • editorGutter.deletedBackground#CC3333
  • editorGutter.modifiedBackground#E8943A
  • editorIndentGuide.activeBackground#6B3A3A
  • editorIndentGuide.background#3A2828
  • editorLineNumber.activeForeground#CC3333
  • editorLineNumber.foreground#5A3A3A
  • editorOverviewRuler.addedForeground#6B8B5E
  • editorOverviewRuler.deletedForeground#CC3333
  • editorOverviewRuler.modifiedForeground#E8943A
  • editorWarning.foreground#E8943A
  • editorWhitespace.foreground#3A2828
  • gitDecoration.addedResourceForeground#6B8B5E
  • gitDecoration.conflictingResourceForeground#FF5555
  • gitDecoration.deletedResourceForeground#CC3333
  • gitDecoration.ignoredResourceForeground#3A2828
  • gitDecoration.modifiedResourceForeground#E8943A
  • gitDecoration.untrackedResourceForeground#6B8B5E
  • input.background#100C0C
  • input.border#5A3A3A
  • input.foreground#E8DDD0
  • input.placeholderForeground#5A3A3A
  • inputOption.activeBorder#CC3333
  • list.activeSelectionBackground#3A1818
  • list.activeSelectionForeground#CC3333
  • list.focusBackground#3A1818
  • list.focusForeground#CC3333
  • list.highlightForeground#CC3333
  • list.hoverBackground#1C1616
  • list.hoverForeground#E8DDD0
  • list.inactiveSelectionBackground#1C1616
  • list.inactiveSelectionForeground#E8DDD0
  • minimap.selectionHighlight#CC333340
  • notificationCenter.border#CC3333
  • notifications.background#100C0C
  • notifications.foreground#E8DDD0
  • panel.background#100C0C
  • panel.border#1C1616
  • panelTitle.activeBorder#CC3333
  • panelTitle.activeForeground#CC3333
  • panelTitle.inactiveForeground#5A3A3A
  • peekView.border#CC3333
  • peekViewEditor.background#100C0C
  • peekViewResult.background#100C0C
  • peekViewTitle.background#100C0C
  • peekViewTitleLabel.foreground#CC3333
  • scrollbar.shadow#00000050
  • scrollbarSlider.activeBackground#CC333390
  • scrollbarSlider.background#CC333330
  • scrollbarSlider.hoverBackground#CC333360
  • sideBar.background#100C0C
  • sideBar.border#1C1616
  • sideBar.foreground#A89888
  • sideBarSectionHeader.background#141010
  • sideBarSectionHeader.foreground#CC3333
  • sideBarTitle.foreground#CC3333
  • statusBar.background#100C0C
  • statusBar.debuggingBackground#CC3333
  • statusBar.debuggingForeground#E8DDD0
  • statusBar.foreground#CC3333
  • statusBar.noFolderBackground#141010
  • tab.activeBackground#141010
  • tab.activeBorderTop#CC3333
  • tab.activeForeground#CC3333
  • tab.border#100C0C
  • tab.inactiveBackground#100C0C
  • tab.inactiveForeground#5A3A3A
  • terminal.ansiBlack#100C0C
  • terminal.ansiBlue#5A6A8B
  • terminal.ansiBrightBlack#5A3A3A
  • terminal.ansiBrightBlue#7A8AAB
  • terminal.ansiBrightCyan#7AAB9A
  • terminal.ansiBrightGreen#8BAB7E
  • terminal.ansiBrightMagenta#BB7695
  • terminal.ansiBrightRed#FF5555
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFB45A
  • terminal.ansiCyan#5A8B7A
  • terminal.ansiGreen#6B8B5E
  • terminal.ansiMagenta#9B5675
  • terminal.ansiRed#CC3333
  • terminal.ansiWhite#E8DDD0
  • terminal.ansiYellow#E8943A
  • terminal.background#100C0C
  • terminal.foreground#E8DDD0
  • titleBar.activeBackground#100C0C
  • titleBar.activeForeground#CC3333
  • titleBar.inactiveBackground#100C0C
  • titleBar.inactiveForeground#5A3A3A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source, text#E8DDD0
comment, punctuation.definition.comment#5A3A3Aitalic
string, string.quoted, string.template, punctuation.definition.string#E8943A
constant.numeric#FFB45A
constant.language#FFB45Aitalic
constant.character, constant.other#FFB45A
keyword, keyword.control, keyword.operator.new#CC3333bold
keyword.operator#E8DDD0
storage, storage.type#CC3333italic
storage.modifier#CC3333italic
entity.name.type, entity.name.class, support.class, entity.other.inherited-class#FF5555underline
entity.name.function, support.function, meta.function-call#E86A5A
variable.parameter#E8943Aitalic
variable, variable.other#E8DDD0
variable.language#CC3333italic
variable.other.property, variable.other.object.property, support.variable.property, meta.object-literal.key#D8C0B0
entity.name.tag#CC3333
entity.other.attribute-name#E8943Aitalic
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#CC3333
support.type.property-name.css#E8DDD0
support.constant.property-value.css#E8943A
keyword.other.unit.css#FFB45A
punctuation.separator, punctuation.terminator, punctuation.accessor#A89888
punctuation.section, punctuation.definition.block, meta.brace#A89888
markup.heading, entity.name.section.markdown#CC3333bold
markup.bold#E8943Abold
markup.italic#9B5675italic
markup.underline.link#5A8B7A
markup.inline.raw, markup.fenced_code#E8943A
support.type.property-name.json#CC3333
string.quoted.double.json#E8943A
entity.name.tag.yaml#CC3333
meta.decorator, punctuation.decorator#9B5675italic
string.regexp#5A8B7A
constant.character.escape#5A8B7A
support.type, support.class#FF5555
support.constant#FFB45A
invalid#FFFFFF
invalid.deprecated#FFFFFF
Geaux Themes by williamg - VS Code Theme