Skip to main content
CodingTheme

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#292929
  • button.background#194176
  • checkbox.background#292929
  • checkbox.border#5d5d5d
  • checkbox.foreground#ffffff
  • debugConsole.errorForeground#c73649
  • debugConsole.infoForeground#d1d1d1
  • debugConsole.sourceForeground#d1d1d1
  • debugConsole.warningForeground#d1d1d1
  • dropdown.background#484848
  • dropdown.listBackground#292929
  • editor.background#181818
  • editor.foldBackground#00000000
  • editor.foreground#d1d1d1
  • editor.inactiveSelectionBackground#163764
  • editor.lineHighlightBackground#292929
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#163764
  • editorBracketHighlight.foreground1#d1d1d1
  • editorBracketHighlight.foreground2#d1d1d1
  • editorBracketHighlight.foreground3#d1d1d1
  • editorBracketHighlight.foreground4#d1d1d1
  • editorBracketHighlight.foreground5#d1d1d1
  • editorBracketHighlight.foreground6#d1d1d1
  • editorBracketMatch.background#163764
  • editorBracketMatch.border#00000000
  • editorGroupHeader.tabsBackground#292929
  • editorGutter.addedBackground#39703f
  • editorGutter.deletedBackground#dfdfe6
  • editorGutter.foldingControlForeground#767676
  • editorGutter.modifiedBackground#3e7ab3
  • editorIndentGuide.activeBackground#00000000
  • editorIndentGuide.background#00000000
  • editorLineNumber.activeForeground#c2c2c2
  • editorLineNumber.dimmedForeground#5d5d5d
  • editorLineNumber.foreground#5d5d5d
  • editorSuggestWidget.focusHighlightForeground#6daaf7
  • editorSuggestWidget.highlightForeground#6daaf7
  • editorWidget.background#292929
  • focusBorder#0273eb
  • gitDecoration.addedResourceForeground#4ca988
  • gitDecoration.conflictingResourceForeground#d1a354
  • gitDecoration.modifiedResourceForeground#4d9bf8
  • gitDecoration.renamedResourceForeground#4ca988
  • gitDecoration.submoduleResourceForeground#d1d1d1
  • gitDecoration.untrackedResourceForeground#4ca988
  • input.background#292929
  • input.border#484848
  • list.activeSelectionBackground#194176
  • list.focusAndSelectionOutline#00000000
  • list.hoverBackground#2d2d2d
  • list.inactiveSelectionBackground#383838
  • menu.background#292929
  • menu.border#383838
  • menu.foreground#d1d1d1
  • menu.selectionBackground#194176
  • menu.separatorBackground#383838
  • menubar.selectionBackground#194176
  • quickInputList.focusBackground#194176
  • settings.focusedRowBackground#00000000
  • settings.focusedRowBorder#00000000
  • settings.rowHoverBackground#00000000
  • sideBar.background#181818
  • sideBar.border#383838
  • sideBarSectionHeader.background#00000000
  • sideBarTitle.foreground#bbbbbb
  • statusBar.background#181818
  • statusBar.border#383838
  • statusBar.debuggingBackground#181818
  • statusBar.foreground#767676
  • statusBar.noFolderBackground#181818
  • statusBarItem.hoverBackground#00000000
  • tab.activeBackground#181818
  • tab.activeBorderTop#d1d1d1
  • tab.activeForeground#d1d1d1
  • tab.inactiveBackground#292929
  • tab.inactiveForeground#d1d1d1
  • tab.unfocusedActiveBorderTop#181818
  • terminal.ansiBrightBlue#1d6bcc
  • terminal.ansiBrightGreen#82d2ce
  • titleBar.activeBackground#292929
  • titleBar.inactiveBackground#292929

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.quoted.docstring#898989
keyword, keyword.operator.instanceof, variable.language, storage, constant.character, constant.language, keyword.operator.delete#82d2ce
string#e394dc
constant.numeric, constant.other.color#ebc88d
variable.other.property#af9cff
entity.name.function.member, entity.name.function.definition, meta.function.python, meta.method.identifier.java, entity.name.function.dart#efefefbold
meta.function-call.python, meta.method-call.java#ebc88d
meta.property-name, support.type.property-name.json#82d2ce
keyword.control.directive, entity.name.function.preprocessor, constant.language.NULL#a8cc7c
string.quoted.single.cpp#ebc88d
entity.name.scope-resolution#87c3ff
entity.name.function.call#efefefbold
entity.name.function.constructor.cpp, entity.name.function.definition.special.constructor#87c3ff
entity.name.type#87c3ff
punctuation.separator, keyword.operator#d1d1d1
meta.tag.metadata.doctype#a8cc7c
entity.other.attribute-name#af9cff
meta.tag.metadata, meta.tag.structure#87c3ff
punctuation.definition.tag#898989
meta.tag.preprocessor.xml#af9cff
entity.name.tag.localname#87c3ff
entity.name.tag.css#af9cff
meta.property-value#e394dc
keyword.other.unit#ebc88d
keyword.other.important#a8cc7c
support.constant.property-value#e394dc
meta.function.shape.css, meta.function.misc.css#af9cff
keyword.control.at-rule#a8cc7c
meta.at-rule, keyword.operator.logical.and.media, keyword.operator.logical.only.media#af9cff
entity.name.tag.wildcard#d1d1d1
storage.type.annotation, punctuation.definition.annotation#a8cc7c
storage.type.java#add1de
storage.modifier.package, storage.modifier.import, variable.other.object#d1d1d1
meta.definition.variable#af9cff
entity.name.function.js#ebc88d
meta.function-call.arguments, variable.language.special.self.python#d1d1d1
markup.heading#82d2ce
punctuation.definition.list.begin.markdown, meta.separator.markdown, meta.image.inline.markdown, string.other.link.description.markdown, punctuation.definition.bold.markdown#82d2ce
markup.underline.link#e394dcitalic underline
markup.bold.markdownbold
storage.modifier.dart, storage.type.primitive.dart#87c3ff
variable.language.dart#d1d1d1

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...