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#c2c2c2
  • activityBar.inactiveForeground#7baba966
  • activityBarBadge.background#ffffff
  • activityBarBadge.foreground#000000
  • checkbox.border#0a0a0a
  • commandCenter.activeBackground#000
  • commandCenter.activeForeground#ffffff
  • commandCenter.border#000
  • commandCenter.foreground#ffffff
  • commandCenter.inactiveBorder#454545
  • commandCenter.inactiveForeground#ffffff
  • debugIcon.breakpointCurrentStackframeForeground#aaaaaa
  • debugIcon.breakpointDisabledForeground#aaaaaa
  • debugIcon.breakpointForeground#aaaaaa
  • debugIcon.breakpointStackframeForeground#aaaaaa
  • debugIcon.breakpointUnverifiedForeground#aaaaaa
  • debugIcon.continueForeground#aaaaaa
  • debugIcon.disconnectForeground#aaaaaa
  • debugIcon.pauseForeground#aaaaaa
  • debugIcon.restartForeground#aaaaaa
  • debugIcon.startForeground#aaaaaa
  • debugIcon.stepBackForeground#aaaaaa
  • debugIcon.stepIntoForeground#aaaaaa
  • debugIcon.stepOutForeground#aaaaaa
  • debugIcon.stepOverForeground#aaaaaa
  • debugIcon.stopForeground#aaaaaa
  • debugToolBar.background#000000
  • diffEditor.insertedLineBackground#3037215d
  • diffEditor.insertedTextBackground#30372133
  • diffEditor.removedTextBackground#ff000019
  • dropdown.background#000000
  • dropdown.foreground#aaaaaa
  • editor.background#000
  • editor.findMatchBackground#000000
  • editor.findMatchBorder#999999
  • editor.findMatchHighlightBackground#00000000
  • editor.findMatchHighlightBorder#3d3d3d
  • editor.foldBackground#000000
  • editor.foreground#b3b3b3
  • editor.hoverHighlightBackground#0f0f0f
  • editor.lineHighlightBackground#060606
  • editor.selectionBackground#222
  • editor.selectionHighlightBorder#3d3d3d
  • editor.wordHighlightStrongBackground#3d3d3d
  • editorBracketHighlight.foreground1#ddd
  • editorBracketMatch.background#000000
  • editorBracketMatch.border#3d3d3d
  • editorCursor.foreground#b3b3b3
  • editorGroup.border#0a0a0a00
  • editorGroupHeader.tabsBackground#000
  • editorGroupHeader.tabsBorder#121212
  • editorGutter.foldingControlForeground#888
  • editorHoverWidget.statusBarBackground#000000
  • editorIndentGuide.activeBackground1#3d3d3d
  • editorIndentGuide.background1#141414
  • editorInfo.foreground#5c5c5c
  • editorLightBulb.foreground#aaaaaa
  • editorLineNumber.activeForeground#777
  • editorLineNumber.foreground#222
  • editorLink.activeForeground#bfbfbf
  • editorOverviewRuler.border#0a0a0a
  • editorRuler.foreground#141414
  • editorSuggestWidget.foreground#777777
  • editorSuggestWidget.highlightForeground#bfbfbf
  • editorWarning.foreground#5c5c5c
  • editorWhitespace.foreground#2b2b2b
  • editorWidget.background#000000
  • focusBorder#000000
  • gitDecoration.addedResourceForeground#c0c0c0
  • gitDecoration.conflictingResourceForeground#c0c0c0
  • gitDecoration.deletedResourceForeground#777777
  • gitDecoration.ignoredResourceForeground#272727
  • gitDecoration.modifiedResourceForeground#c0c0c0
  • gitDecoration.submoduleResourceForeground#777777
  • gitDecoration.untrackedResourceForeground#c0c0c0
  • icon.foreground#fff
  • input.background#000000
  • input.border#181818
  • input.foreground#aaaaaa
  • list.activeSelectionBackground#2d2d2d
  • list.activeSelectionForeground#bfbfbf
  • list.errorForeground#ff6846
  • list.filterMatchBackground#1a1a1a
  • list.filterMatchBorder#000000
  • list.focusBackground#0a0a0a
  • list.highlightForeground#999999
  • list.hoverBackground#000000
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#222
  • list.inactiveSelectionForeground#bfbfbf
  • list.warningForeground#ffbb58
  • listFilterWidget.background#000000
  • listFilterWidget.noMatchesOutline#ff6846
  • listFilterWidget.outline#3d3d3d
  • menu.background#000000
  • menu.foreground#aaaaaa
  • menubar.selectionBackground#0a0a0a
  • panel.border#0a0a0a
  • panelTitle.activeBorder#000000
  • panelTitle.activeForeground#bfbfbf
  • panelTitle.inactiveForeground#3d3d3d
  • peekView.border#383838
  • peekViewEditor.background#000000
  • peekViewEditor.matchHighlightBackground#000000
  • peekViewEditor.matchHighlightBorder#3d3d3d
  • peekViewEditorGutter.background#000000
  • peekViewResult.background#060606
  • peekViewResult.fileForeground#999999
  • peekViewResult.lineForeground#3d3d3d
  • peekViewResult.matchHighlightBackground#0f0f0f
  • peekViewResult.selectionBackground#000000
  • peekViewResult.selectionForeground#bfbfbf
  • pickerGroup.foreground#9d9d9d
  • quickInput.background#151515
  • quickInput.foreground#999
  • quickInputList.focusBackground#000
  • quickInputList.focusForeground#fff
  • sash.hoverBorder#0f0f0f
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#303030
  • scrollbarSlider.background#222
  • scrollbarSlider.hoverBackground#222
  • settings.checkboxBorder#0a0a0a
  • settings.dropdownBorder#0a0a0a
  • settings.modifiedItemIndicator#383838
  • settings.textInputBorder#0a0a0a
  • sideBar.background#000000
  • sideBar.border#151515
  • sideBar.foreground#aaa
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#0a0a0a
  • statusBar.background#000000
  • statusBar.border#0a0a0a
  • statusBar.debuggingBackground#000000
  • statusBar.debuggingBorder#0a0a0a
  • statusBar.debuggingForeground#aaaaaa
  • statusBar.foreground#aaaaaa
  • statusBar.noFolderBackground#000000
  • statusBar.noFolderBorder#0a0a0a
  • statusBar.noFolderForeground#aaaaaa
  • statusBarItem.activeBackground#000000
  • statusBarItem.hoverBackground#000000
  • symbolIcon.arrayForeground#aaaaaa
  • symbolIcon.booleanForeground#aaaaaa
  • symbolIcon.classForeground#aaaaaa
  • symbolIcon.colorForeground#aaaaaa
  • symbolIcon.constantForeground#aaaaaa
  • symbolIcon.constructorForeground#aaaaaa
  • symbolIcon.enumeratorForeground#aaaaaa
  • symbolIcon.enumeratorMemberForeground#aaaaaa
  • symbolIcon.eventForeground#aaaaaa
  • symbolIcon.fieldForeground#aaaaaa
  • symbolIcon.fileForeground#aaaaaa
  • symbolIcon.folderForeground#aaaaaa
  • symbolIcon.functionForeground#aaaaaa
  • symbolIcon.interfaceForeground#aaaaaa
  • symbolIcon.keyForeground#aaaaaa
  • symbolIcon.keywordForeground#aaaaaa
  • symbolIcon.methodForeground#aaaaaa
  • symbolIcon.moduleForeground#aaaaaa
  • symbolIcon.namespaceForeground#aaaaaa
  • symbolIcon.nullForeground#aaaaaa
  • symbolIcon.numberForeground#aaaaaa
  • symbolIcon.objectForeground#aaaaaa
  • symbolIcon.operatorForeground#aaaaaa
  • symbolIcon.packageForeground#aaaaaa
  • symbolIcon.propertyForeground#aaaaaa
  • symbolIcon.referenceForeground#aaaaaa
  • symbolIcon.snippetForeground#aaaaaa
  • symbolIcon.stringForeground#aaaaaa
  • symbolIcon.structForeground#aaaaaa
  • symbolIcon.textForeground#aaaaaa
  • symbolIcon.typeParameterForeground#aaaaaa
  • symbolIcon.unitForeground#aaaaaa
  • symbolIcon.variableForeground#aaaaaa
  • tab.activeBackground#171717
  • tab.activeBorder#ffffff95
  • tab.activeForeground#b4b4b4
  • tab.border#000000
  • tab.hoverBackground#171717
  • tab.hoverForeground#c7c7c7
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#a1a1a180
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#333333
  • terminal.ansiBrightBlack#1a1a1a
  • terminal.ansiBrightBlue#333333
  • terminal.ansiBrightCyan#666666
  • terminal.ansiBrightGreen#4d4d4d
  • terminal.ansiBrightMagenta#999999
  • terminal.ansiBrightRed#999999
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#b3b3b3
  • terminal.ansiCyan#666666
  • terminal.ansiGreen#4d4d4d
  • terminal.ansiMagenta#999999
  • terminal.ansiRed#999999
  • terminal.ansiWhite#cccccc
  • terminal.ansiYellow#b3b3b3
  • terminal.background#000000
  • terminal.foreground#999999
  • terminalCursor.background#000000
  • terminalCursor.foreground#b3b3b3
  • textLink.activeForeground#ffffff
  • textLink.foreground#ffffff
  • textPreformat.foreground#aaaaaa
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#aaaaaa
  • titleBar.border#0a0a0a
  • titleBar.inactiveBackground#000000
  • tree.indentGuidesStroke#141414
  • window.activeBorder#0a0a0a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
