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.background#0a0e0c
  • activityBar.border#142018
  • activityBar.foreground#7cc890
  • activityBar.inactiveForeground#3d5848
  • activityBarBadge.background#d4a050
  • activityBarBadge.foreground#0e1210
  • badge.background#d4a050
  • badge.foreground#0e1210
  • breadcrumb.activeSelectionForeground#c8d8c8
  • breadcrumb.focusForeground#7cc890
  • breadcrumb.foreground#3d5848
  • button.background#2a5038
  • button.foreground#d8e8d8
  • button.hoverBackground#1e3828
  • button.secondaryBackground#1e3828
  • button.secondaryForeground#c8d8c8
  • debugIcon.breakpointForeground#c85050
  • debugIcon.startForeground#5cb878
  • debugIcon.stopForeground#c85050
  • descriptionForeground#688878
  • diffEditor.insertedTextBackground#5cb87815
  • diffEditor.removedTextBackground#c8505015
  • disabledForeground#3d5848
  • dropdown.background#101814
  • dropdown.border#1e3828
  • dropdown.foreground#c8d8c8
  • editor.background#0e1210
  • editor.findMatchBackground#d4a05050
  • editor.findMatchHighlightBackground#d4a05025
  • editor.findRangeHighlightBackground#5cb87815
  • editor.foreground#c8d8c8
  • editor.inactiveSelectionBackground#5cb87815
  • editor.lineHighlightBackground#101814
  • editor.lineHighlightBorder#1c2c22
  • editor.selectionBackground#5cb87828
  • editor.selectionHighlightBackground#5cb87815
  • editor.wordHighlightBackground#7cc89020
  • editor.wordHighlightStrongBackground#7cc89040
  • editorBracketHighlight.foreground1#5cb878
  • editorBracketHighlight.foreground2#d4a050
  • editorBracketHighlight.foreground3#c85050
  • editorBracketHighlight.foreground4#50b0a0
  • editorBracketHighlight.foreground5#b070a0
  • editorBracketHighlight.foreground6#5098c0
  • editorBracketMatch.background#7cc89020
  • editorBracketMatch.border#7cc890
  • editorCursor.background#0e1210
  • editorCursor.foreground#7cc890
  • editorError.foreground#c85050
  • editorGroupHeader.border#142018
  • editorGroupHeader.tabsBackground#0a0e0c
  • editorGutter.addedBackground#5cb87899
  • editorGutter.deletedBackground#c8505099
  • editorGutter.modifiedBackground#d4a05099
  • editorHint.foreground#50b0a0
  • editorHoverWidget.background#101814
  • editorHoverWidget.border#1e3828
  • editorIndentGuide.activeBackground#5cb87855
  • editorIndentGuide.background#1c2c22
  • editorInfo.foreground#5098c0
  • editorLineNumber.activeForeground#5cb878
  • editorLineNumber.foreground#1e3828
  • editorRuler.foreground#1c2c22
  • editorSuggestWidget.background#101814
  • editorSuggestWidget.border#1e3828
  • editorSuggestWidget.highlightForeground#7cc890
  • editorSuggestWidget.selectedBackground#5cb87818
  • editorWarning.foreground#d4a050
  • editorWidget.background#101814
  • editorWidget.border#1e3828
  • errorForeground#c85050
  • focusBorder#5cb878
  • foreground#c8d8c8
  • gitDecoration.addedResourceForeground#5cb878
  • gitDecoration.conflictingResourceForeground#d4a050
  • gitDecoration.deletedResourceForeground#c85050
  • gitDecoration.ignoredResourceForeground#3d5848
  • gitDecoration.modifiedResourceForeground#d4a050
  • gitDecoration.untrackedResourceForeground#5098c0
  • icon.foreground#688878
  • input.background#101814
  • input.border#1e3828
  • input.foreground#c8d8c8
  • input.placeholderForeground#3d5848
  • inputOption.activeBackground#5cb87828
  • inputOption.activeBorder#5cb878
  • inputValidation.errorBorder#c85050
  • inputValidation.infoBorder#5098c0
  • inputValidation.warningBorder#d4a050
  • list.activeSelectionBackground#5cb87820
  • list.activeSelectionForeground#d8e8d8
  • list.errorForeground#c85050
  • list.highlightForeground#7cc890
  • list.hoverBackground#142018
  • list.inactiveSelectionBackground#101814
  • list.warningForeground#d4a050
  • menu.background#101814
  • menu.border#1e3828
  • menu.foreground#c8d8c8
  • menu.selectionBackground#5cb87820
  • menu.selectionForeground#ffffff
  • minimap.background#0e1210
  • minimap.errorHighlight#c85050
  • minimap.findMatchHighlight#d4a050
  • minimap.selectionHighlight#5cb878
  • minimapGutter.addedBackground#5cb878
  • minimapGutter.deletedBackground#c85050
  • minimapGutter.modifiedBackground#d4a050
  • notificationLink.foreground#5cb878
  • notifications.background#101814
  • notifications.foreground#c8d8c8
  • notificationsErrorIcon.foreground#c85050
  • notificationsInfoIcon.foreground#5098c0
  • notificationsWarningIcon.foreground#d4a050
  • notificationToast.border#7cc890
  • panel.background#0c100e
  • panel.border#142018
  • panelTitle.activeBorder#7cc890
  • panelTitle.activeForeground#d8e8d8
  • panelTitle.inactiveForeground#3d5848
  • peekView.border#5cb878
  • peekViewEditor.background#0a0e0c
  • peekViewResult.background#0c100e
  • peekViewTitle.background#101814
  • progressBar.background#7cc890
  • quickInput.background#101814
  • quickInput.foreground#c8d8c8
  • quickInputList.focusBackground#5cb87820
  • scrollbar.shadow#00000050
  • scrollbarSlider.activeBackground#5cb87860
  • scrollbarSlider.background#ffffff0c
  • scrollbarSlider.hoverBackground#5cb87830
  • selection.background#5cb87840
  • settings.headerForeground#7cc890
  • settings.modifiedItemIndicator#5cb878
  • sideBar.background#0c100e
  • sideBar.border#142018
  • sideBar.foreground#98b8a0
  • sideBarSectionHeader.background#101814
  • sideBarSectionHeader.border#1c2c22
  • sideBarSectionHeader.foreground#5cb878
  • sideBarTitle.foreground#7cc890
  • statusBar.background#2a5038
  • statusBar.border#1e3828
  • statusBar.debuggingBackground#d4a050
  • statusBar.debuggingForeground#0e1210
  • statusBar.foreground#d0e8d0
  • statusBar.noFolderBackground#504028
  • statusBar.noFolderForeground#c8d8c8
  • statusBarItem.errorBackground#c85050
  • statusBarItem.hoverBackground#ffffff10
  • statusBarItem.remoteBackground#7cc890
  • statusBarItem.remoteForeground#0e1210
  • statusBarItem.warningBackground#d4a050
  • tab.activeBackground#101814
  • tab.activeBorder#7cc890
  • tab.activeBorderTop#7cc890
  • tab.activeForeground#d8e8d8
  • tab.border#142018
  • tab.hoverBackground#142018
  • tab.hoverForeground#98b8a0
  • tab.inactiveBackground#0a0e0c
  • tab.inactiveForeground#3d5848
  • terminal.ansiBlack#142018
  • terminal.ansiBlue#5098c0
  • terminal.ansiBrightBlack#3d5848
  • terminal.ansiBrightBlue#70b0d8
  • terminal.ansiBrightCyan#70c8b8
  • terminal.ansiBrightGreen#80d098
  • terminal.ansiBrightMagenta#c890b8
  • terminal.ansiBrightRed#e07070
  • terminal.ansiBrightWhite#d8e8d8
  • terminal.ansiBrightYellow#e0b868
  • terminal.ansiCyan#50b0a0
  • terminal.ansiGreen#5cb878
  • terminal.ansiMagenta#b070a0
  • terminal.ansiRed#c85050
  • terminal.ansiWhite#98b8a0
  • terminal.ansiYellow#d4a050
  • terminal.background#0e1210
  • terminal.foreground#c8d8c8
  • terminalCursor.background#0e1210
  • terminalCursor.foreground#7cc890
  • titleBar.activeBackground#0a0e0c
  • titleBar.activeForeground#c8d8c8
  • titleBar.border#142018
  • titleBar.inactiveBackground#080c0a
  • titleBar.inactiveForeground#3d5848
  • tree.indentGuidesStroke#1e3828

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#3d5848italic
variable#c8d8c8
variable.language#50b0a0italic
variable.parameter#98b8a0
invalid, invalid.illegal#c85050bold
keyword, storage.type, storage.modifier#5cb878bold
keyword.control#7cc890bold
keyword.operator#c85050
punctuation#688878
entity.name.tag#c85050
entity.other.attribute-name#d4a050
entity.name.function, variable.function, support.function#d8e8d8bold
entity.name, entity.name.class, support.class#50b0a0bold
support.type, entity.name.type#5098c0
constant.numeric#b070a0
constant.language#c85050bold
constant, support.constant#d4a050
string#80d098
constant.character.escape, string.regexp#5098c0
string.template#98d8a8
source.css support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name#b070a0
support.constant.property-value#50b0a0
entity.other.attribute-name.class.css#d4a050
meta.decorator#d4a050italic
keyword.control.import, keyword.control.export, keyword.control.from#5cb878bold
markup.inserted#5cb878
markup.deleted#c85050
markup.changed#d4a050
*url*, *link*, *uri*#5098c0underline
markup.heading#7cc890bold
markup.bold#d4a050bold
markup.italic#5098c0italic
markup.inline.raw.markdown, markup.raw.block#80d098
source.json meta.structure.dictionary.json support.type.property-name.json#5cb878
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#d4a050
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#50b0a0
NedoTheme by NedoDev - VS Code Theme