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#1f1f1f
  • activityBar.foreground#7a7a7a
  • activityBarBadge.background#9a9a9a
  • activityBarBadge.foreground#1f1f1f
  • breadcrumb.focusForeground#7a7a7a
  • breadcrumb.foreground#434343
  • button.background#434343
  • button.foreground#DEE0EF
  • commandCenter.background#1f1f1f
  • commandCenter.foreground#7a7a7a
  • editor.background#1f1f1f
  • editor.findMatchBackground#6B6D7C4d
  • editor.findMatchHighlightBackground#6B6D7C4d
  • editor.findRangeHighlightBackground#6B6D7C4d
  • editor.findRangeHighlightBorder#0000
  • editor.focusedStackFrameHighlightBackground#6B6D7C26
  • editor.foldBackground#272938
  • editor.foreground#DEE0EF
  • editor.hoverHighlightBackground#0000
  • editor.inactiveSelectionBackground#6B6D7C14
  • editor.inlineValuesBackground#0000
  • editor.inlineValuesForeground#6B6D7C
  • editor.lineHighlightBackground#1f1f1f
  • editor.linkedEditingBackground#272938
  • editor.rangeHighlightBackground#6B6D7C14
  • editor.rangeHighlightBorder#0000
  • editor.selectionBackground#73402a4d
  • editor.selectionHighlight#000
  • editor.selectionHighlightBackground#6B6D7C26
  • editor.selectionHighlightBorder#0000
  • editor.snippetFinalTabstopHighlightBackground#6B6D7C26
  • editor.snippetFinalTabstopHighlightBorder#272938
  • editor.snippetTabstopHighlightBackground#6B6D7C26
  • editor.snippetTabstopHighlightBorder#272938
  • editor.stackFrameHighlightBackground#6B6D7C26
  • editor.symbolHighlightBackground#6B6D7C26
  • editor.symbolHighlightBorder#0000
  • editor.wordHighlightBackground#6B6D7C26
  • editor.wordHighlightBorder#0000
  • editor.wordHighlightStrongBackground#6B6D7C26
  • editor.wordHighlightStrongBorder#6B6D7C26
  • editorBracketHighlight.foreground1#D1918FBA
  • editorBracketHighlight.foreground2#709BBDBA
  • editorBracketHighlight.foreground3#A392DCBA
  • editorBracketHighlight.foreground4#A0B6E8BA
  • editorBracketHighlight.foreground5#D6B4B4BF
  • editorBracketHighlight.foreground6#AAC9D4B8
  • editorBracketMatch.background#0000
  • editorBracketMatch.border#444444
  • editorBracketPairGuide.activeBackground1#709BBD
  • editorBracketPairGuide.activeBackground2#D6B4B4
  • editorBracketPairGuide.activeBackground3#AAC9D4
  • editorBracketPairGuide.activeBackground4#A0B6E8
  • editorBracketPairGuide.activeBackground5#A392DC
  • editorBracketPairGuide.activeBackground6#D1918F
  • editorBracketPairGuide.background1#709BBD80
  • editorBracketPairGuide.background2#D6B4B480
  • editorBracketPairGuide.background3#AAC9D480
  • editorBracketPairGuide.background4#A0B6E880
  • editorBracketPairGuide.background5#A392DC80
  • editorBracketPairGuide.background6#D1918F80
  • editorCodeLens.foreground#D6B4B4
  • editorCursor.foreground#DEE0EF
  • editorError.border#0000
  • editorError.foreground#D1918F
  • editorGroup.border#0000
  • editorGroup.dropBackground#272938
  • editorGroup.emptyBackground#0000
  • editorGroup.focusedEmptyBorder#0000
  • editorGroupHeader.noTabsBackground#0000
  • editorGroupHeader.tabsBackground#1f1f1f
  • editorGutter.addedBackground#A0B6E880
  • editorGutter.background#0000
  • editorGutter.deletedBackground#D1918F80
  • editorGutter.foldingControlForeground#AAC9D480
  • editorGutter.modifiedBackground#D6B4B480
  • editorHint.border#0000
  • editorIndentGuide.activeBackground#444444
  • editorIndentGuide.background#292929
  • editorInfo.foreground#A0B6E8
  • editorLightBulb.foreground#709BBD
  • editorLightBulbAutoFix.foreground#D6B4B4
  • editorLineNumber.foreground#434343
  • editorLink.activeForeground#D6B4B4
  • editorPane.background#0000
  • editorSuggestWidget.background#1f1f1f
  • editorSuggestWidget.border#434343
  • editorSuggestWidget.foreground#bdbdbd
  • editorSuggestWidget.selectedBackground#282828
  • editorWarning.border#0000
  • editorWarning.foreground#D6B4B4
  • editorWhitespace.foreground#0000
  • errorForeground#D1918F
  • focusBorder#00000000
  • gitDecoration.addedResourceForeground#A0B6E8
  • gitDecoration.conflictingResourceForeground#D1918F
  • gitDecoration.deletedResourceForeground#6B6D7C
  • gitDecoration.ignoredResourceForeground#8D8F9E
  • gitDecoration.modifiedResourceForeground#D6B4B4
  • gitDecoration.renamedResourceForeground#709BBD
  • gitDecoration.stageDeletedResourceForeground#D1918F
  • gitDecoration.stageModifiedResourceForeground#AAC9D4
  • gitDecoration.submoduleResourceForeground#A392DC
  • gitDecoration.untrackedResourceForeground#A392DC
  • list.activeSelectionBackground#2a2d2e
  • list.activeSelectionForeground#DEE0EF
  • list.highlightForeground#d5d5d5
  • list.hoverForeground#DEE0EF
  • list.inactiveSelectionBackground#2a2d2e
  • list.inactiveSelectionForeground#DEE0EF
  • panelTitle.activeBorder#1f1f1f
  • peekView.border#7a7a7a
  • peekViewEditor.background#1f1f1f
  • peekViewEditor.matchHighlightBackground#D1918F80
  • sash.hoverBorder#434343
  • selection.background#2a735d4d
  • sideBar.background#1f1f1f
  • sideBarSectionHeader.background#1f1f1f
  • sideBarSectionHeader.foreground#DEE0EF
  • statusBar.background#1f1f1f
  • statusBar.debuggingBackground#1f1f1f
  • statusBar.debuggingBorder#A392DC
  • statusBar.debuggingForeground#7a7a7a
  • statusBar.foreground#7a7a7a
  • statusBar.noFolderBackground#1f1f1f
  • statusBarItem.prominentBackground#1f1f1f
  • statusBarItem.remoteBackground#1f1f1f
  • statusBarItem.remoteForeground#7a7a7a
  • symbolIcon.arrayForeground#d5d5d5
  • symbolIcon.booleanForeground#d5d5d5
  • symbolIcon.classForeground#d5d5d5
  • symbolIcon.colorForeground#d5d5d5
  • symbolIcon.constantForeground#d5d5d5
  • symbolIcon.constructorForeground#d5d5d5
  • symbolIcon.enumeratorForeground#d5d5d5
  • symbolIcon.enumeratorMemberForeground#d5d5d5
  • symbolIcon.eventForeground#d5d5d5
  • symbolIcon.fieldForeground#d5d5d5
  • symbolIcon.fileForeground#d5d5d5
  • symbolIcon.folderForeground#d5d5d5
  • symbolIcon.functionForeground#d5d5d5
  • symbolIcon.interfaceForeground#d5d5d5
  • symbolIcon.keyForeground#d5d5d5
  • symbolIcon.keywordForeground#d5d5d5
  • symbolIcon.methodForeground#d5d5d5
  • symbolIcon.moduleForeground#d5d5d5
  • symbolIcon.namespaceForeground#d5d5d5
  • symbolIcon.nullForeground#d5d5d5
  • symbolIcon.numberForeground#d5d5d5
  • symbolIcon.objectForeground#d5d5d5
  • symbolIcon.operatorForeground#d5d5d5
  • symbolIcon.packageForeground#d5d5d5
  • symbolIcon.propertyForeground#d5d5d5
  • symbolIcon.referenceForeground#d5d5d5
  • symbolIcon.snippetForeground#d5d5d5
  • symbolIcon.stringForeground#d5d5d5
  • symbolIcon.structForeground#d5d5d5
  • symbolIcon.textForeground#d5d5d5
  • symbolIcon.typeParameterForeground#d5d5d5
  • symbolIcon.unitForeground#d5d5d5
  • symbolIcon.variableForeground#d5d5d5
  • tab.activeBorder#AAC9D4
  • tab.activeForeground#DEE0EF
  • tab.hoverBackground#313232
  • tab.hoverForeground#DEE0EF
  • tab.inactiveBackground#1f1f1f
  • textLink.activeForeground#AAC9D4
  • textLink.foreground#AAC9D4
  • titleBar.activeBackground#1f1f1f
  • titleBar.activeForeground#7a7a7a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, string.quoted.docstring.multi.python#ffffff30italic
