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.activeBorder#000000
  • activityBar.background#000000
  • activityBar.foreground#ffffff
  • debugToolBar.background#000000
  • debugToolBar.border#404040
  • dropdown.background#000000
  • dropdown.border#404040
  • editor.background#000000
  • editor.findMatchBackground#000000
  • editor.findMatchBorder#ffffff
  • editor.findMatchHighlightBackground#00000000
  • editor.findMatchHighlightBorder#808080
  • editor.hoverHighlightBackground#00000000
  • editor.selectionBackground#404040
  • editor.snippetTabstopHighlightBackground#404040
  • editorBracketMatch.background#000000
  • editorBracketMatch.border#808080
  • editorGroup.border#000000
  • editorGroupHeader.tabsBackground#000000
  • editorHoverWidget.background#000000
  • editorHoverWidget.border#404040
  • editorOverviewRuler.border#00000000
  • editorSuggestWidget.background#000000
  • editorSuggestWidget.border#404040
  • editorWidget.background#000000
  • editorWidget.border#000000
  • editorWidget.resizeBorder#000000
  • focusBorder#606060
  • input.background#000000
  • input.border#404040
  • inputOption.activeBackground#000000
  • inputOption.activeBorder#606060
  • inputOption.activeForeground#ffffff
  • inputOption.hoverBackground#000000
  • list.activeSelectionBackground#000000
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#404040
  • list.focusOutline#606060
  • list.hoverBackground#00000000
  • list.hoverForeground#ffffff
  • list.inactiveFocusOutline#404040
  • list.inactiveSelectionBackground#000000
  • menu.background#000000
  • menu.border#404040
  • menu.selectionBorder#404040
  • menu.separatorBackground#404040
  • multiDiffEditor.headerBackground#000000
  • panel.border#000000
  • peekView.border#404040
  • peekViewEditor.background#000000
  • peekViewResult.background#000000
  • peekViewResult.selectionBackground#000000
  • peekViewTitle.background#000000
  • quickInput.background#000000
  • quickInputList.focusBackground#000000
  • scrollbarSlider.activeBackground#60606080
  • scrollbarSlider.background#40404080
  • scrollbarSlider.hoverBackground#60606080
  • sideBar.background#000000
  • sideBarSectionHeader.background#000000
  • simpleFindWidget.sashBorder#000000
  • tab.activeBackground#000000
  • tab.border#000000
  • tab.inactiveBackground#000000
  • terminal.border#000000
  • terminal.findMatchBackground#00000000
  • terminal.findMatchBorder#ffffff
  • terminal.findMatchHighlightBackground#00000000
  • terminal.findMatchHighlightBorder#808080
  • titleBar.activeBackground#000000
  • titleBar.inactiveBackground#000000
  • toolbar.hoverBackground#000000
  • toolbar.hoverOutline#404040
  • widget.border#404040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
constant.character.format, entity.name.operator, keyword.operator, keyword.operator.delete.array.bracket, keyword.operator.logical.python, keyword.operator.new.cpp, meta.brace, punctuation.accessor, punctuation.definition, punctuation.definition.list.begin.markdown, punctuation.parenthesis, punctuation.section, punctuation.separator, punctuation.terminator, punctuation.vararg-ellipses, storage.modifier.pointer, storage.modifier.reference#ff0000
constant.character.escape, constant.other.placeholder, entity.name.operator.custom-literal, keyword.other.suffix.literal, punctuation.definition.string.begin, punctuation.definition.string.end, storage.type.string.python, string#ff8000
keyword.control.catch, keyword.control.co_await, keyword.control.co_return, keyword.control.co_yield, keyword.control.flow, keyword.control.return, keyword.control.throw, keyword.control.try#d0d000
constant.numeric, keyword.other.unit#00a000
entity.name.function, entity.name.module, entity.name.namespace, entity.name.scope-resolution, entity.name.type, keyword.other.operator, storage.type, storage.type.template.argument, support.function, support.type.built-in, support.type.exception, support.type.property-name, support.type.python#00a000bold
constant.language, entity.name.section, entity.name.function.preprocessor, keyword.control, keyword.operator.cast, keyword.operator.delete, keyword.operator.noexcept, keyword.operator.alignof, keyword.operator.sizeof, keyword.other, keyword.other.using, storage.modifier, storage.type.class, storage.type.decltype, storage.type.enum, storage.type.function, storage.type.modifier, storage.type.namespace, storage.type.struct, storage.type.template, storage.type.template.argument.class, variable.language.special, variable.language.this#0080ffbold
entity.other.attribute, keyword.other.export, keyword.other.import, keyword.other.module, entity.name.module, meta.preprocessor#c000ff
entity.name.label, variable.other.assignment, variable.other.enummember, variable.other.object, variable.other.property, variable.legacy.builtin.python, variable.parameter, source, support.variable#b4b4b4
comment, punctuation.definition.comment, storage.type.class.doxygen.cpp#808080