string#aaa
variable.parameter.function#B3B3B3
comment, punctuation.definition.comment#555
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.parameters, punctuation.definition.array#B3B3B3
none#B3B3B3
keyword.operator#B3B3B3
keyword#454545
variable#fff
entity.name.function#ffff9c
meta.require, support.function.any-method#777777
support.class, entity.name.class, entity.name.type.class#999999
meta.class#F5F5F5
keyword.other.special-method#454545
storage#777777
support.function#999999
string, constant.other.symbol, entity.other.inherited-class#999999
constant.numeric#aaaaaa
none#aaaaaa
none#aaaaaa
constant#aaaaaa
entity.name.tag#888888
entity.other.attribute-name#aaaaaa
entity.other.attribute-name.id, punctuation.definition.entity#777777
meta.selector#777777
none#aaaaaa
markup.heading punctuation.definition.heading, entity.name.section#777777
keyword.other.unit#aaaaaa
markup.bold, punctuation.definition.bold#999999bold
markup.italic, punctuation.definition.italic#777777italic
markup.raw.inline#999999
string.other.link, punctuation.definition.string.end.markdown#b3b3b3
meta.link#aaaaaa
markup.list#b3b3b3
markup.quote#aaaaaa
meta.separator#B3B3B3
markup.inserted#999999
markup.deleted#888888
markup.changed#777777
constant.other.color#999999
string.regexp#999999
constant.character.escape#999999
punctuation.section.embedded, variable.interpolation#777777
invalid.illegal#F44747
invalid.broken#F44747
invalid.deprecated#F5F5F5
invalid.unimplemented#F5F5F5
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
support.class#cccbold
meta.tag#cccccc
variable#fff

Shiki preview

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

Loading...

Batsignal by tamagui - VS Code Theme