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#101010
  • activityBar.background#101010
  • activityBar.border#191919
  • activityBar.foreground#b4b4b4
  • activityBar.inactiveForeground#555555
  • activityBarBadge.background#626262
  • badge.background#262626
  • badge.foreground#b4b4b4
  • button.background#252525
  • button.hoverBackground#2b2b2b
  • checkbox.border#191919
  • dart.closingLabels#212121
  • debugIcon.breakpointCurrentStackframeForeground#8d8d8d
  • debugIcon.breakpointDisabledForeground#8d8d8d
  • debugIcon.breakpointForeground#8d8d8d
  • debugIcon.breakpointStackframeForeground#8d8d8d
  • debugIcon.breakpointUnverifiedForeground#8d8d8d
  • debugIcon.continueForeground#8d8d8d
  • debugIcon.disconnectForeground#8d8d8d
  • debugIcon.pauseForeground#8d8d8d
  • debugIcon.restartForeground#8d8d8d
  • debugIcon.startForeground#8d8d8d
  • debugIcon.stepBackForeground#8d8d8d
  • debugIcon.stepIntoForeground#8d8d8d
  • debugIcon.stepOutForeground#8d8d8d
  • debugIcon.stepOverForeground#8d8d8d
  • debugIcon.stopForeground#8d8d8d
  • debugToolBar.background#101010
  • diffEditor.border#303030
  • diffEditor.diagonalFill#FFFFFF12
  • diffEditor.insertedLineBackground#A9DC761A
  • diffEditor.insertedTextBackground#A9DC762A
  • diffEditor.insertedTextBorder#00000000
  • diffEditor.move.border#00000000
  • diffEditor.moveActive.border#00000000
  • diffEditor.removedLineBackground#FF61881A
  • diffEditor.removedTextBackground#FF61882A
  • diffEditor.removedTextBorder#00000000
  • diffEditor.unchangedCodeBackground#FFFFFF0A
  • diffEditor.unchangedRegionBackground#101010
  • diffEditor.unchangedRegionForeground#888888
  • diffEditorGutter.insertedLineBackground#A9DC7655
  • diffEditorGutter.removedLineBackground#FF618855
  • diffEditorOverview.insertedForeground#A9DC76CC
  • diffEditorOverview.removedForeground#FF6188CC
  • dropdown.background#101010
  • dropdown.foreground#8d8d8d
  • editor.background#101010
  • editor.findMatchBackground#101010
  • editor.findMatchBorder#7e7e7e
  • editor.findMatchHighlightBackground#101010
  • editor.findMatchHighlightBorder#444444
  • editor.foldBackground#101010
  • editor.foreground#aaaaaa
  • editor.hoverHighlightBackground#1d1d1d
  • editor.lineHighlightBackground#151515
  • editor.selectionBackground#1d1d1d
  • editor.selectionHighlightBackground#19191950
  • editor.wordHighlightBackground#22222266
  • editor.wordHighlightStrongBackground#383838AA
  • editorBracketHighlight.foreground1#77dce8
  • editorBracketHighlight.foreground2#fd9867
  • editorBracketHighlight.foreground3#ff6188
  • editorBracketHighlight.foreground4#a9dc76
  • editorBracketHighlight.foreground5#ac9df2
  • editorBracketHighlight.foreground6#ffd866
  • editorBracketMatch.background#101010
  • editorBracketMatch.border#444444
  • editorCursor.foreground#aaaaaa
  • editorError.foreground#ff6188
  • editorGroup.border#191919
  • editorGroupHeader.tabsBackground#101010
  • editorGroupHeader.tabsBorder#191919
  • editorHoverWidget.statusBarBackground#101010
  • editorIndentGuide.activeBackground#454545
  • editorIndentGuide.background#222222
  • editorInfo.foreground#77dce8
  • editorLightBulb.foreground#8d8d8d
  • editorLineNumber.activeForeground#494949
  • editorLineNumber.foreground#262626
  • editorLink.activeForeground#b4b4b4
  • editorOverviewRuler.border#191919
  • editorRuler.foreground#222222
  • editorSuggestWidget.foreground#626262
  • editorSuggestWidget.highlightForeground#b4b4b4
  • editorWarning.foreground#ffd866
  • editorWhitespace.foreground#262626
  • editorWidget.background#101010
  • focusBorder#333333
  • gitDecoration.addedResourceForeground#b5b5b5
  • gitDecoration.conflictingResourceForeground#b5b5b5
  • gitDecoration.deletedResourceForeground#626262
  • gitDecoration.ignoredResourceForeground#393939
  • gitDecoration.modifiedResourceForeground#b5b5b5
  • gitDecoration.submoduleResourceForeground#626262
  • gitDecoration.untrackedResourceForeground#b5b5b5
  • icon.foreground#555555
  • inlineChatDiff.inserted#A9DC7633
  • inlineChatDiff.removed#FF618833
  • input.background#101010
  • input.border#191919
  • input.foreground#8d8d8d
  • list.activeSelectionBackground#191919
  • list.activeSelectionForeground#b4b4b4
  • list.errorForeground#ff6188
  • list.filterMatchBackground#262626
  • list.filterMatchBorder#101010
  • list.focusBackground#191919
  • list.highlightForeground#939393
  • list.hoverBackground#101010
  • list.inactiveSelectionBackground#101010
  • list.inactiveSelectionForeground#b4b4b4
  • list.warningForeground#ffd866
  • listFilterWidget.background#101010
  • listFilterWidget.noMatchesOutline#ff6188
  • listFilterWidget.outline#333333
  • menu.background#101010
  • menu.foreground#8d8d8d
  • menubar.selectionBackground#191919
  • multiDiffEditor.background#141414
  • multiDiffEditor.border#303030
  • multiDiffEditor.headerBackground#181818
  • panel.border#191919
  • panelTitle.activeBorder#101010
  • panelTitle.activeForeground#b4b4b4
  • panelTitle.inactiveForeground#555555
  • peekView.border#191919
  • peekViewEditor.background#101010
  • peekViewEditor.matchHighlightBackground#101010
  • peekViewEditor.matchHighlightBorder#444444
  • peekViewEditorGutter.background#101010
  • peekViewResult.background#151515
  • peekViewResult.fileForeground#939393
  • peekViewResult.lineForeground#666666
  • peekViewResult.matchHighlightBackground#1d1d1d
  • peekViewResult.selectionBackground#101010
  • peekViewResult.selectionForeground#b4b4b4
  • pickerGroup.foreground#979797
  • sash.hoverBorder#333333
  • scrollbar.shadow#101010
  • scrollbarSlider.activeBackground#ebebeb1A
  • scrollbarSlider.background#ebebeb1A
  • scrollbarSlider.hoverBackground#ebebeb1A
  • settings.checkboxBorder#191919
  • settings.dropdownBorder#191919
  • settings.modifiedItemIndicator#555555
  • settings.textInputBorder#191919
  • sideBar.background#101010
  • sideBar.border#191919
  • sideBar.foreground#626262
  • sideBarSectionHeader.background#101010
  • sideBarSectionHeader.border#191919
  • statusBar.background#101010
  • statusBar.border#191919
  • statusBar.debuggingBackground#101010
  • statusBar.debuggingBorder#191919
  • statusBar.debuggingForeground#8d8d8d
  • statusBar.foreground#8d8d8d
  • statusBar.noFolderBackground#101010
  • statusBar.noFolderBorder#191919
  • statusBar.noFolderForeground#8d8d8d
  • statusBarItem.activeBackground#101010
  • statusBarItem.hoverBackground#101010
  • symbolIcon.arrayForeground#8d8d8d
  • symbolIcon.booleanForeground#8d8d8d
  • symbolIcon.classForeground#8d8d8d
  • symbolIcon.colorForeground#8d8d8d
  • symbolIcon.constantForeground#8d8d8d
  • symbolIcon.constructorForeground#8d8d8d
  • symbolIcon.enumeratorForeground#8d8d8d
  • symbolIcon.enumeratorMemberForeground#8d8d8d
  • symbolIcon.eventForeground#8d8d8d
  • symbolIcon.fieldForeground#8d8d8d
  • symbolIcon.fileForeground#8d8d8d
  • symbolIcon.folderForeground#8d8d8d
  • symbolIcon.functionForeground#8d8d8d
  • symbolIcon.interfaceForeground#8d8d8d
  • symbolIcon.keyForeground#8d8d8d
  • symbolIcon.keywordForeground#8d8d8d
  • symbolIcon.methodForeground#8d8d8d
  • symbolIcon.moduleForeground#8d8d8d
  • symbolIcon.namespaceForeground#8d8d8d
  • symbolIcon.nullForeground#8d8d8d
  • symbolIcon.numberForeground#8d8d8d
  • symbolIcon.objectForeground#8d8d8d
  • symbolIcon.operatorForeground#8d8d8d
  • symbolIcon.packageForeground#8d8d8d
  • symbolIcon.propertyForeground#8d8d8d
  • symbolIcon.referenceForeground#8d8d8d
  • symbolIcon.snippetForeground#8d8d8d
  • symbolIcon.stringForeground#8d8d8d
  • symbolIcon.structForeground#8d8d8d
  • symbolIcon.textForeground#8d8d8d
  • symbolIcon.typeParameterForeground#8d8d8d
  • symbolIcon.unitForeground#8d8d8d
  • symbolIcon.variableForeground#8d8d8d
  • tab.activeForeground#b4b4b4
  • tab.border#101010
  • tab.inactiveBackground#101010
  • tab.inactiveForeground#555555
  • terminal.ansiBlack#101010
  • terminal.ansiBlue#3c3c3c
  • terminal.ansiBrightBlack#444444
  • terminal.ansiBrightBlue#3c3c3c
  • terminal.ansiBrightCyan#686868
  • terminal.ansiBrightGreen#525252
  • terminal.ansiBrightMagenta#939393
  • terminal.ansiBrightRed#7e7e7e
  • terminal.ansiBrightWhite#ebebeb
  • terminal.ansiBrightYellow#a9a9a9
  • terminal.ansiCyan#686868
  • terminal.ansiGreen#525252
  • terminal.ansiMagenta#939393
  • terminal.ansiRed#7e7e7e
  • terminal.ansiWhite#bfbfbf
  • terminal.ansiYellow#a9a9a9
  • terminal.background#101010
  • terminal.foreground#939393
  • terminalCursor.background#101010
  • terminalCursor.foreground#aaaaaa
  • textLink.activeForeground#ebebeb
  • textLink.foreground#ebebeb
  • textPreformat.foreground#8d8d8d
  • titleBar.activeBackground#101010
  • titleBar.activeForeground#8d8d8d
  • titleBar.border#191919
  • titleBar.inactiveBackground#101010
  • tree.indentGuidesStroke#212121
  • window.activeBorder#191919

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable.parameter.function#aaaaaaitalic
comment, punctuation.definition.comment#383838
punctuation.definition.string, punctuation.definition.variable, punctuation.definition.parameters, punctuation.definition.array#aaaaaa
none#aaaaaa
keyword.operator#aaaaaa
keyword#6c6c6cbold
variable#707070
entity.name.function, meta.require, support.function.any-method#626262bold
support.class, entity.name.class, entity.name.type.class#939393bold
meta.class#e2e2e2bold
keyword.other.special-method#626262bold
storage#6c6c6cbold
support.function#7e7e7ebold
storage.type#8d8d8dbold italic
storage.modifier, storage.type.modifier#8d8d8dbold italic
entity.other.inherited-class#878787italic
variable.language#aaaaaaitalic
string, constant.other.symbol#878787
constant.numeric#8d8d8d
none#8d8d8d
none#8d8d8d
constant#8d8d8d
entity.name.tag#707070bold
entity.other.attribute-name#8d8d8d
entity.other.attribute-name.id, punctuation.definition.entity#626262
meta.selector#6c6c6c
none#8d8d8d
markup.heading punctuation.definition.heading, entity.name.section#626262bold
keyword.other.unit#8d8d8d
markup.bold, punctuation.definition.bold#939393bold
comment markup.bold#939393bold italic
markup.italic, punctuation.definition.italic#6c6c6citalic
comment markup.underline#8d8d8dunderline italic
markup.underline#8d8d8dunderline
storage.type.class.jsdoc#8d8d8ditalic underline
variable.parameter.js#aaaaaaitalic
markup.quote#8d8d8ditalic
markup.raw.inline#878787
variable.parameter.function#aaaaaaitalic
meta.link#8d8d8d
markup.list#707070
meta.separator#aaaaaa
markup.inserted#878787
markup.deleted#707070
markup.changed#6c6c6c
entity.other.attribute-name#8d8d8ditalic
string.regexp#7e7e7e
constant.character.escape#7e7e7e
punctuation.section.embedded, variable.interpolation#6c6c6c
invalid.illegal#e2e2e2bold italic underline
invalid.broken#101010
invalid.deprecated#e2e2e2italic underline
invalid.unimplemented#e2e2e2