Skip to main content
Coding Theme

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#0F0D0B
  • activityBar.foreground#D4AF37
  • activityBar.inactiveForeground#4A3F35
  • activityBarBadge.background#D4AF37
  • activityBarBadge.foreground#1A1612
  • badge.background#D4AF37
  • badge.foreground#1A1612
  • button.background#D4AF37
  • button.foreground#1A1612
  • button.hoverBackground#E5C07B
  • dropdown.background#242018
  • dropdown.border#3A3228
  • dropdown.foreground#E8DCC8
  • editor.background#1A1612
  • editor.foreground#E8DCC8
  • editor.inactiveSelectionBackground#2A2420
  • editor.lineHighlightBackground#242018
  • editor.selectionBackground#3A3228
  • editor.selectionHighlightBackground#2F2820
  • editorCursor.foreground#D4AF37
  • editorIndentGuide.activeBackground#4A3F35
  • editorIndentGuide.background#2A2420
  • editorLineNumber.activeForeground#D4AF37
  • editorLineNumber.foreground#4A3F35
  • editorRuler.foreground#2A2420
  • editorWhitespace.foreground#2A2420
  • gitDecoration.conflictingResourceForeground#FFB5B5
  • gitDecoration.deletedResourceForeground#FF8B8B
  • gitDecoration.ignoredResourceForeground#4A3F35
  • gitDecoration.modifiedResourceForeground#E5C07B
  • gitDecoration.untrackedResourceForeground#98D98E
  • input.background#242018
  • input.border#3A3228
  • input.foreground#E8DCC8
  • inputOption.activeBorder#D4AF37
  • inputValidation.errorBackground#FF8B8B
  • inputValidation.errorBorder#FF8B8B
  • list.activeSelectionBackground#3A3228
  • list.activeSelectionForeground#FFF9F0
  • list.focusBackground#3A3228
  • list.highlightForeground#D4AF37
  • list.hoverBackground#242018
  • list.inactiveSelectionBackground#2A2420
  • panel.background#15120F
  • panel.border#2A2420
  • panelTitle.activeForeground#D4AF37
  • panelTitle.inactiveForeground#7A6F60
  • scrollbarSlider.activeBackground#4A3F35E0
  • scrollbarSlider.background#3A322880
  • scrollbarSlider.hoverBackground#4A3F35B0
  • sideBar.background#15120F
  • sideBar.foreground#C9B8A0
  • sideBarSectionHeader.background#1A1612
  • sideBarSectionHeader.foreground#D4AF37
  • statusBar.background#0F0D0B
  • statusBar.debuggingBackground#E5C07B
  • statusBar.debuggingForeground#1A1612
  • statusBar.foreground#C9B8A0
  • statusBar.noFolderBackground#0F0D0B
  • tab.activeBackground#1A1612
  • tab.activeForeground#E8DCC8
  • tab.border#0F0D0B
  • tab.inactiveBackground#15120F
  • tab.inactiveForeground#7A6F60
  • terminal.ansiBlack#2C2420
  • terminal.ansiBlue#7EB3D9
  • terminal.ansiBrightBlack#4A3F35
  • terminal.ansiBrightBlue#A3CDE8
  • terminal.ansiBrightCyan#A3F5DF
  • terminal.ansiBrightGreen#B8E8B0
  • terminal.ansiBrightMagenta#D9B8F7
  • terminal.ansiBrightRed#FFB5B5
  • terminal.ansiBrightWhite#FFF9F0
  • terminal.ansiBrightYellow#F0D999
  • terminal.ansiCyan#7FD9C1
  • terminal.ansiGreen#98D98E
  • terminal.ansiMagenta#C5A3FF
  • terminal.ansiRed#FF8B8B
  • terminal.ansiWhite#E8DCC8
  • terminal.ansiYellow#E5C07B
  • terminal.background#1A1612
  • terminal.foreground#E8DCC8
  • titleBar.activeBackground#15120F
  • titleBar.activeForeground#E8DCC8
  • titleBar.inactiveBackground#0F0D0B
  • titleBar.inactiveForeground#4A3F35

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A6F60italic
string, string.quoted#98D98E
constant.numeric, constant.language#FFB5B5
keyword, storage.type, storage.modifier#C5A3FF
entity.name.function, support.function#F0D999
entity.name.type, entity.name.class, support.class#E5C07B
variable, variable.parameter#7EB3D9
entity.name.tag#FFB5B5
entity.other.attribute-name#D4AF37
support.type.property-name#7EB3D9
constant.other.color#7FD9C1
meta.tag, punctuation.definition.tag#C9B8A0
markup.heading#D4AF37bold
markup.bold#E5C07Bbold
markup.italic#C5A3FFitalic
Bekor Theme by joao alexandre - VS Code Theme