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#e6e6e6
  • activityBar.background#161616
  • activityBar.border#27292b
  • activityBar.foreground#d7dae0
  • activityBarBadge.background#343434
  • badge.background#161616
  • button.background#27292b
  • button.foreground#e6e6e6
  • dropdown.background#111111
  • dropdown.border#111111
  • dropdown.foreground#e6e6e6
  • editor.background#161616
  • editor.findMatchBackground#42557b
  • editor.findMatchBorder#79b8ff
  • editor.findMatchHighlightBackground#6bb7ff2f
  • editor.foreground#cbced4
  • editor.hoverHighlightBackground#20202074
  • editor.inactiveSelectionBackground#61afef33
  • editor.lineHighlightBackground#202020
  • editor.lineHighlightBorder#303030
  • editor.rangeHighlightBackground#27292b87
  • editor.selectionBackground#303030
  • editor.selectionHighlightBackground#27292b80
  • editor.wordHighlightBackground#d2e0ff2f
  • editor.wordHighlightBorder#d7dae0
  • editor.wordHighlightStrongBackground#abb2bf26
  • editor.wordHighlightStrongBorder#d7dae0
  • editorBracketMatch.background#2f2f2f
  • editorBracketMatch.border#303030
  • editorCodeLens.foreground#27292b
  • editorCursor.background#161616
  • editorCursor.foreground#e6e6e6
  • editorError.border#27292b
  • editorError.foreground#ff7a84
  • editorGroup.border#27292b
  • editorGroup.dropBackground#3793e01a
  • editorGroup.emptyBackground#161616
  • editorGroupHeader.tabsBackground#111111
  • editorGroupHeader.tabsBorder#27292b
  • editorGutter.background#161616
  • editorHoverWidget.background#111111
  • editorHoverWidget.border#27292b
  • editorIndentGuide.background1#2f2f2f71
  • editorLineNumber.activeForeground#e6e6e6
  • editorLineNumber.foreground#585858
  • editorLink.activeForeground#999999
  • editorMarkerNavigation.background#111111
  • editorMarkerNavigationError.background#161616
  • editorMarkerNavigationWarning.background#27292b
  • editorOverviewRuler.border#27292b
  • editorOverviewRuler.commonContentForeground#27292b
  • editorOverviewRuler.currentContentForeground#ff7a84
  • editorOverviewRuler.incomingContentForeground#73c936
  • editorRuler.foreground#343434
  • editorSuggestWidget.background#111111
  • editorSuggestWidget.border#27292b
  • editorSuggestWidget.foreground#999999
  • editorSuggestWidget.selectedBackground#27292b
  • editorWarning.border#27292b
  • editorWarning.foreground#ff7a84
  • editorWhitespace.foreground#343434
  • editorWidget.background#111111
  • editorWidget.border#27292b
  • errorForeground#ff7a84
  • focusBorder#666666
  • foreground#e6e6e6
  • input.background#27292bd3
  • input.foreground#e6e6e6
  • input.placeholderForeground#999999
  • inputOption.activeBorder#343434
  • inputValidation.errorBorder#ff7a84
  • inputValidation.infoBorder#b392f0
  • inputValidation.warningBorder#ff9800
  • list.activeSelectionBackground#27292b
  • list.activeSelectionForeground#e6e6e6
  • list.dropBackground#111111
  • list.errorForeground#ff7a84
  • list.focusBackground#27292b
  • list.highlightForeground#96a6c8
  • list.hoverBackground#27292b
  • list.inactiveSelectionBackground#27292b
  • list.inactiveSelectionForeground#e6e6e6
  • list.warningForeground#ff9800
  • menu.background#111111
  • menu.border#343434
  • menu.selectionBackground#27292b
  • menu.separatorBackground#303030
  • notificationCenter.border#343434
  • notifications.background#111111
  • notifications.border#343434
  • notifications.foreground#ffffff
  • notificationToast.border#343434
  • panelSectionHeader.background#111111
  • panelTitle.activeBorder#e6e6e6
  • peekView.border#343434
  • peekViewEditor.background#111111
  • peekViewEditor.matchHighlightBackground#3793e033
  • peekViewResult.background#111111
  • peekViewResult.fileForeground#e6e6e6
  • peekViewResult.lineForeground#e6e6e6
  • peekViewResult.matchHighlightBackground#3793e033
  • peekViewResult.selectionBackground#23252c
  • peekViewResult.selectionForeground#e6e6e6
  • peekViewTitle.background#23252c
  • peekViewTitleDescription.foreground#79b8ff
  • peekViewTitleLabel.foreground#e6e6e6
  • scrollbar.shadow#161616
  • scrollbarSlider.activeBackground#3c3f42cc
  • scrollbarSlider.background#27292bcc
  • scrollbarSlider.hoverBackground#333538cc
  • selection.background#61afef40
  • sideBar.background#111111
  • sideBar.border#27292b
  • sideBar.foreground#e6e6e6
  • sideBarSectionHeader.background#161616
  • sideBarSectionHeader.border#27292b
  • sideBarSectionHeader.foreground#e6e6e6
  • sideBarTitle.foreground#e6e6e6
  • statusBar.background#111111
  • statusBar.border#27292b
  • statusBar.foreground#e6e6e6
  • statusBar.noFolderBackground#111111
  • statusBar.noFolderForeground#e6e6e6
  • statusBarItem.prominentBackground#ff7a84
  • statusBarItem.prominentHoverBackground#ff9800
  • statusBarItem.remoteBackground#111111
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#161616
  • tab.activeForeground#e6e6e6
  • tab.border#27292b
  • tab.inactiveBackground#111111
  • tab.inactiveForeground#757575
  • tab.unfocusedActiveForeground#e6e6e6
  • tab.unfocusedInactiveForeground#757575
  • tab.unfocusedInactiveModifiedBorder#ff7a84
  • terminal.background#161616
  • terminal.border#2f2f2f
  • terminal.foreground#bdbdbd
  • terminal.selectionBackground#303030
  • textLink.foreground#79b8ff
  • titleBar.activeBackground#111111
  • titleBar.activeForeground#e6e6e6
  • titleBar.border#27292b
  • titleBar.inactiveBackground#161616
  • titleBar.inactiveForeground#999999
  • walkThrough.embeddedEditorBackground#2e3440

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support.function, keyword.operator.accessor, meta.group.braces.round.function.arguments, meta.template.expression, markup.fenced_code meta.embedded.block#B392F0
emphasisitalic
strong, markup.heading.markdown, markup.bold.markdown#FF7A84bold
markup.italic.markdownitalic
meta.link.inline.markdown#1976D2underline
string, markup.fenced_code, markup.inline#9DB1C5
comment, string.quoted.docstring.multi#6B737C
constant.language, variable.language.this, variable.other.object, variable.other.class, variable.other.constant, meta.property-name, support, string.other.link.title.markdown#79B8FF
constant.numeric, constant.other.placeholder, constant.character.format.placeholder, meta.property-value, keyword.other.unit, keyword.other.template, entity.name.tag.yaml, entity.other.attribute-name, support.type.property-name.json#F8F8F8
keyword, storage.modifier, storage.type, storage.control.clojure, entity.name.function.clojure, support.function.node, punctuation.separator.key-value, punctuation.definition.template-expression#F97583
variable.parameter.function#FF9800
entity.name.type, entity.other.inherited-class, meta.function-call, meta.instance.constructor, entity.other.attribute-name, entity.name.function, constant.keyword.clojure#B392F0
entity.name.tag, string.quoted, string.regexp, string.interpolated, string.template, string.unquoted.plain.out.yaml, keyword.other.template#FFAB70
token.info-token#316BCD
token.warn-token#CD9731
token.error-token#CD3131
token.debug-token#800080
punctuation.definition.arguments, punctuation.definition.dict, punctuation.separator, meta.function-call.arguments#BBBBBB
markup.underline.link#FFAB70
beginning.punctuation.definition.list.markdown#FF7A84
punctuation.definition.metadata.markdown#FFAB70
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#79B8FF
ref.license#CCCCCC
ref.snippet#606060
ref.matchtext#FFFFFF
keyword#C0BCF0
storage.modifier, storage.type#C0BCF0
entity.name.type, support.type#B392F0
string, string.quoted#A5D6FF
entity.name.tag, meta.tag, variable#F9B4BB
support.class, support.function, entity.name.function, entity.name.type.class#FF9EA8
entity.other.attribute-name, support.type.property-name.json#DFC0E3
meta.jsx.children#E0DEF4
variable.other#FFFFFF

Shiki preview

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

Loading...

Bandung Ice - Coding Theme