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.italicbold 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
Codesso by vadyapan - VS Code Theme