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#f38ba8
  • activityBar.background#150c0e
  • activityBar.border#41373a
  • activityBar.foreground#f38ba8
  • activityBar.inactiveForeground#79676c
  • activityBarBadge.background#f38ba8
  • activityBarBadge.foreground#1d1114
  • badge.background#f38ba8
  • badge.foreground#1d1114
  • breadcrumb.activeSelectionForeground#f38ba8
  • breadcrumb.focusForeground#e0d6d9
  • breadcrumb.foreground#79676c
  • button.background#f38ba8
  • button.foreground#1d1114
  • button.hoverBackground#f59bb4
  • descriptionForeground#a8949a
  • dropdown.background#2f2427
  • dropdown.border#41373a
  • dropdown.foreground#e0d6d9
  • editor.background#1d1114
  • editor.findMatchBackground#f38ba873
  • editor.findMatchHighlightBackground#f38ba838
  • editor.foreground#e0d6d9
  • editor.lineHighlightBackground#382e3066
  • editor.selectionBackground#f38ba852
  • editor.selectionHighlightBackground#f38ba829
  • editor.wordHighlightBackground#f38ba829
  • editor.wordHighlightStrongBackground#f38ba83d
  • editorBracketMatch.background#f38ba829
  • editorBracketMatch.border#f38ba899
  • editorCursor.foreground#f38ba8
  • editorError.foreground#f38ba8
  • editorGroup.border#41373a
  • editorGroupHeader.tabsBackground#1a0f12
  • editorGroupHeader.tabsBorder#41373a
  • editorGutter.addedBackground#a6e3a1
  • editorGutter.deletedBackground#f38ba8
  • editorGutter.modifiedBackground#fb9c6e
  • editorHoverWidget.background#2f2427
  • editorHoverWidget.border#41373a
  • editorIndentGuide.activeBackground1#f38ba899
  • editorIndentGuide.background1#41373a
  • editorInfo.foreground#f38ba8
  • editorLineNumber.activeForeground#f38ba8
  • editorLineNumber.foreground#79676c
  • editorSuggestWidget.background#2f2427
  • editorSuggestWidget.selectedBackground#f38ba83d
  • editorWarning.foreground#f9e2af
  • editorWhitespace.foreground#79676c
  • editorWidget.background#2f2427
  • editorWidget.border#41373a
  • errorForeground#f38ba8
  • focusBorder#f38ba880
  • foreground#a8949a
  • gitDecoration.deletedResourceForeground#f38ba8
  • gitDecoration.modifiedResourceForeground#fb9c6e
  • gitDecoration.untrackedResourceForeground#a6e3a1
  • input.background#2f2427
  • input.border#41373a
  • input.foreground#e0d6d9
  • input.placeholderForeground#79676c
  • inputOption.activeBackground#f38ba83d
  • inputOption.activeBorder#f38ba8
  • list.activeSelectionBackground#f38ba847
  • list.activeSelectionForeground#e0d6d9
  • list.focusBackground#f38ba847
  • list.highlightForeground#f38ba8
  • list.hoverBackground#3d323580
  • list.inactiveSelectionBackground#f38ba829
  • minimap.selectionHighlight#f38ba880
  • panel.background#1a0f12
  • panel.border#41373a
  • panelTitle.activeBorder#f38ba8
  • panelTitle.activeForeground#e0d6d9
  • panelTitle.inactiveForeground#79676c
  • peekViewEditor.background#1d1114
  • peekViewResult.background#1a0f12
  • progressBar.background#f38ba8
  • quickInput.background#2f2427
  • quickInput.foreground#e0d6d9
  • quickInputList.focusBackground#f38ba83d
  • scrollbarSlider.activeBackground#f38ba88c
  • scrollbarSlider.background#f38ba838
  • scrollbarSlider.hoverBackground#f38ba861
  • selection.background#f38ba857
  • sideBar.background#1a0f12
  • sideBar.border#41373a
  • sideBar.foreground#a8949a
  • sideBarSectionHeader.background#1a0f12
  • sideBarSectionHeader.foreground#e0d6d9
  • sideBarTitle.foreground#e0d6d9
  • statusBar.background#150c0e
  • statusBar.border#41373a
  • statusBar.debuggingBackground#f38ba8
  • statusBar.debuggingForeground#1d1114
  • statusBar.foreground#a8949a
  • statusBar.noFolderBackground#150c0e
  • statusBarItem.remoteBackground#f38ba8
  • statusBarItem.remoteForeground#1d1114
  • tab.activeBackground#1d1114
  • tab.activeBorder#f38ba8b3
  • tab.activeBorderTop#f38ba8
  • tab.activeForeground#e0d6d9
  • tab.border#150c0e
  • tab.inactiveBackground#1a0f12
  • tab.inactiveForeground#79676c
  • terminal.background#1d1114
  • terminal.foreground#e0d6d9
  • terminalCursor.foreground#f38ba8
  • textLink.activeForeground#f59eb6
  • textLink.foreground#f38ba8
  • titleBar.activeBackground#150c0e
  • titleBar.activeForeground#e0d6d9
  • titleBar.border#41373a
  • titleBar.inactiveBackground#150c0e
  • titleBar.inactiveForeground#79676c
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#79676citalic
string, string.quoted, string.template#aac461
constant.numeric, constant.language, constant.character, constant.other#31d2bf
keyword, storage, storage.type, storage.modifier, keyword.control, keyword.operator.new#f38ba8
keyword.operator, punctuation, meta.brace#a8949a
entity.name.function, support.function, meta.function-call.generic#68c0ff
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class#dc9ceb
variable, variable.other, meta.definition.variable.name#e0d6d9
variable.parameter, variable.other.readwrite#e0d6d9
variable.language, variable.other.constant, support.variable#31d2bf
entity.name.tag, punctuation.definition.tag#f38ba8
entity.other.attribute-name, meta.object-literal.key, support.type.property-name#fb9c6e
markup.heading, entity.name.section#f38ba8bold
markup.bold#31d2bfbold
markup.italic#aac461italic
markup.inline.raw, markup.fenced_code#68c0ff
markup.inserted#a6e3a1
markup.deleted#f38ba8
invalid, invalid.illegal#f38ba8
MoonLight custom-bg (авто-настройка) by MoonLightDeath - VS Code Theme