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#140c06
  • activityBar.border#241810
  • activityBar.foreground#ff8844
  • activityBar.inactiveForeground#6b4830
  • activityBarBadge.background#ff4466
  • activityBarBadge.foreground#ffffff
  • badge.background#ff4466
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#e8d8c8
  • breadcrumb.focusForeground#ff8844
  • breadcrumb.foreground#6b4830
  • breadcrumbPicker.background#1c1410
  • button.background#c83820
  • button.foreground#ffffff
  • button.hoverBackground#a82818
  • button.secondaryBackground#3a2818
  • button.secondaryForeground#e8d8c8
  • button.secondaryHoverBackground#4a3020
  • debugIcon.breakpointForeground#ff4466
  • debugIcon.continueForeground#60a0d0
  • debugIcon.pauseForeground#f0c848
  • debugIcon.startForeground#88c870
  • debugIcon.stopForeground#ff4466
  • debugToolBar.background#1c1410
  • descriptionForeground#8b6848
  • diffEditor.insertedTextBackground#88c87015
  • diffEditor.removedTextBackground#ff446615
  • disabledForeground#6b4830
  • dropdown.background#1c1410
  • dropdown.border#3a2818
  • dropdown.foreground#e8d8c8
  • editor.background#1a100a
  • editor.findMatchBackground#f0c84850
  • editor.findMatchHighlightBackground#f0c84825
  • editor.findRangeHighlightBackground#ff884415
  • editor.foreground#e8d8c8
  • editor.hoverHighlightBackground#ff884418
  • editor.inactiveSelectionBackground#ff884418
  • editor.lineHighlightBackground#1c1410
  • editor.lineHighlightBorder#2a1c14
  • editor.selectionBackground#ff884430
  • editor.selectionHighlightBackground#ff884418
  • editor.wordHighlightBackground#e8a05020
  • editor.wordHighlightStrongBackground#e8a05040
  • editorBracketHighlight.foreground1#ff8844
  • editorBracketHighlight.foreground2#f0c848
  • editorBracketHighlight.foreground3#ff4466
  • editorBracketHighlight.foreground4#60c8b0
  • editorBracketHighlight.foreground5#d888c0
  • editorBracketHighlight.foreground6#60a0d0
  • editorBracketMatch.background#ff884420
  • editorBracketMatch.border#ff8844
  • editorCursor.background#1a100a
  • editorCursor.foreground#ff8844
  • editorError.foreground#ff4466
  • editorGroupHeader.border#241810
  • editorGroupHeader.tabsBackground#140c06
  • editorGroupHeader.tabsForeground#8b6848
  • editorGutter.addedBackground#88c87099
  • editorGutter.background#1a100a
  • editorGutter.deletedBackground#ff446699
  • editorGutter.modifiedBackground#f0c84899
  • editorHint.foreground#60c8b0
  • editorHoverWidget.background#1c1410
  • editorHoverWidget.border#3a2818
  • editorIndentGuide.activeBackground#ff884455
  • editorIndentGuide.background#2a1c14
  • editorInfo.foreground#60a0d0
  • editorLineNumber.activeForeground#ff8844
  • editorLineNumber.foreground#3a2818
  • editorRuler.foreground#2a1c14
  • editorSuggestWidget.background#1c1410
  • editorSuggestWidget.border#3a2818
  • editorSuggestWidget.highlightForeground#ff8844
  • editorSuggestWidget.selectedBackground#ff884418
  • editorWarning.foreground#f0c848
  • editorWidget.background#1c1410
  • editorWidget.border#3a2818
  • editorWidget.foreground#e8d8c8
  • errorForeground#ff4466
  • focusBorder#ff8844
  • foreground#e8d8c8
  • gitDecoration.addedResourceForeground#88c870
  • gitDecoration.conflictingResourceForeground#e8a050
  • gitDecoration.deletedResourceForeground#ff4466
  • gitDecoration.ignoredResourceForeground#6b4830
  • gitDecoration.modifiedResourceForeground#f0c848
  • gitDecoration.untrackedResourceForeground#60a0d0
  • icon.foreground#8b6848
  • input.background#1c1410
  • input.border#3a2818
  • input.foreground#e8d8c8
  • input.placeholderForeground#6b4830
  • inputOption.activeBackground#ff884430
  • inputOption.activeBorder#ff8844
  • inputValidation.errorBackground#2a0e10
  • inputValidation.errorBorder#ff4466
  • inputValidation.infoBackground#0a1820
  • inputValidation.infoBorder#60a0d0
  • inputValidation.warningBackground#2a1e0a
  • inputValidation.warningBorder#e8a050
  • list.activeSelectionBackground#ff884420
  • list.activeSelectionForeground#f0e0d0
  • list.errorForeground#ff4466
  • list.focusBackground#ff884418
  • list.focusForeground#f0e0d0
  • list.highlightForeground#ff8844
  • list.hoverBackground#241810
  • list.hoverForeground#f0e0d0
  • list.inactiveSelectionBackground#1c1410
  • list.inactiveSelectionForeground#c8a888
  • list.warningForeground#f0c848
  • menu.background#1c1410
  • menu.border#3a2818
  • menu.foreground#e8d8c8
  • menu.selectionBackground#ff884420
  • menu.selectionForeground#ffffff
  • minimap.background#1a100a
  • minimap.errorHighlight#ff4466
  • minimap.findMatchHighlight#f0c848
  • minimap.selectionHighlight#ff8844
  • minimap.warningHighlight#e8a050
  • minimapGutter.addedBackground#88c870
  • minimapGutter.deletedBackground#ff4466
  • minimapGutter.modifiedBackground#f0c848
  • notificationLink.foreground#e8a050
  • notifications.background#1c1410
  • notifications.border#2a1c14
  • notifications.foreground#e8d8c8
  • notificationsErrorIcon.foreground#ff4466
  • notificationsInfoIcon.foreground#60a0d0
  • notificationsWarningIcon.foreground#f0c848
  • notificationToast.border#ff8844
  • panel.background#161008
  • panel.border#241810
  • panelTitle.activeBorder#ff8844
  • panelTitle.activeForeground#f0e0d0
  • panelTitle.inactiveForeground#6b4830
  • peekView.border#e8a050
  • peekViewEditor.background#140c06
  • peekViewResult.background#161008
  • peekViewTitle.background#1c1410
  • progressBar.background#ff8844
  • quickInput.background#1c1410
  • quickInput.foreground#e8d8c8
  • quickInputList.focusBackground#ff884420
  • quickInputList.focusForeground#ffffff
  • scrollbar.shadow#00000060
  • scrollbarSlider.activeBackground#ff884460
  • scrollbarSlider.background#ffffff10
  • scrollbarSlider.hoverBackground#ff884430
  • selection.background#ff884440
  • settings.headerForeground#ff8844
  • settings.modifiedItemIndicator#e8a050
  • sideBar.background#161008
  • sideBar.border#241810
  • sideBar.foreground#c8a888
  • sideBarSectionHeader.background#1c1410
  • sideBarSectionHeader.border#2a1c14
  • sideBarSectionHeader.foreground#e8a050
  • sideBarTitle.foreground#ff8844
  • statusBar.background#a83020
  • statusBar.border#882818
  • statusBar.debuggingBackground#ff8844
  • statusBar.debuggingForeground#1a100a
  • statusBar.foreground#ffe8e0
  • statusBar.noFolderBackground#4a2040
  • statusBar.noFolderForeground#e8d8c8
  • statusBarItem.errorBackground#ff4466
  • statusBarItem.hoverBackground#ffffff12
  • statusBarItem.remoteBackground#ff8844
  • statusBarItem.remoteForeground#1a100a
  • statusBarItem.warningBackground#e8a050
  • tab.activeBackground#1c1410
  • tab.activeBorder#ff8844
  • tab.activeBorderTop#ff8844
  • tab.activeForeground#f0e0d0
  • tab.border#241810
  • tab.hoverBackground#241810
  • tab.hoverForeground#c8a888
  • tab.inactiveBackground#140c06
  • tab.inactiveForeground#6b4830
  • tab.unfocusedActiveBorder#4a3020
  • tab.unfocusedActiveForeground#8b6848
  • terminal.ansiBlack#241810
  • terminal.ansiBlue#60a0d0
  • terminal.ansiBrightBlack#6b4830
  • terminal.ansiBrightBlue#80b8e0
  • terminal.ansiBrightCyan#80d8c8
  • terminal.ansiBrightGreen#a0d888
  • terminal.ansiBrightMagenta#e8a0d0
  • terminal.ansiBrightRed#ff6688
  • terminal.ansiBrightWhite#f0e0d0
  • terminal.ansiBrightYellow#f8d868
  • terminal.ansiCyan#60c8b0
  • terminal.ansiGreen#88c870
  • terminal.ansiMagenta#d888c0
  • terminal.ansiRed#ff4466
  • terminal.ansiWhite#c8a888
  • terminal.ansiYellow#f0c848
  • terminal.background#1a100a
  • terminal.foreground#e8d8c8
  • terminalCursor.background#1a100a
  • terminalCursor.foreground#ff8844
  • titleBar.activeBackground#140c06
  • titleBar.activeForeground#e8d8c8
  • titleBar.border#241810
  • titleBar.inactiveBackground#100a04
  • titleBar.inactiveForeground#6b4830
  • tree.indentGuidesStroke#3a2818

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6b4830italic
variable, string constant.other.placeholder#e8d8c8
variable.language#e8a050italic
variable.parameter#c8a888
invalid, invalid.illegal#ff4466bold
keyword, storage.type, storage.modifier#ff8844bold
keyword.control, keyword.control.flow#e8a050bold
keyword.operator#ff4466
punctuation#8b6848
entity.name.tag#ff4466
entity.other.attribute-name#f0c848
text.html.basic entity.other.attribute-name#f0c848italic
entity.name.function, variable.function, support.function#f0e0d0bold
entity.name, entity.name.class, entity.name.type.class, support.class#60c8b0bold
support.type, entity.name.type#e8a050
constant.numeric#d888c0
constant.language#ff4466bold
constant, support.constant#f0c848
string#88c870
constant.character.escape, string.regexp#60a0d0
string.template#a0d888
source.css support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name#d888c0
support.constant.property-value#60c8b0
entity.other.attribute-name.class.css#f0c848
meta.decorator, punctuation.decorator#e8a050italic
keyword.control.import, keyword.control.export, keyword.control.from#ff8844bold
markup.inserted#88c870
markup.deleted#ff4466
markup.changed#f0c848
*url*, *link*, *uri*#e8a050underline
markup.heading, markup.heading entity.name#ff8844bold
markup.bold#f0c848bold
markup.italic#e8a050italic
markup.inline.raw.markdown, markup.raw.block#88c870
source.json meta.structure.dictionary.json support.type.property-name.json#ff8844
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#f0c848
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#88c870
NedoTheme by NedoDev - VS Code Theme