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

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#000000
comment, punctuation.definition.comment, storage.type.class.doxygen.cpp#7f7f7f