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#a6e3a1
  • activityBar.background#070b07
  • activityBar.border#313531
  • activityBar.foreground#a6e3a1
  • activityBar.inactiveForeground#697967
  • activityBarBadge.background#a6e3a1
  • activityBarBadge.foreground#0a0f0a
  • badge.background#a6e3a1
  • badge.foreground#0a0f0a
  • breadcrumb.activeSelectionForeground#a6e3a1
  • breadcrumb.focusForeground#d7e0d6
  • breadcrumb.foreground#697967
  • button.background#a6e3a1
  • button.foreground#0a0f0a
  • button.hoverBackground#b2e7ae
  • descriptionForeground#96a894
  • dropdown.background#1e221e
  • dropdown.border#313531
  • dropdown.foreground#d7e0d6
  • editor.background#0a0f0a
  • editor.findMatchBackground#a6e3a173
  • editor.findMatchHighlightBackground#a6e3a138
  • editor.foreground#d7e0d6
  • editor.lineHighlightBackground#272c2766
  • editor.selectionBackground#a6e3a152
  • editor.selectionHighlightBackground#a6e3a129
  • editor.wordHighlightBackground#a6e3a129
  • editor.wordHighlightStrongBackground#a6e3a13d
  • editorBracketMatch.background#a6e3a129
  • editorBracketMatch.border#a6e3a199
  • editorCursor.foreground#a6e3a1
  • editorError.foreground#f38ba8
  • editorGroup.border#313531
  • editorGroupHeader.tabsBackground#090d09
  • editorGroupHeader.tabsBorder#313531
  • editorGutter.addedBackground#a6e3a1
  • editorGutter.deletedBackground#f38ba8
  • editorGutter.modifiedBackground#55cec2
  • editorHoverWidget.background#1e221e
  • editorHoverWidget.border#313531
  • editorIndentGuide.activeBackground1#a6e3a199
  • editorIndentGuide.background1#313531
  • editorInfo.foreground#a6e3a1
  • editorLineNumber.activeForeground#a6e3a1
  • editorLineNumber.foreground#697967
  • editorSuggestWidget.background#1e221e
  • editorSuggestWidget.selectedBackground#a6e3a13d
  • editorWarning.foreground#f9e2af
  • editorWhitespace.foreground#697967
  • editorWidget.background#1e221e
  • editorWidget.border#313531
  • errorForeground#f38ba8
  • focusBorder#a6e3a180
  • foreground#96a894
  • gitDecoration.deletedResourceForeground#f38ba8
  • gitDecoration.modifiedResourceForeground#55cec2
  • gitDecoration.untrackedResourceForeground#a6e3a1
  • input.background#1e221e
  • input.border#313531
  • input.foreground#d7e0d6
  • input.placeholderForeground#697967
  • inputOption.activeBackground#a6e3a13d
  • inputOption.activeBorder#a6e3a1
  • list.activeSelectionBackground#a6e3a147
  • list.activeSelectionForeground#d7e0d6
  • list.focusBackground#a6e3a147
  • list.highlightForeground#a6e3a1
  • list.hoverBackground#2c312c80
  • list.inactiveSelectionBackground#a6e3a129
  • minimap.selectionHighlight#a6e3a180
  • panel.background#090d09
  • panel.border#313531
  • panelTitle.activeBorder#a6e3a1
  • panelTitle.activeForeground#d7e0d6
  • panelTitle.inactiveForeground#697967
  • peekViewEditor.background#0a0f0a
  • peekViewResult.background#090d09
  • progressBar.background#a6e3a1
  • quickInput.background#1e221e
  • quickInput.foreground#d7e0d6
  • quickInputList.focusBackground#a6e3a13d
  • scrollbarSlider.activeBackground#a6e3a18c
  • scrollbarSlider.background#a6e3a138
  • scrollbarSlider.hoverBackground#a6e3a161
  • selection.background#a6e3a157
  • sideBar.background#090d09
  • sideBar.border#313531
  • sideBar.foreground#96a894
  • sideBarSectionHeader.background#090d09
  • sideBarSectionHeader.foreground#d7e0d6
  • sideBarTitle.foreground#d7e0d6
  • statusBar.background#070b07
  • statusBar.border#313531
  • statusBar.debuggingBackground#a6e3a1
  • statusBar.debuggingForeground#0a0f0a
  • statusBar.foreground#96a894
  • statusBar.noFolderBackground#070b07
  • statusBarItem.remoteBackground#a6e3a1
  • statusBarItem.remoteForeground#0a0f0a
  • tab.activeBackground#0a0f0a
  • tab.activeBorder#a6e3a1b3
  • tab.activeBorderTop#a6e3a1
  • tab.activeForeground#d7e0d6
  • tab.border#070b07
  • tab.inactiveBackground#090d09
  • tab.inactiveForeground#697967
  • terminal.background#0a0f0a
  • terminal.foreground#d7e0d6
  • terminalCursor.foreground#a6e3a1
  • textLink.activeForeground#b4e7b0
  • textLink.foreground#a6e3a1
  • titleBar.activeBackground#070b07
  • titleBar.activeForeground#d7e0d6
  • titleBar.border#313531
  • titleBar.inactiveBackground#070b07
  • titleBar.inactiveForeground#697967
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#697967italic
string, string.quoted, string.template#90b8fe
constant.numeric, constant.language, constant.character, constant.other#d9a0e0
keyword, storage, storage.type, storage.modifier, keyword.control, keyword.operator.new#a6e3a1
keyword.operator, punctuation, meta.brace#96a894
entity.name.function, support.function, meta.function-call.generic#f69b95
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class#c8b962
variable, variable.other, meta.definition.variable.name#d7e0d6
variable.parameter, variable.other.readwrite#d7e0d6
variable.language, variable.other.constant, support.variable#d9a0e0
entity.name.tag, punctuation.definition.tag#a6e3a1
entity.other.attribute-name, meta.object-literal.key, support.type.property-name#55cec2
markup.heading, entity.name.section#a6e3a1bold
markup.bold#d9a0e0bold
markup.italic#90b8feitalic
markup.inline.raw, markup.fenced_code#f69b95
markup.inserted#a6e3a1
markup.deleted#f38ba8
invalid, invalid.illegal#f38ba8
MoonLight custom-bg (авто-настройка) by MoonLightDeath - VS Code Theme