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#000000
  • activityBar.border#000000
  • activityBar.foreground#00ffcf
  • activityBar.inactiveForeground#7baba966
  • activityBarBadge.background#01375c
  • activityBarBadge.foreground#00f3ff
  • badge.background#131313
  • badge.foreground#c7c7c7
  • breadcrumb.activeSelectionForeground#fffafa
  • breadcrumb.background#000000
  • breadcrumb.focusForeground#fffafa
  • breadcrumb.foreground#dededecc
  • button.background#434343
  • button.foreground#a9a9a9
  • button.hoverBackground#191919
  • button.secondaryBackground#414040
  • button.secondaryForeground#b0abab
  • button.secondaryHoverBackground#191919
  • checkbox.background#2a2a2a
  • checkbox.border#00000000
  • checkbox.foreground#b4b2b2
  • debugExceptionWidget.background#333333
  • debugExceptionWidget.border#474747
  • debugToolBar.background#333333
  • debugToolBar.border#474747
  • diffEditor.border#444444
  • diffEditor.insertedTextBackground#9bb95533
  • diffEditor.removedTextBackground#ff000033
  • dropdown.background#2a2a2a
  • dropdown.border#00000000
  • dropdown.foreground#b4b2b2
  • editor.background#000000
  • editor.findMatchBackground#303030
  • editor.findMatchBorder#383a3d
  • editor.findMatchHighlightBackground#007b4755
  • editor.findMatchHighlightBorder#ffffff00
  • editor.findRangeHighlightBackground#2a2a2a66
  • editor.findRangeHighlightBorder#eeeeee00
  • editor.foldBackground#4343434d
  • editor.foreground#dbdbdb
  • editor.hoverHighlightBackground#264f7840
  • editor.inactiveSelectionBackground#282828
  • editor.lineHighlightBackground#3030300a
  • editor.lineHighlightBorder#0f0f0f
  • editor.rangeHighlightBackground#dedede0b
  • editor.rangeHighlightBorder#adadad00
  • editor.selectionBackground#282828
  • editor.selectionHighlightBackground#c2c2c226
  • editor.selectionHighlightBorder#3f645f
  • editor.wordHighlightBackground#2a2a2ab8
  • editor.wordHighlightStrongBackground#004b4bb8
  • editorBracketMatch.background#4747471a
  • editorBracketMatch.border#2c2c2c
  • editorCodeLens.foreground#b8b6b6
  • editorCursor.background#000000
  • editorCursor.foreground#00ff9f
  • editorError.background#B73A3400
  • editorError.border#ff000000
  • editorError.foreground#ff7f66
  • editorGroup.border#1b1b1b
  • editorGroup.emptyBackground#000000
  • editorGroupHeader.border#000000
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#000000
  • editorGutter.addedBackground#00ff9f
  • editorGutter.background#000000
  • editorGutter.commentRangeForeground#d5d5d5
  • editorGutter.deletedBackground#ff000c
  • editorGutter.foldingControlForeground#d5d5d5
  • editorGutter.modifiedBackground#00ffb7
  • editorHoverWidget.background#000000
  • editorHoverWidget.border#454545
  • editorHoverWidget.foreground#cccccc
  • editorIndentGuide.activeBackground#383838
  • editorIndentGuide.background#303030
  • editorInfo.background#4490BF00
  • editorInfo.border#4490BF00
  • editorInfo.foreground#0258a5
  • editorLineNumber.activeForeground#ffffff
  • editorLineNumber.foreground#757575
  • editorLink.activeForeground#238c47
  • editorMarkerNavigation.background#2d2d30
  • editorMarkerNavigationError.background#f48771
  • editorMarkerNavigationInfo.background#75beff
  • editorMarkerNavigationWarning.background#cca700
  • editorOverviewRuler.background#25252500
  • editorOverviewRuler.border#0000004d
  • editorRuler.foreground#363636
  • editorSuggestWidget.background#111111
  • editorSuggestWidget.border#000000
  • editorSuggestWidget.foreground#a1a1a1
  • editorSuggestWidget.highlightForeground#00ba8e
  • editorSuggestWidget.selectedBackground#303030
  • editorWarning.background#A9904000
  • editorWarning.border#ffffff00
  • editorWarning.foreground#be9c03
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#000000
  • editorWidget.foreground#cccccc
  • editorWidget.resizeBorder#5F5F5F
  • focusBorder#000000
  • foreground#a3a3a3
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#5c5c77
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#8c8c8c
  • gitDecoration.modifiedResourceForeground#e2c08d
  • gitDecoration.stageDeletedResourceForeground#c74e39
  • gitDecoration.stageModifiedResourceForeground#e2c08d
  • gitDecoration.submoduleResourceForeground#57abab
  • gitDecoration.untrackedResourceForeground#73c991
  • icon.foreground#a3a3a3
  • input.background#2a2a2a
  • input.border#00000000
  • input.foreground#b4b2b2
  • input.placeholderForeground#666666
  • inputOption.activeBackground#26262666
  • inputOption.activeBorder#00000000
  • inputOption.activeForeground#9f9c9c
  • list.activeSelectionBackground#0f0f0f
  • list.activeSelectionForeground#8a8a8a
  • list.dropBackground#131313
  • list.focusBackground#191919
  • list.focusForeground#949292
  • list.highlightForeground#00ffcf
  • list.hoverBackground#262626
  • list.hoverForeground#fff3f3
  • list.inactiveSelectionBackground#151515
  • list.inactiveSelectionForeground#887979
  • listFilterWidget.background#242221
  • listFilterWidget.noMatchesOutline#000000
  • listFilterWidget.outline#00000000
  • menu.background#1d1d1d
  • menu.border#00000085
  • menu.foreground#bababa
  • menu.selectionBackground#323232
  • menu.selectionBorder#00000000
  • menu.selectionForeground#c4c4c4
  • menu.separatorBackground#b0b0b0
  • menubar.selectionBackground#c2c0c01a
  • menubar.selectionBorder#000000
  • menubar.selectionForeground#c2c2c2
  • merge.commonContentBackground#282828
  • merge.commonHeaderBackground#3d3d3d
  • merge.currentContentBackground#27403B
  • merge.currentHeaderBackground#367366
  • merge.incomingContentBackground#004043
  • merge.incomingHeaderBackground#046843
  • minimap.background#000000
  • minimap.errorHighlight#ff7f66
  • minimap.findMatchHighlight#303030
  • minimap.selectionHighlight#282828
  • minimap.warningHighlight#be9c03
  • minimapGutter.addedBackground#00ff9f
  • minimapGutter.deletedBackground#ff000c
  • minimapGutter.modifiedBackground#00ffb7
  • notificationCenter.border#000000
  • notificationCenterHeader.background#111111
  • notificationCenterHeader.foreground#e0e0e0
  • notifications.background#111111
  • notifications.border#383838
  • notifications.foreground#bababa
  • notificationsErrorIcon.foreground#ff6647
  • notificationsInfoIcon.foreground#80c3ff
  • notificationsWarningIcon.foreground#d1ab00
  • notificationToast.border#000000
  • panel.background#0a0a0a
  • panel.border#00000059
  • panelSection.border#d5d5d559
  • panelTitle.activeBorder#00ff93
  • panelTitle.activeForeground#cfcfcf
  • panelTitle.inactiveForeground#64646499
  • peekView.border#007acc
  • peekViewEditor.background#001f33
  • peekViewEditor.matchHighlightBackground#ff8f0099
  • peekViewEditor.matchHighlightBorder#ee931e
  • peekViewEditorGutter.background#001f33
  • peekViewResult.background#252526
  • peekViewResult.fileForeground#ffffff
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#ea5c004d
  • peekViewResult.selectionBackground#3399ff33
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#1e1e1e
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#3f3f46
  • pickerGroup.foreground#00ffcf
  • progressBar.background#7b7b7b
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#bfbfbf66
  • scrollbarSlider.background#34343466
  • scrollbarSlider.hoverBackground#262525b3
  • selection.background#1b1b1b
  • settings.focusedRowBackground#ffffff07
  • settings.headerForeground#a3a3a3
  • sideBar.background#000000
  • sideBar.border#000000
  • sideBar.dropBackground#131313
  • sideBar.foreground#b6b6b6
  • sideBarSectionHeader.background#ffffff00
  • sideBarSectionHeader.border#26262633
  • sideBarSectionHeader.foreground#009b76
  • sideBarTitle.foreground#00b086
  • statusBar.background#000000
  • statusBar.border#000000
  • statusBar.debuggingBackground#2a2a2a
  • statusBar.debuggingBorder#000000
  • statusBar.debuggingForeground#adacac
  • statusBar.foreground#adadad
  • statusBar.noFolderBackground#000000
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.activeBackground#FFFFFF25
  • statusBarItem.hoverBackground#ffffff1f
  • statusBarItem.remoteBackground#006d47
  • statusBarItem.remoteForeground#b4b4b4
  • tab.activeBackground#0a0a0a
  • tab.activeBorder#00000000
  • tab.activeBorderTop#00000000
  • tab.activeForeground#b4b4b4
  • tab.border#020202
  • tab.hoverBackground#131313
  • tab.hoverForeground#c7c7c7
  • tab.inactiveBackground#0f0f0f
  • tab.inactiveForeground#a1a1a180
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#2472c8
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#3b8eea
  • terminal.ansiBrightCyan#29b8db
  • terminal.ansiBrightGreen#23d18b
  • terminal.ansiBrightMagenta#d670d6
  • terminal.ansiBrightRed#f14c4c
  • terminal.ansiBrightWhite#fffafa
  • terminal.ansiBrightYellow#f5f543
  • terminal.ansiCyan#11a8cd
  • terminal.ansiGreen#0dbc79
  • terminal.ansiMagenta#bc3fbc
  • terminal.ansiRed#cd3131
  • terminal.ansiWhite#c4c4c4
  • terminal.ansiYellow#e5e510
  • terminal.border#d5d5d559
  • terminal.foreground#a1a1a1
  • terminal.selectionBackground#62626240
  • terminalCursor.background#000000
  • terminalCursor.foreground#00ff9f
  • textLink.foreground#07ff97
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#adadad
  • titleBar.border#00000000
  • titleBar.inactiveBackground#00000099
  • titleBar.inactiveForeground#cccccc99
  • tree.indentGuidesStroke#585858
  • walkThrough.embeddedEditorBackground#00000050
  • widget.shadow#0000005c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#D4D4D4
