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#181818
  • activityBar.foreground#E8E8E8
  • activityBar.inactiveForeground#ffffff66
  • activityBarBadge.background#383838
  • activityBarBadge.foreground#E8E8E8
  • badge.background#383838
  • badge.foreground#c1c1c1
  • breadcrumb.activeSelectionForeground#e0e0e0
  • breadcrumb.background#181818
  • breadcrumb.focusForeground#e0e0e0
  • breadcrumb.foreground#cccccccc
  • button.background#333333
  • button.foreground#E8E8E8
  • button.hoverBackground#262626
  • button.secondaryBackground#3a3d41
  • button.secondaryForeground#E8E8E8
  • button.secondaryHoverBackground#45494e
  • checkbox.background#2a2a2a
  • checkbox.border#00000000
  • checkbox.foreground#e0e0e0
  • debugExceptionWidget.background#252526
  • debugExceptionWidget.border#474747
  • debugIcon.breakpointCurrentStackframeForeground#9AA8D8
  • debugIcon.breakpointDisabledForeground#848484
  • debugIcon.breakpointForeground#C88A90
  • debugIcon.breakpointStackframeForeground#9AA8D8
  • debugIcon.breakpointUnverifiedForeground#848484
  • debugIcon.continueForeground#C88A90
  • debugIcon.disconnectForeground#C88A90
  • debugIcon.pauseForeground#C88A90
  • debugIcon.restartForeground#9AA8D8
  • debugIcon.startForeground#9AA8D8
  • debugIcon.stepBackForeground#C88A90
  • debugIcon.stepIntoForeground#C88A90
  • debugIcon.stepOutForeground#C88A90
  • debugIcon.stepOverForeground#C88A90
  • debugIcon.stopForeground#9AA8D8
  • debugToolBar.background#181818
  • debugToolBar.border#474747
  • diffEditor.border#444444
  • diffEditor.insertedLineBackground#8CC8B880
  • diffEditor.insertedTextBackground#8CC8B84D
  • diffEditor.removedLineBackground#E8B89A80
  • diffEditor.removedTextBackground#C88A9052
  • dropdown.background#2a2a2a
  • dropdown.border#00000000
  • dropdown.foreground#e0e0e0
  • editor.background#181818
  • editor.findMatchBackground#5F6B7A
  • editor.findMatchBorder#8E9FB5
  • editor.findMatchHighlightBackground#D89A7080
  • editor.findMatchHighlightBorder#ffffff00
  • editor.findRangeHighlightBackground#3a3d4166
  • editor.findRangeHighlightBorder#ffffff00
  • editor.foldBackground#264f784d
  • editor.foreground#E8E8E8
  • editor.hoverHighlightBackground#4A6B8E40
  • editor.inactiveSelectionBackground#363636
  • editor.lineHighlightBackground#181818
  • editor.lineHighlightBorder#181818
  • editor.rangeHighlightBackground#ffffff0b
  • editor.rangeHighlightBorder#ffffff00
  • editor.selectionBackground#4A6B8E
  • editor.selectionHighlightBackground#9AA8D840
  • editor.selectionHighlightBorder#6B829F
  • editor.wordHighlightBackground#575757b8
  • editor.wordHighlightStrongBackground#5F829FB8
  • editorBracketHighlight.foreground1#878787
  • editorBracketHighlight.foreground2#878787
  • editorBracketHighlight.foreground3#878787
  • editorBracketHighlight.foreground4#878787
  • editorBracketHighlight.foreground5#878787
  • editorBracketHighlight.foreground6#878787
  • editorBracketHighlight.unexpectedBracket.foreground#C88E8A
  • editorBracketMatch.background#0064001a
  • editorBracketMatch.border#888888
  • editorCodeLens.foreground#999999
  • editorCursor.background#181818
  • editorCursor.foreground#E8E8E8
  • editorError.background#B73A3400
  • editorError.border#ffffff00
  • editorError.foreground#C88A90
  • editorGroup.border#444444
  • editorGroup.emptyBackground#181818
  • editorGroupHeader.tabsBackground#181818
  • editorGroupHeader.tabsBorder#181818
  • editorGutter.addedBackground#E8E8E8
  • editorGutter.background#181818
  • editorGutter.commentRangeForeground#c5c5c5
  • editorGutter.deletedBackground#E8E8E8
  • editorGutter.foldingControlForeground#c5c5c5
  • editorGutter.modifiedBackground#E8E8E8
  • editorHoverWidget.background#181818
  • editorHoverWidget.border#454545
  • editorHoverWidget.foreground#cccccc
  • editorIndentGuide.activeBackground#383838
  • editorIndentGuide.background#2a2a2a
  • editorInfo.background#4490BF00
  • editorInfo.border#4490BF00
  • editorInfo.foreground#9AA8D8
  • editorLineNumber.activeForeground#E8E8E8
  • editorLineNumber.foreground#727272
  • editorLink.activeForeground#7DA8D8
  • editorMarkerNavigation.background#181818
  • editorMarkerNavigationError.background#C88A90
  • editorMarkerNavigationInfo.background#9AA8D8
  • editorMarkerNavigationWarning.background#D8B470
  • editorOverviewRuler.background#25252500
  • editorOverviewRuler.border#7f7f7f4d
  • editorRuler.foreground#181818
  • editorSuggestWidget.background#181818
  • editorSuggestWidget.border#454545
  • editorSuggestWidget.foreground#E8E8E8
  • editorSuggestWidget.highlightForeground#E8E8E8
  • editorSuggestWidget.selectedBackground#3c3c3c99
  • editorWarning.background#A9904000
  • editorWarning.border#ffffff00
  • editorWarning.foreground#E8B89A
  • editorWhitespace.foreground#E8E8E840
  • editorWidget.background#181818
  • editorWidget.foreground#cccccc
  • editorWidget.resizeBorder#5F5F5F
  • focusBorder#444444
  • foreground#E8E8E8
  • gitDecoration.addedResourceForeground#E8E8E8
  • gitDecoration.conflictingResourceForeground#E8E8E8
  • gitDecoration.deletedResourceForeground#E8E8E8
  • gitDecoration.ignoredResourceForeground#E8E8E8
  • gitDecoration.modifiedResourceForeground#E8E8E8
  • gitDecoration.stageDeletedResourceForeground#E8E8E8
  • gitDecoration.stageModifiedResourceForeground#E8E8E8
  • gitDecoration.submoduleResourceForeground#E8E8E8
  • gitDecoration.untrackedResourceForeground#E8E8E8
  • icon.foreground#E8E8E8
  • input.background#181818
  • input.border#3c3c3c
  • input.foreground#e0e0e0
  • input.placeholderForeground#808080
  • inputOption.activeBackground#3a3a3a
  • inputOption.activeBorder#007acc00
  • inputOption.activeForeground#E8E8E8
  • list.activeSelectionBackground#212121
  • list.activeSelectionForeground#E8E8E8
  • list.dropBackground#383b3d
  • list.focusBackground#292929
  • list.focusForeground#cccccc
  • list.highlightForeground#E8E8E8
  • list.hoverBackground#262626
  • list.hoverForeground#9e9e9e
  • list.inactiveSelectionBackground#212121
  • list.inactiveSelectionForeground#E8E8E8
  • listFilterWidget.background#181818
  • listFilterWidget.noMatchesOutline#cccccc
  • listFilterWidget.outline#00000000
  • menu.background#181818
  • menu.border#00000085
  • menu.foreground#cccccc
  • menu.selectionBackground#3c3c3c99
  • menu.selectionBorder#00000000
  • menu.selectionForeground#E8E8E8
  • menu.separatorBackground#bbbbbb
  • menubar.selectionBackground#ffffff1a
  • menubar.selectionForeground#cccccc
  • merge.commonContentBackground#252525
  • merge.commonHeaderBackground#363636
  • merge.currentContentBackground#3F6B5A
  • merge.currentHeaderBackground#5F8C7A
  • merge.incomingContentBackground#4A5F7A
  • merge.incomingHeaderBackground#6B829F
  • minimap.background#181818
  • minimap.errorHighlight#C88A90
  • minimap.findMatchHighlight#5F6B7A
  • minimap.selectionHighlight#4A6B8E
  • minimap.warningHighlight#D8B470
  • minimapGutter.addedBackground#8CC8B8
  • minimapGutter.deletedBackground#C88E8A
  • minimapGutter.modifiedBackground#E8B89A
  • notificationCenter.border#474747
  • notificationCenterHeader.background#303031
  • notificationCenterHeader.foreground#cccccc
  • notifications.background#181818
  • notifications.border#303031
  • notifications.foreground#cccccc
  • notificationsErrorIcon.foreground#E8E8E8
  • notificationsInfoIcon.foreground#E8E8E8
  • notificationsWarningIcon.foreground#E8E8E8
  • notificationToast.border#474747
  • panel.background#181818
  • panel.border#80808059
  • panelSection.border#80808059
  • panelTitle.activeBorder#181818
  • panelTitle.activeForeground#E8E8E8
  • panelTitle.inactiveForeground#484848
  • peekView.border#444444
  • peekViewEditor.background#181818
  • peekViewEditor.matchHighlightBackground#D89A7080
  • peekViewEditor.matchHighlightBorder#C88E60
  • peekViewEditorGutter.background#1F2F4A
  • peekViewResult.background#181818
  • peekViewResult.fileForeground#E8E8E8
  • peekViewResult.lineForeground#bbbbbb
  • peekViewResult.matchHighlightBackground#D89A7080
  • peekViewResult.selectionBackground#9AA8D840
  • peekViewResult.selectionForeground#E8E8E8
  • peekViewTitle.background#181818
  • peekViewTitleDescription.foreground#ccccccb3
  • peekViewTitleLabel.foreground#E8E8E8
  • pickerGroup.border#363636
  • pickerGroup.foreground#E8E8E8
  • progressBar.background#E8E8E8
  • scrollbar.shadow#181818
  • scrollbarSlider.activeBackground#bfbfbf66
  • scrollbarSlider.background#79797966
  • scrollbarSlider.hoverBackground#646464b3
  • selection.background#3c3c3c99
  • settings.focusedRowBackground#ffffff07
  • settings.headerForeground#E8E8E8
  • settings.modifiedItemIndicator#E8B89A
  • sideBar.background#181818
  • sideBar.dropBackground#383b3d
  • sideBar.foreground#cccccc
  • sideBarSectionHeader.background#181818
  • sideBarSectionHeader.border#181818
  • sideBarSectionHeader.foreground#cccccc
  • sideBarTitle.foreground#bbbbbb
  • statusBar.background#181818
  • statusBar.debuggingBackground#181818
  • statusBar.debuggingForeground#E8E8E8
  • statusBar.foreground#7e7e7e
  • statusBar.noFolderBackground#181818
  • statusBar.noFolderForeground#E8E8E8
  • statusBarItem.activeBackground#FFFFFF25
  • statusBarItem.hoverBackground#ffffff1f
  • statusBarItem.remoteBackground#181818
  • statusBarItem.remoteForeground#E8E8E8
  • tab.activeBackground#181818
  • tab.activeBorder#363636
  • tab.activeBorderTop#00000000
  • tab.activeForeground#E8E8E8
  • tab.border#181818
  • tab.inactiveBackground#181818
  • tab.inactiveForeground#727272
  • terminal.ansiBlack#101010
  • terminal.ansiBlue#E8B89A
  • terminal.ansiBrightBlack#101010
  • terminal.ansiBrightBlue#E8B89A
  • terminal.ansiBrightCyan#8CC8B8
  • terminal.ansiBrightGreen#8CC8B8
  • terminal.ansiBrightMagenta#A68EA8
  • terminal.ansiBrightRed#C88E8A
  • terminal.ansiBrightWhite#F0F0E8
  • terminal.ansiBrightYellow#E8B89A
  • terminal.ansiCyan#8CC8B8
  • terminal.ansiGreen#8CC8B8
  • terminal.ansiMagenta#A68EA8
  • terminal.ansiRed#C88E8A
  • terminal.ansiWhite#D8D8D0
  • terminal.ansiYellow#E8B89A
  • terminal.border#80808059
  • terminal.foreground#E8E8E8
  • terminal.selectionBackground#ffffff40
  • terminalCursor.background#E8B89A
  • terminalCursor.foreground#E8E8E8
  • textLink.activeForeground#E8B89A
  • textLink.foreground#E8E8E8
  • titleBar.activeBackground#181818
  • titleBar.activeForeground#cccccc
  • titleBar.border#00000000
  • titleBar.inactiveBackground#181818
  • titleBar.inactiveForeground#cccccc
  • tree.indentGuidesStroke#585858
  • walkThrough.embeddedEditorBackground#00000050
  • widget.shadow#181818

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6B6B6B
variable, string constant.other.placeholder, entity.name.tag#E8E8E8
constant.other.color#E8E8E8
invalid, invalid.illegal#D98878
keyword, storage.modifier#A68EA8
keyword.control, constant.other.color, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.rust, keyword.other.fn.rust, keyword.other.substitution, storage.type#A68EA8
keyword.other.import.java#A68EA8
storage.modifier.import.java#E8E8E8
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#E8B89A
entity.name.function, variable.function, support.function, keyword.other.special-method#E8B89A
meta.block variable.other#E8E8E8
support.other.variable, string.other.link#E8E8E8
constant.numeric, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other, constant.language.boolean#E8B89A
string, constant.other.symbol, constant.other.key, keyword.other.fn.rust, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#8CC8B8
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#E8B89A
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name, source.postcss support.type.property-name, support.type.vendored.property-name.css, source.css.scss entity.name.tag, variable.parameter.keyframe-list.css, meta.property-name.css, variable.parameter.url.scss, meta.property-value.scss, meta.property-value.css#E8E8E8
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#D98878
variable.other.constant#8CC8B8
variable.language#E8E8E8
entity.name.method.js#E8E8E8
meta.class-method.js entity.name.function.js, variable.function.constructor#E8E8E8
entity.other.attribute-name, meta.property-list.scss, meta.attribute-selector.scss, meta.property-value.css, entity.other.keyframe-offset.css, meta.selector.css, entity.name.tag.reference.scss, entity.name.tag.nesting.css, punctuation.separator.key-value.css#E8E8E8
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#E8B89A
entity.other.attribute-name.class, entity.other.attribute-name.id, meta.attribute-selector.scss, variable.parameter.misc.css#E8B89A
source.sass keyword.control, meta.attribute-selector.scss#8CC8B8
markup.inserted#8CC8B8
markup.deleted#D98878
markup.changed#878787
string.regexp#878787
constant.character.escape#878787
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#E8E8E8
source.js constant.other.object.key.js string.unquoted.label.js#D98878italic
source.json meta.structure.dictionary.json support.type.property-name.json#E8B89A
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#E8B89A
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#E8B89A
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#E8B89A
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#E8B89A
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#E8B89A
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#E8B89A
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#E8B89A
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#E8B89A
text.html.markdown, punctuation.definition.list_item.markdown#E8E8E8
text.html.markdown markup.inline.raw.markdown#878787
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#E8E8E8
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, markup.heading, markup.inserted.git_gutter#E8B89A
markup.italic#E8E8E8italic
markup.bold, markup.bold string#E8E8E8bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#E8E8E8bold
markup.underline#E8B89Aunderline
markup.quote punctuation.definition.blockquote.markdown#E8E8E8
markup.quote#8CC8B8
string.other.link.title.markdown#E8E8E8
string.other.link.description.title.markdown#878787
constant.other.reference.link.markdown#E8B89A
markup.raw.block#878787
markup.raw.block.fenced.markdown#18181880
punctuation.definition.fenced.markdown#18181880
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#E8E8E8
variable.language.fenced.markdown#E8E8E8
meta.separator#7DAF9Fbold
markup.table#E8E8E8

Shiki preview

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

Loading...

Posh - Coding Theme