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#2a3420
  • activityBar.activeBorder#DAA520
  • activityBar.background#141a0c
  • activityBar.border#3a4a30
  • activityBar.foreground#F4C430
  • activityBar.inactiveForeground#6B7A5B
  • activityBarBadge.background#FF8C42
  • activityBarBadge.foreground#ffffff
  • badge.background#FF8C42
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#DAA520
  • breadcrumb.focusForeground#F4C430
  • breadcrumb.foreground#8a9a7a
  • button.background#3D6B1F
  • button.foreground#ffffff
  • button.hoverBackground#4D7B2F
  • button.secondaryBackground#3a4a30
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#4a5a40
  • debugExceptionWidget.background#4a5058
  • debugExceptionWidget.border#708090
  • debugToolBar.background#2a3420
  • debugToolBar.border#F4C430
  • diffEditor.border#3a4a30
  • diffEditor.insertedTextBackground#3D6B1F30
  • diffEditor.removedTextBackground#8B691430
  • dropdown.background#2a3420
  • dropdown.border#F4C430
  • dropdown.foreground#ffffff
  • editor.background#1a2410
  • editor.findMatchBackground#F4C43080
  • editor.findMatchHighlightBackground#F4C43050
  • editor.foreground#F5F5DC
  • editor.inactiveSelectionBackground#F4C43030
  • editor.lineHighlightBackground#2a3420
  • editor.selectionBackground#F4C43060
  • editor.selectionHighlightBackground#DAA52040
  • editor.wordHighlightBackground#3D6B1F40
  • editor.wordHighlightStrongBackground#3D6B1F60
  • editorBracketMatch.background#F4C43050
  • editorBracketMatch.border#DAA520
  • editorCursor.foreground#FF8C42
  • editorError.background#70809080
  • editorError.border#708090
  • editorError.foreground#708090
  • editorGroupHeader.tabsBackground#141a0c
  • editorGroupHeader.tabsBorder#3a4a30
  • editorHint.foreground#8B6914
  • editorIndentGuide.activeBackground1#F4C430
  • editorIndentGuide.background1#3a4a30
  • editorInfo.foreground#3D6B1F
  • editorLineNumber.activeForeground#DAA520
  • editorLineNumber.foreground#6B7A5B
  • editorSuggestWidget.background#2a3420
  • editorSuggestWidget.border#F4C430
  • editorSuggestWidget.foreground#F5F5DC
  • editorSuggestWidget.highlightForeground#FF8C42
  • editorSuggestWidget.selectedBackground#3D6B1F60
  • editorWarning.foreground#FF8C42
  • editorWhitespace.foreground#3a4a30
  • editorWidget.background#2a3420
  • editorWidget.border#F4C430
  • editorWidget.foreground#F5F5DC
  • focusBorder#F4C430
  • gitDecoration.conflictingResourceForeground#FF8C42
  • gitDecoration.deletedResourceForeground#708090
  • gitDecoration.ignoredResourceForeground#6B7A5B
  • gitDecoration.modifiedResourceForeground#DAA520
  • gitDecoration.untrackedResourceForeground#3D6B1F
  • input.background#2a3420
  • input.border#F4C430
  • input.foreground#ffffff
  • input.placeholderForeground#6B7A5B
  • inputOption.activeBorder#DAA520
  • inputValidation.errorBackground#4a5058
  • inputValidation.errorBorder#708090
  • inputValidation.warningBackground#4a3a20
  • inputValidation.warningBorder#FF8C42
  • list.activeSelectionBackground#3D6B1F80
  • list.activeSelectionForeground#ffffff
  • list.errorForeground#a0a0a0
  • list.focusBackground#3D6B1F80
  • list.focusForeground#ffffff
  • list.highlightForeground#F4C430
  • list.hoverBackground#2a3420
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#3a4a30
  • list.inactiveSelectionForeground#ffffff
  • list.warningForeground#FF8C42
  • merge.border#F4C430
  • merge.currentContentBackground#3D6B1F30
  • merge.currentHeaderBackground#3D6B1F70
  • merge.incomingContentBackground#8B691430
  • merge.incomingHeaderBackground#8B691470
  • minimap.errorHighlight#708090
  • minimap.findMatchHighlight#F4C43080
  • minimap.selectionHighlight#3D6B1F80
  • minimap.warningHighlight#FF8C42
  • minimapGutter.addedBackground#3D6B1F
  • minimapGutter.deletedBackground#8B6914
  • minimapGutter.modifiedBackground#DAA520
  • notificationCenter.border#3a4a30
  • notificationCenterHeader.background#2a3420
  • notificationLink.foreground#DAA520
  • notifications.background#2a3420
  • notifications.border#F4C430
  • notifications.foreground#ffffff
  • panel.background#1a2410
  • panel.border#3a4a30
  • panelTitle.activeBorder#F4C430
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#8a9a7a
  • peekView.border#F4C430
  • peekViewEditor.background#2a3420
  • peekViewEditor.matchHighlightBackground#F4C43050
  • peekViewResult.background#1a2410
  • peekViewResult.matchHighlightBackground#F4C43050
  • peekViewResult.selectionBackground#3D6B1F60
  • peekViewTitle.background#2a3420
  • peekViewTitleDescription.foreground#8a9a7a
  • peekViewTitleLabel.foreground#DAA520
  • progressBar.background#F4C430
  • scrollbarSlider.activeBackground#4D7B2FA0
  • scrollbarSlider.background#3D6B1F60
  • scrollbarSlider.hoverBackground#3D6B1F80
  • sideBar.background#1a2410
  • sideBar.border#3a4a30
  • sideBar.foreground#d8d8c0
  • sideBarSectionHeader.background#2a3420
  • sideBarSectionHeader.border#3a4a30
  • sideBarSectionHeader.foreground#F4C430
  • sideBarTitle.foreground#DAA520
  • statusBar.background#3D6B1F
  • statusBar.border#3a4a30
  • statusBar.debuggingBackground#FF8C42
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#4a5a40
  • statusBarItem.errorBackground#708090
  • statusBarItem.errorForeground#ffffff
  • statusBarItem.prominentBackground#F4C430
  • statusBarItem.prominentHoverBackground#DAA520
  • statusBarItem.warningBackground#FF8C42
  • statusBarItem.warningForeground#000000
  • tab.activeBackground#2a3420
  • tab.activeBorder#141a0c
  • tab.activeBorderTop#F4C430
  • tab.activeForeground#ffffff
  • tab.border#1a1a1a
  • tab.hoverBackground#2a3420
  • tab.hoverBorder#DAA520
  • tab.hoverForeground#ffffff
  • tab.inactiveBackground#1a2410
  • tab.inactiveForeground#8a9a7a
  • terminal.ansiBlack#1a1a1a
  • terminal.ansiBlue#708090
  • terminal.ansiBrightBlack#4a5a40
  • terminal.ansiBrightBlue#90A8B8
  • terminal.ansiBrightCyan#FFB730
  • terminal.ansiBrightGreen#5D8B2F
  • terminal.ansiBrightMagenta#B89365
  • terminal.ansiBrightRed#A67C2A
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#FFD740
  • terminal.ansiCyan#DAA520
  • terminal.ansiGreen#3D6B1F
  • terminal.ansiMagenta#8B7355
  • terminal.ansiRed#8B6914
  • terminal.ansiWhite#F5F5DC
  • terminal.ansiYellow#F4C430
  • terminal.background#1a2410
  • terminal.foreground#F5F5DC
  • terminalCursor.foreground#FF8C42
  • titleBar.activeBackground#141a0c
  • titleBar.activeForeground#DAA520
  • titleBar.border#3a4a30
  • titleBar.inactiveBackground#0f1408
  • titleBar.inactiveForeground#6B7A5B

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6B7A5Bitalic
keyword, storage.type, storage.modifier#FF8C42bold
keyword.control, keyword.operator#FFB05Abold
keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as#DAA520
string, string.quoted#8B6914
string.template, string.quoted.template#A67C2A
constant.character.escape#F4C430bold
string.regexp#B89365
constant.numeric, constant.language#6B4423
constant.language.boolean#FF8C42bold
variable, variable.other#3D6B1Fbold
variable.parameter#5D8B2Fitalic
variable.other.property, support.variable.property#c8d8b8
entity.name.function, support.function#F4C430bold
meta.function-call#FFD740
entity.name.type, entity.name.class, support.class#DAA520
entity.other.inherited-class#FFB730italic
entity.name.tag#3D6B1Fbold
entity.other.attribute-name#5D8B2Fitalic
entity.name.tag.css, entity.other.attribute-name.class.css#3D6B1F
support.type.property-name.css#8B6914
support.constant.property-value.css#F4C430
support.type, support.class#B89365
support.constant#6B4423
support.type.property-name.json#DAA520
keyword.operator#FF8C42
punctuation#a8b898
punctuation.definition.string, punctuation.definition.parameters, punctuation.definition.array#8a9a7a
meta.brace, punctuation.section#c8d8b8
invalid#ffffff
invalid.deprecated#6B7A5Bstrikethrough
markup.heading#F4C430bold
markup.bold#FF8C42bold
markup.italic#8B6914italic
markup.inline.raw#DAA520
markup.underline.link#3D6B1Funderline
markup.list#5D8B2F
markup.inserted#3D6B1F
markup.deleted#8B6914
markup.changed#F4C430
variable.language.this#FF8C42italic
entity.name.type.ts, entity.name.type.tsx#FFB730
meta.decorator, punctuation.decorator#F4C430bold
variable.language.special.self.python#FF8C42italic
entity.name.function.decorator.python#DAA520
keyword.control.conditional, keyword.control.loop#FFB05Abold
entity.name.exception, support.class.exception#708090bold
storage.type.annotation, punctuation.definition.annotation#8B6914italic