emphasisitalic
strongbold
header#000080
comment#57A64A
constant.language#569cd6
constant.numeric#b5cea8
constant.regexp#646695
entity.name.tag#569cd6
entity.name.tag.css#d7ba7d
entity.other.attribute-name#9cdcfe
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss#d7ba7d
invalid#f44747
markup.underlineunderline
markup.bold#569cd6bold
markup.heading#569cd6bold
markup.italicitalic
markup.inserted#b5cea8
markup.deleted#D69D85
markup.changed#569cd6
punctuation.definition.quote.begin.markdown#6A9955
punctuation.definition.list.begin.markdown#6796e6
markup.inline.raw#D69D85
punctuation.definition.tag#808080
meta.preprocessor#569cd6
meta.preprocessor.string#D69D85
meta.preprocessor.numeric#b5cea8
meta.structure.dictionary.key.python#9cdcfe
meta.diff.header#569cd6
storage#569cd6
storage.type#569cd6
storage.modifier#569cd6
string#D69D85
string.tag#D69D85
string.value#D69D85
string.regexp#d16969
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#569cd6
meta.template.expression#d4d4d4
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#9cdcfe
keyword#569cd6
keyword.control#569cd6
keyword.operator#B4B4B4
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python#569cd6
keyword.other.unit#b5cea8
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#569cd6
support.function.git-rebase#9cdcfe
constant.sha.git-rebase#b5cea8
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d4d4d4
variable.language#569cd6
entity.name#C8C8C8
keyword.control.directive#9B9B9B
variable#C8C8C8
entity.name.function#C8C8C8
entity.name.function.operator#B4B4B4
entity.name.function.preprocessor#BD63C5
entity.name.label#C8C8C8
entity.name.namespace#C8C8C8
entity.name.type, entity.name.class#4EC9B0
entity.name.operator.custom-literal#DADADA
entity.name.operator.custom-literal.number#B5CEA8
entity.name.operator.custom-literal.string#D69D85
keyword.operator.new, keyword.operator.delete#569CD6
variable.other.enummember#B8D7A3
variable.other.property#DADADA
variable.parameter#7F7F7F

Shiki preview

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

Loading...

Nox Theme by AgamjotSB - VS Code Theme