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#272420
  • activityBar.border#3b3b3b
  • activityBar.foreground#b5b3ae
  • activityBar.inactiveForeground#606366
  • border#3b3b3b
  • button.background#c07a58
  • button.foreground#272420
  • button.hoverBackground#d4967a
  • dropdown.background#1d1b18
  • dropdown.border#3b3b3b
  • dropdown.foreground#b5b3ae
  • editor.background#272420
  • editor.foreground#b5b3ae
  • editor.inactiveSelectionBackground#5588bb30
  • editor.lineHighlightBackground#2e2b28
  • editor.selectionBackground#5588bb44
  • editor.wordHighlightBackground#5588bb22
  • editorBracketHighlight.foreground1#6da0be
  • editorBracketHighlight.foreground2#e4c472
  • editorBracketHighlight.foreground3#9e80b3
  • editorBracketHighlight.foreground4#6da0be
  • editorBracketHighlight.foreground5#e4c472
  • editorBracketHighlight.foreground6#9e80b3
  • editorBracketHighlight.unexpectedBracket.foreground#c75450
  • editorBracketMatch.background#c07a5855
  • editorBracketMatch.border#00000000
  • editorBracketPairGuide.activeBackground1#6da0be60
  • editorBracketPairGuide.activeBackground2#e4c47260
  • editorBracketPairGuide.activeBackground3#9e80b360
  • editorBracketPairGuide.activeBackground4#6da0be60
  • editorBracketPairGuide.activeBackground5#e4c47260
  • editorBracketPairGuide.activeBackground6#9e80b360
  • editorBracketPairGuide.background1#6da0be30
  • editorBracketPairGuide.background2#e4c47230
  • editorBracketPairGuide.background3#9e80b330
  • editorBracketPairGuide.background4#6da0be30
  • editorBracketPairGuide.background5#e4c47230
  • editorBracketPairGuide.background6#9e80b330
  • editorCursor.foreground#e65825
  • editorGroupHeader.tabsBackground#272420
  • editorHoverWidget.background#1d1b18
  • editorHoverWidget.border#3b3b3b
  • editorIndentGuide.activeBackground1#606366
  • editorIndentGuide.background1#3b3b3b
  • editorLineNumber.activeForeground#b5b3ae
  • editorLineNumber.foreground#606366
  • editorRuler.foreground#3b3b3b
  • editorSuggestWidget.background#1d1b18
  • editorSuggestWidget.border#3b3b3b
  • editorSuggestWidget.selectedBackground#5588bb44
  • editorWhitespace.foreground#3b3b3b
  • editorWidget.background#1d1b18
  • focusBorder#c07a58
  • gitDecoration.deletedResourceForeground#c75450
  • gitDecoration.ignoredResourceForeground#606366
  • gitDecoration.modifiedResourceForeground#b08a3e
  • gitDecoration.untrackedResourceForeground#6f9460
  • input.background#1d1b18
  • input.border#3b3b3b
  • input.foreground#b5b3ae
  • inputOption.activeBackground#5588bb44
  • list.activeSelectionBackground#3a3530
  • list.activeSelectionForeground#c8b89a
  • list.activeSelectionOutline#c07a58
  • list.focusBackground#3a3530
  • list.focusOutline#c07a58
  • list.highlightForeground#c07a58
  • list.hoverBackground#2e2b28
  • list.inactiveSelectionBackground#35302a
  • panel.background#272420
  • panel.border#3b3b3b
  • panelTitle.activeBorder#c07a58
  • panelTitle.activeForeground#b5b3ae
  • panelTitle.inactiveForeground#606366
  • scrollbarSlider.activeBackground#4a4a4a
  • scrollbarSlider.background#4a4a4a50
  • scrollbarSlider.hoverBackground#4a4a4a80
  • selection.background#5588bb44
  • sideBar.background#272420
  • sideBar.foreground#b5b3ae
  • sideBarSectionHeader.background#272420
  • sideBarSectionHeader.border#3b3b3b
  • statusBar.background#17130D
  • statusBar.border#3b3b3b
  • statusBar.foreground#b5b3ae
  • statusBar.noFolderBackground#17130D
  • statusBarItem.remoteBackground#17130D
  • statusBarItem.remoteForeground#b5b3ae
  • tab.activeBackground#1d1b18
  • tab.activeBorderTop#c07a58
  • tab.activeForeground#b5b3ae
  • tab.border#272420
  • tab.inactiveBackground#272420
  • tab.inactiveForeground#606366
  • tabSizeConfiguration.tabBackground#272420
  • terminal.ansiBlack#1d1b18
  • terminal.ansiBlue#6da0be
  • terminal.ansiBrightBlack#606366
  • terminal.ansiBrightBlue#6da0be
  • terminal.ansiBrightCyan#6da0be
  • terminal.ansiBrightGreen#6f9460
  • terminal.ansiBrightMagenta#9e80b3
  • terminal.ansiBrightRed#c75450
  • terminal.ansiBrightWhite#c8b89a
  • terminal.ansiBrightYellow#e4c472
  • terminal.ansiCyan#6da0be
  • terminal.ansiGreen#6f9460
  • terminal.ansiMagenta#9e80b3
  • terminal.ansiRed#c75450
  • terminal.ansiWhite#b5b3ae
  • terminal.ansiYellow#c07a58
  • terminal.background#272420
  • terminal.foreground#b5b3ae
  • terminalCursor.foreground#e65825
  • titleBar.activeBackground#272420
  • titleBar.activeForeground#b5b3ae
  • titleBar.inactiveBackground#272420
  • titleBar.inactiveForeground#606366

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block#6e7681italic
comment.block.documentation, comment.block.javadoc#6f9460italic
keyword, keyword.control, storage, storage.type, storage.modifier#c98a42bold
keyword.operator#c98a42
entity.name.function, support.function, entity.name.function.method, meta.function-call.generic#e4c472
entity.name.tag, support.class.component#e4c472
entity.name.type, entity.name.type.class, entity.name.type.interface, entity.name.type.enum, support.type, support.class#6da0be
string, string.quoted#6f9460
string.regexp#6f9460
constant.character.escape, punctuation.definition.template-expression, string.template.expression#c98a42
constant.numeric#6da0be
constant.language#6da0be
variable.other.constant, constant.other#9e80b3
variable, variable.other, variable.other.readwrite#c8b89a
variable.language#c98a42
variable.other.property, support.variable.property, meta.object-literal.key, variable.other.object.property#9e80b3
variable.other.enummember#9e80b3
entity.other.attribute-name#bdb840
keyword.control.directive, meta.preprocessor, storage.type.annotation#c8b89a
punctuation, punctuation.definition, punctuation.separator, punctuation.terminator, punctuation.bracket#9aa5b1
punctuation.bracket#6da0be
markup.heading, entity.name.section#e4c472bold
markup.underline.link#6f9460italic
markup.boldbold
markup.italicitalic
markup.inline.raw, markup.raw#6f9460
Warm Dark by theiha - VS Code Theme