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#2c2c3b
  • button.background#713a91
  • checkbox.background#343445
  • checkbox.border#756b8c
  • checkbox.foreground#a4a1b3
  • debugConsole.errorForeground#c73649
  • debugConsole.infoForeground#b3b3b3
  • debugConsole.sourceForeground#b3b3b3
  • debugConsole.warningForeground#b3b3b3
  • dropdown.background#45405c
  • dropdown.listBackground#2c2c3b
  • editor.background#1d1d26
  • editor.foldBackground#00000000
  • editor.foreground#c9c9d1
  • editor.inactiveSelectionBackground#214283
  • editor.lineHighlightBackground#242433
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#214283
  • editor.selectionHighlightBackground#113623
  • editor.wordHighlightBackground#113623
  • editorBracketHighlight.foreground1#c9c9d1
  • editorBracketHighlight.foreground2#c9c9d1
  • editorBracketHighlight.foreground3#c9c9d1
  • editorBracketHighlight.foreground4#c9c9d1
  • editorBracketHighlight.foreground5#c9c9d1
  • editorBracketHighlight.foreground6#c9c9d1
  • editorBracketMatch.background#4e4766
  • editorBracketMatch.border#00000000
  • editorGroupHeader.tabsBackground#2c2c3b
  • editorGutter.addedBackground#39703f
  • editorGutter.deletedBackground#dfdfe6
  • editorGutter.foldingControlForeground#7886c7
  • editorGutter.modifiedBackground#3e7ab3
  • editorIndentGuide.activeBackground#00000000
  • editorIndentGuide.background#00000000
  • editorLineNumber.activeForeground#9a97a8
  • editorLineNumber.dimmedForeground#575566
  • editorLineNumber.foreground#575566
  • editorSuggestWidget.focusHighlightForeground#ed94ff
  • editorSuggestWidget.highlightForeground#ed94ff
  • editorWidget.background#2c2c3b
  • focusBorder#814f9e
  • gitDecoration.conflictingResourceForeground#f0507a
  • gitDecoration.modifiedResourceForeground#62baf5
  • gitDecoration.untrackedResourceForeground#76B366
  • input.background#1d1d26
  • input.border#4e4c63
  • list.activeSelectionBackground#713a91
  • list.focusAndSelectionOutline#00000000
  • list.hoverBackground#2c2c3b
  • list.inactiveSelectionBackground#3d3952
  • menu.background#2c2c3b
  • menu.border#4e4c63
  • menu.foreground#d0d0d9
  • menu.selectionBackground#713a91
  • menu.separatorBackground#4e4c63
  • menubar.selectionBackground#453e57
  • quickInputList.focusBackground#713a91
  • settings.focusedRowBackground#00000000
  • settings.focusedRowBorder#00000000
  • settings.rowHoverBackground#00000000
  • sideBar.background#1d1d26
  • sideBar.border#4e4c63
  • sideBarSectionHeader.background#00000000
  • sideBarTitle.foreground#d0d0d9
  • statusBar.background#1d1d26
  • statusBar.border#4e4c63
  • statusBar.debuggingBackground#1d1d26
  • statusBar.foreground#6d6a80
  • statusBar.noFolderBackground#1d1d26
  • statusBarItem.hoverBackground#00000000
  • tab.activeBackground#1d1d26
  • tab.activeBorderTop#904ac2
  • tab.activeForeground#d0d0d9
  • tab.border#00000000
  • tab.inactiveBackground#2c2c3b
  • tab.inactiveForeground#d0d0d9
  • tab.unfocusedActiveBorderTop#1d1d26
  • terminal.ansiBrightBlue#1d6bcc
  • terminal.ansiBrightGreen#82d2ce
  • textLink.foreground#7094ff
  • titleBar.activeBackground#2c2c3b
  • titleBar.inactiveBackground#2c2c3b
  • toolbar.hoverBackground#453e57

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.quoted.docstring#676773
keyword, keyword.operator.instanceof, variable.language, storage, constant.character, constant.language, keyword.operator.delete#e0957b
string#62a362
constant.numeric, constant.other.color#4dacf0
variable.other.property#93a6f5
entity.name.function.member, entity.name.function.definition, entity.name.function.python, meta.method.identifier.java, entity.name.function.dart#c7a65d
meta.property-name, entity.other.attribute-name.html, entity.other.attribute-name.namespace.xml, entity.other.attribute-name.localname.xml#ffffff
keyword.control.directive, entity.name.function.preprocessor, constant.language.NULL#85a658
string.quoted.single.cpp#4dacf0
entity.name.function.call#c7a65d
entity.name.function.definition.special.constructor, punctuation.separator, keyword.operator#c9c9d1
meta.tag.metadata.doctype#85a658
meta.tag.metadata, meta.tag.structure#e0957b
meta.tag.preprocessor.xml#ffffff
entity.name.tag.localname, punctuation.definition.tag.xml#e0957b
meta.selector.css#e0957b
meta.property-value#62a362
keyword.other.unit#62a362
meta.function.shape.css, meta.function.misc.css#e0957b
keyword.control.at-rule#93a6f5
meta.at-rule, keyword.operator.logical.and.media, keyword.operator.logical.only.media#e0957b
entity.name.tag.wildcard#c9c9d1
storage.type.annotation, punctuation.definition.annotation#85A658
storage.type.java, storage.type.generic.java#37cccc
variable.other.definition.java#93a6f5
storage.modifier.package, storage.modifier.import, variable.other.object, variable.parameter.java#c9c9d1
meta.definition.variable.js#93a6f5
entity.name.function.js#ffc66d
support.type.property-name.json#e0957b
variable.language.special.self.python#c9c9d1
heading, meta.separator.markdown#93a6f5
punctuation.definition.list.begin.markdown, meta.separator.markdown, meta.image.inline.markdown, string.other.link.description.markdown, punctuation.definition.bold.markdown#e0957b
markup.underline.link#50afdeitalic underline
markup.bold.markdownbold
variable.language.dart, storage.modifier.dart, storage.type.primitive.dart#c9c9d1

Shiki preview

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

Loading...

Fleet Color Themes by Shayan Ahmed Khan - VS Code Theme