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#ddd6c1
  • activityBar.foreground#584c27
  • activityBarBadge.background#b58900
  • badge.background#b58900aa
  • button.background#ac9d57
  • debugExceptionWidget.background#ddd6c1
  • debugExceptionWidget.border#ab395b
  • debugToolBar.background#ddd6c1
  • dropdown.background#eee8d5
  • dropdown.border#d3af86
  • editor.background#fbf3da
  • editor.foreground#54666d
  • editor.inactiveSelectionBackground#efe6ce
  • editor.lineHighlightBackground#eee8d5
  • editor.selectionBackground#d5cdb5
  • editor.selectionHighlightBackground#fbf3da
  • editor.selectionHighlightBorder#d5cdb5
  • editorCursor.foreground#54666d
  • editorGroup.border#ddd6c1
  • editorGroup.dropBackground#ddd6c1aa
  • editorGroupHeader.tabsBackground#d9d2c2
  • editorHoverWidget.background#ccc4b0
  • editorIndentGuide.activeBackground#a5aaa2
  • editorIndentGuide.activeBackground1#a5aaa2
  • editorIndentGuide.background#d5cdb5
  • editorIndentGuide.background1#d5cdb5
  • editorLineNumber.activeForeground#54666d
  • editorLineNumber.foreground#a5aaa2
  • editorWhitespace.foreground#586e7580
  • editorWidget.background#eee8d5
  • extensionButton.prominentBackground#b58900
  • extensionButton.prominentHoverBackground#584c27aa
  • focusBorder#d3af86
  • input.background#ddd6c1
  • input.foreground#586e75
  • input.placeholderForeground#586e75aa
  • inputOption.activeBorder#d3af86
  • list.activeSelectionBackground#dfca88
  • list.activeSelectionForeground#6c6c6c
  • list.focusBackground#dfca8866
  • list.highlightForeground#b58900
  • list.hoverBackground#dfca8844
  • list.inactiveSelectionBackground#d1cbb8
  • minimap.selectionHighlight#eee8d5
  • panel.border#ddd6c1
  • peekView.border#b58900
  • peekViewEditor.background#fffbf2
  • peekViewEditor.matchHighlightBackground#7744aa40
  • peekViewResult.background#eee8d5
  • peekViewTitle.background#eee8d5
  • pickerGroup.border#2aa19899
  • pickerGroup.foreground#2aa19899
  • progressBar.background#b58900
  • selection.background#ccc4b0
  • sideBar.background#eee8d5
  • sideBarTitle.foreground#586e75
  • statusBar.background#eee8d5
  • statusBar.debuggingBackground#eee8d5
  • statusBar.foreground#586e75
  • statusBar.noFolderBackground#eee8d5
  • statusBarItem.prominentBackground#ddd6c1
  • statusBarItem.prominentHoverBackground#ddd6c199
  • statusBarItem.remoteBackground#ac9d57
  • tab.activeBackground#fdf6e3
  • tab.activeModifiedBorder#cb4b16
  • tab.border#ddd6c1
  • tab.inactiveBackground#d3cbb7
  • tab.inactiveForeground#586e75
  • terminal.ansiBlack#073642
  • terminal.ansiBlue#268bd2
  • terminal.ansiBrightBlack#586e75
  • terminal.ansiBrightBlue#839496
  • terminal.ansiBrightCyan#93a1a1
  • terminal.ansiBrightGreen#586e75
  • terminal.ansiBrightMagenta#6c71c4
  • terminal.ansiBrightRed#cb4b16
  • terminal.ansiBrightWhite#eee8d5
  • terminal.ansiBrightYellow#657b83
  • terminal.ansiCyan#2aa198
  • terminal.ansiGreen#859900
  • terminal.ansiMagenta#d33682
  • terminal.ansiRed#dc322f
  • terminal.ansiWhite#eee8d5
  • terminal.ansiYellow#b58900
  • titleBar.activeBackground#eee8d5
  • walkThrough.embeddedEditorBackground#00000014

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#919995italic
string.quoted.docstring#919995
storage.type.class.jsdoc#7C8787bold
string#009C8E
string.constant.character.escape, string.interpolated.dollar.shell, string.interpolated.backtick.shell, constant.character.format, constant.character.escape, punctuation.section.embedded, punctuation.definition.template-expression#D0202C
meta.embedded#54666D
constant, variable.other.constant#009C8E
constant.numeric#009C8E
constant.language#009C8E
keyword.operator#489200
keyword.control, keyword.other#489200
storage.type.function, storage.type.class#489200
keyword.control.import, keyword.control.directive.include, keyword.other.import#C35D20
storage.modifier.import.java#54666D
storage, support.class, support.type#AD8900
variable.parameter.function-call#54666D
variable.language#D0202C
support#0071D3
support.type.exception#AD8900
entity.name.function.decorator, support.type.python#0071D3
entity.name.class, entity.name.type.class#0071D3
entity.name.tag, entity.name.type.tagbold
punctuation.definition.tag#54666D88
entity.name.function, entity.name.function.declaration#0071D3
meta.function-call.generic#54666D
entity.name.function.js#0071D3
variable#54666D
variable.parameter#54666D
support.function.builtin.shell#489200
punctuation.definition.logical-expression, variable.other.special.shell#D0202C
variable.other.normal.shell, variable.other.bracket.shell, variable.other.positional.shell#C35D20
punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.arguments, punctuation.definition.list, punctuation.definition.dict, punctuation.definition.binding-pattern, punctuation.parenthesis, punctuation.separator, punctuation.accessor, punctuation.section#54666D
commentitalic
punctuation.definition.commentitalic
token.info-token#316BCD
token.warn-token#CD9731
token.error-token#CD3131
token.debug-token#800080
blind-themes by saahilclaypool - VS Code Theme