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#0a1219
  • activityBar.background#0a1219
  • activityBar.border#131b22
  • activityBar.foreground#b7bcc1
  • activityBar.inactiveForeground#41484f
  • activityBarBadge.background#61676d
  • badge.background#222930
  • badge.foreground#b7bcc1
  • button.background#20272e
  • button.hoverBackground#262e34
  • checkbox.border#131b22
  • dart.closingLabels#1c242b
  • debugIcon.breakpointCurrentStackframeForeground#8d9398
  • debugIcon.breakpointDisabledForeground#8d9398
  • debugIcon.breakpointForeground#8d9398
  • debugIcon.breakpointStackframeForeground#8d9398
  • debugIcon.breakpointUnverifiedForeground#8d9398
  • debugIcon.continueForeground#8d9398
  • debugIcon.disconnectForeground#8d9398
  • debugIcon.pauseForeground#8d9398
  • debugIcon.restartForeground#8d9398
  • debugIcon.startForeground#8d9398
  • debugIcon.stepBackForeground#8d9398
  • debugIcon.stepIntoForeground#8d9398
  • debugIcon.stepOutForeground#8d9398
  • debugIcon.stepOverForeground#8d9398
  • debugIcon.stopForeground#8d9398
  • debugToolBar.background#0a1219
  • dropdown.background#0a1219
  • dropdown.foreground#8d9398
  • editor.background#0a1219
  • editor.findMatchBackground#0a1219
  • editor.findMatchBorder#7e8489
  • editor.findMatchHighlightBackground#0a1219
  • editor.findMatchHighlightBorder#41484f
  • editor.foldBackground#0a1219
  • editor.foreground#acb1b6
  • editor.hoverHighlightBackground#181f26
  • editor.lineHighlightBackground#10181f
  • editor.selectionBackground#181f26
  • editorBracketMatch.background#0a1219
  • editorBracketMatch.border#41484f
  • editorCursor.foreground#acb1b6
  • editorError.foreground#5d646a
  • editorGroup.border#131b22
  • editorGroupHeader.tabsBackground#0a1219
  • editorGroupHeader.tabsBorder#131b22
  • editorHoverWidget.statusBarBackground#0a1219
  • editorIndentGuide.activeBackground#41484f
  • editorIndentGuide.background#1c242b
  • editorInfo.foreground#5d646a
  • editorLightBulb.foreground#8d9398
  • editorLineNumber.activeForeground#464d53
  • editorLineNumber.foreground#222930
  • editorLink.activeForeground#b7bcc1
  • editorOverviewRuler.border#131b22
  • editorRuler.foreground#1c242b
  • editorSuggestWidget.foreground#61676d
  • editorSuggestWidget.highlightForeground#b7bcc1
  • editorWarning.foreground#5d646a
  • editorWhitespace.foreground#222930
  • editorWidget.background#0a1219
  • focusBorder#0a1219
  • gitDecoration.addedResourceForeground#b8bdc1
  • gitDecoration.conflictingResourceForeground#b8bdc1
  • gitDecoration.deletedResourceForeground#61676d
  • gitDecoration.ignoredResourceForeground#2e353b
  • gitDecoration.modifiedResourceForeground#b8bdc1
  • gitDecoration.submoduleResourceForeground#61676d
  • gitDecoration.untrackedResourceForeground#b8bdc1
  • icon.foreground#3d444a
  • input.background#0a1219
  • input.border#0a1219
  • input.foreground#8d9398
  • list.activeSelectionBackground#131b22
  • list.activeSelectionForeground#b7bcc1
  • list.errorForeground#ff6545
  • list.filterMatchBackground#222930
  • list.filterMatchBorder#0a1219
  • list.focusBackground#131b22
  • list.highlightForeground#959a9f
  • list.hoverBackground#0a1219
  • list.inactiveSelectionBackground#0a1219
  • list.inactiveSelectionForeground#b7bcc1
  • list.warningForeground#ffb957
  • listFilterWidget.background#0a1219
  • listFilterWidget.noMatchesOutline#ff6545
  • listFilterWidget.outline#41484f
  • menu.background#0a1219
  • menu.foreground#8d9398
  • menubar.selectionBackground#131b22
  • panel.border#131b22
  • panelTitle.activeBorder#0a1219
  • panelTitle.activeForeground#b7bcc1
  • panelTitle.inactiveForeground#41484f
  • peekView.border#3d444a
  • peekViewEditor.background#0a1219
  • peekViewEditor.matchHighlightBackground#0a1219
  • peekViewEditor.matchHighlightBorder#41484f
  • peekViewEditorGutter.background#0a1219
  • peekViewResult.background#0f171e
  • peekViewResult.fileForeground#959a9f
  • peekViewResult.lineForeground#41484f
  • peekViewResult.matchHighlightBackground#181f26
  • peekViewResult.selectionBackground#0a1219
  • peekViewResult.selectionForeground#b7bcc1
  • pickerGroup.foreground#989ea3
  • sash.hoverBorder#181f26
  • scrollbar.shadow#0a1219
  • scrollbarSlider.activeBackground#f1f5f90f
  • scrollbarSlider.background#f1f5f90f
  • scrollbarSlider.hoverBackground#f1f5f90f
  • settings.checkboxBorder#131b22
  • settings.dropdownBorder#131b22
  • settings.modifiedItemIndicator#3d444a
  • settings.textInputBorder#131b22
  • sideBar.background#0a1219
  • sideBar.border#131b22
  • sideBar.foreground#61676d
  • sideBarSectionHeader.background#0a1219
  • sideBarSectionHeader.border#131b22
  • statusBar.background#0a1219
  • statusBar.border#131b22
  • statusBar.debuggingBackground#0a1219
  • statusBar.debuggingBorder#131b22
  • statusBar.debuggingForeground#8d9398
  • statusBar.foreground#8d9398
  • statusBar.noFolderBackground#0a1219
  • statusBar.noFolderBorder#131b22
  • statusBar.noFolderForeground#8d9398
  • statusBarItem.activeBackground#0a1219
  • statusBarItem.hoverBackground#0a1219
  • symbolIcon.arrayForeground#8d9398
  • symbolIcon.booleanForeground#8d9398
  • symbolIcon.classForeground#8d9398
  • symbolIcon.colorForeground#8d9398
  • symbolIcon.constantForeground#8d9398
  • symbolIcon.constructorForeground#8d9398
  • symbolIcon.enumeratorForeground#8d9398
  • symbolIcon.enumeratorMemberForeground#8d9398
  • symbolIcon.eventForeground#8d9398
  • symbolIcon.fieldForeground#8d9398
  • symbolIcon.fileForeground#8d9398
  • symbolIcon.folderForeground#8d9398
  • symbolIcon.functionForeground#8d9398
  • symbolIcon.interfaceForeground#8d9398
  • symbolIcon.keyForeground#8d9398
  • symbolIcon.keywordForeground#8d9398
  • symbolIcon.methodForeground#8d9398
  • symbolIcon.moduleForeground#8d9398
  • symbolIcon.namespaceForeground#8d9398
  • symbolIcon.nullForeground#8d9398
  • symbolIcon.numberForeground#8d9398
  • symbolIcon.objectForeground#8d9398
  • symbolIcon.operatorForeground#8d9398
  • symbolIcon.packageForeground#8d9398
  • symbolIcon.propertyForeground#8d9398
  • symbolIcon.referenceForeground#8d9398
  • symbolIcon.snippetForeground#8d9398
  • symbolIcon.stringForeground#8d9398
  • symbolIcon.structForeground#8d9398
  • symbolIcon.textForeground#8d9398
  • symbolIcon.typeParameterForeground#8d9398
  • symbolIcon.unitForeground#8d9398
  • symbolIcon.variableForeground#8d9398
  • tab.activeForeground#b7bcc1
  • tab.border#0a1219
  • tab.inactiveBackground#0a1219
  • tab.inactiveForeground#41484f
  • terminal.ansiBlack#0a1219
  • terminal.ansiBlue#383f46
  • terminal.ansiBrightBlack#21292f
  • terminal.ansiBrightBlue#383f46
  • terminal.ansiBrightCyan#666d73
  • terminal.ansiBrightGreen#4f565c
  • terminal.ansiBrightMagenta#959a9f
  • terminal.ansiBrightRed#7e8489
  • terminal.ansiBrightWhite#f1f5f9
  • terminal.ansiBrightYellow#acb1b6
  • terminal.ansiCyan#666d73
  • terminal.ansiGreen#4f565c
  • terminal.ansiMagenta#959a9f
  • terminal.ansiRed#7e8489
  • terminal.ansiWhite#c3c8cc
  • terminal.ansiYellow#acb1b6
  • terminal.background#0a1219
  • terminal.foreground#959a9f
  • terminalCursor.background#0a1219
  • terminalCursor.foreground#acb1b6
  • textLink.activeForeground#f1f5f9
  • textLink.foreground#f1f5f9
  • textPreformat.foreground#8d9398
  • titleBar.activeBackground#0a1219
  • titleBar.activeForeground#8d9398
  • titleBar.border#131b22
  • titleBar.inactiveBackground#0a1219
  • tree.indentGuidesStroke#1c242b
  • window.activeBorder#131b22

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable.parameter.function#acb1b6
comment, punctuation.definition.comment#343b41
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.parameters, punctuation.definition.array#acb1b6
none#acb1b6
keyword.operator#acb1b6
keyword#6b7177
variable#6f767b
entity.name.function, meta.require, support.function.any-method#61676d
support.class, entity.name.class, entity.name.type.class#959a9f
meta.class#e8ecf0
keyword.other.special-method#61676d
storage#6b7177
support.function#7e8489
string, constant.other.symbol, entity.other.inherited-class#878d92
constant.numeric#8d9398
none#8d9398
none#8d9398
constant#8d9398
entity.name.tag#6f767b
entity.other.attribute-name#8d9398
entity.other.attribute-name.id, punctuation.definition.entity#61676d
meta.selector#6b7177
none#8d9398
markup.heading punctuation.definition.heading, entity.name.section#61676d
keyword.other.unit#8d9398
markup.bold, punctuation.definition.bold#959a9fbold
markup.italic, punctuation.definition.italic#6b7177italic
markup.raw.inline#878d92
string.other.link, punctuation.definition.string.end.markdown#6f767b
meta.link#8d9398
markup.list#6f767b
markup.quote#8d9398
meta.separator#acb1b6
markup.inserted#878d92
markup.deleted#6f767b
markup.changed#6b7177
constant.other.color#7e8489
string.regexp#7e8489
constant.character.escape#7e8489
punctuation.section.embedded, variable.interpolation#6b7177
invalid.illegal#e8ecf0
invalid.broken#0a1219
invalid.deprecated#e8ecf0
invalid.unimplemented#e8ecf0

Shiki preview

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

Loading...