string, constant.other.symbol#9e81c9—
string.regexp, constant.character, constant.other#95E6CB—
constant.numeric, string.quoted.single#d88e68—
constant.language#d88e68—
variable#acb9d9—
variable.member#F28779—
variable.language#78A9FF—
storage#9e81c9—
keyword#9e81c9—
keyword.operator, string.quoted.single#d88e68—
punctuation.separator, punctuation.terminator#acb9d9—
punctuation.section#acb9d9—
punctuation.accessor#d88e68—
source.java storage.type, source.haskell storage.type, source.c storage.type#73D0FF—
entity.other.inherited-class#78A9FF—
storage.type.function#9e81c9—
source.java storage.type.primitive#78A9FF—
entity.name.function#86c8c8—
variable.parameter, meta.parameter#D4BFFF—
variable.function, variable.annotation, meta.function-call.generic, support.function.go#86c8c8—
support.function, support.macro#F28779—
entity.name.import, entity.name.package#9e81c9—
entity.name, storage.type.js, keyword.control.import.tsx#73D0FF—
entity.name.tag, meta.tag.sgml#78A9FF—
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#78A9FF80—
entity.other.attribute-name#86c8c8—
support.constant#d88e68—
support.type, support.class, source.go storage.type#78A9FF—
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation#FFE6B3—
invalid#FF3333—
meta.diff, meta.diff.header#C594C5—
source.ruby variable.other.readwrite#86c8c8—
source.css entity.name.tag, source.sass entity.name.tag, source.scss entity.name.tag, source.less entity.name.tag, source.stylus entity.name.tag#73D0FF—
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type#5C6773—
support.type.property-name#78A9FF—
constant.numeric.line-number.find-in-files - match#5C6773—
constant.numeric.line-number.match#9e81c9—
entity.name.filename.find-in-files#9e81c9—
message.error#FF3333—
markup.heading, markup.heading entity.name#9e81c9bold
markup.underline.link, string.other.link#78A9FF—
markup.italic#F28779italic
markup.bold#F28779bold
markup.italic markup.bold, markup.bold markup.italic—bold italic
meta.separator#5C6773bold
markup.quote#95E6CBitalic
markup.list punctuation.definition.list.begin#86c8c8—
markup.inserted#A6CC70—
markup.changed#77A8D9—
markup.deleted#F27983—
markup.strike#FFE6B3—
markup.table#78A9FF—
text.html.markdown markup.inline.raw#d88e68—
text.html.markdown meta.dummy.line-break#5C6773—
punctuation.definition.markdown#5C6773—
token.info-token#6796E6—
token.warn-token#CD9731—
token.error-token#F44747—
token.debug-token#B267E6—