Skip to main content
CodingTheme

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#17212B
  • activityBar.border#000611ff
  • activityBar.foreground#708498ff
  • activityBar.inactiveForeground#70849855
  • activityBarBadge.background#6b1b47c4
  • activityBarBadge.foreground#dcdcdcff
  • badge.background#6b1b47c4
  • badge.foreground#dcdcdcff
  • breadcrumb.background#304050
  • breadcrumb.border#86f9ffff
  • breadcrumb.foreground#9c9c9cff
  • button.background#304050
  • button.foreground#f1e9deff
  • button.hoverBackground#405060ff
  • descriptionForeground#f1e9deff
  • dropdown.background#121d2bff
  • dropdown.border#0e1621
  • dropdown.foreground#aeb6c1ff
  • dropdown.listBackground#121d2bff
  • editor.background#0e1621
  • editor.foreground#909090
  • editor.lineHighlightBackground#66d9ef20
  • editor.selectionBackground#66d9ef40
  • editor.selectionHighlightBackground#66d9ef60
  • editor.wordHighlightStrongBackground#66d9ef80
  • editorGroup.border#000611ff
  • editorGroupHeader.noTabsBackground#060e19ff
  • editorGroupHeader.tabsBackground#060e19ff
  • editorGutter.background#0e1621
  • editorGutter.modifiedBackground#66d9ef
  • editorHoverWidget.border#3e5661ff
  • editorIndentGuide.activeBackground#748392ff
  • editorIndentGuide.background#161e29ff
  • editorLineNumber.activeForeground#7e96a1ff
  • editorLineNumber.foreground#4e6671ff
  • editorPane.background#060e19ff
  • editorSuggestWidget.background#0e1621
  • editorSuggestWidget.border#3e5661ff
  • editorSuggestWidget.selectedBackground#1e2631ff
  • editorUnnecessaryCode.opacity#0e162180
  • editorWidget.border#70849855
  • errorForeground#66d9ef
  • focusBorder#3e5661ff
  • foreground#909090
  • input.background#1e2631ff
  • input.border#0e1621
  • input.foreground#7e96a1ff
  • input.placeholderForeground#2e4651ff
  • inputOption.activeBorder#708498ff
  • list.activeSelectionBackground#66d9ef2b
  • list.activeSelectionForeground#ffc67aff
  • list.dropBackground#121d2bff
  • list.focusBackground#ffc67a2b
  • list.focusForeground#d0d0d0ff
  • list.highlightForeground#66d9ef80
  • list.hoverBackground#0e1621
  • list.hoverForeground#d0d0d0ff
  • list.inactiveSelectionBackground#0e1621
  • list.inactiveSelectionForeground#d9a868ff
  • listFilterWidget.outline#000611ff
  • menu.background#17212B
  • menu.foreground#9c9c9cff
  • menu.selectionBackground#0e1621
  • menu.selectionForeground#d0d0d0ff
  • menu.separatorBackground#4e5661ff
  • menubar.selectionBackground#66d9ef40
  • menubar.selectionBorder#060e19ff
  • notifications.background#304050
  • panel.background#0e1621
  • panel.border#2e3641ff
  • panelTitle.activeBorder#7e96a1ff
  • panelTitle.activeForeground#7e96a1ff
  • panelTitle.inactiveForeground#4e6671ff
  • pickerGroup.foreground#ffc67aff
  • progressBar.background#304050
  • scrollbar.shadow#2e3641ff
  • scrollbarSlider.activeBackground#66d9ef60
  • scrollbarSlider.background#1e2631a0
  • scrollbarSlider.hoverBackground#66d9ef40
  • selection.background#66d9ef80
  • settings.checkboxBackground#1e2631ff
  • settings.checkboxBorder#0e1621
  • settings.dropdownBorder#0e1621
  • settings.dropdownListBorder#0e1621
  • settings.modifiedItemIndicator#70849855
  • settings.numberInputBorder#0e1621
  • settings.textInputBorder#0e1621
  • sideBar.background#0f1620ff
  • sideBar.border#0a121dff
  • sideBar.dropBackground#70849855
  • sideBarSectionHeader.background#304050
  • sideBarSectionHeader.border#70849855
  • sideBarSectionHeader.foreground#9c9c9cff
  • sideBarTitle.foreground#707070ff
  • statusBar.background#17212bff
  • statusBar.border#2e3641ff
  • statusBar.debuggingBackground#94a8bcff
  • statusBar.debuggingForeground#6b5743ff
  • statusBar.foreground#e8ded4ff
  • statusBar.noFolderBackground#66d9ef80
  • statusBar.noFolderForeground#99261080
  • statusBarItem.activeBackground#66d9ef60
  • statusBarItem.hoverBackground#66d9ef40
  • statusBarItem.prominentBackground#66d9ef60
  • statusBarItem.prominentHoverBackground#66d9ef40
  • tab.activeBackground#304050
  • tab.activeBorder#304050
  • tab.activeBorderTop#66d9ef
  • tab.activeForeground#dcdcdcff
  • tab.activeModifiedBorder#66d9ef
  • tab.border#000611ff
  • tab.hoverBorder#909090
  • tab.hoverForeground#262e39ff
  • tab.inactiveBackground#060e19ff
  • tab.inactiveForeground#707070ff
  • tab.inactiveModifiedBorder#53032fc4
  • tab.unfocusedActiveBorder#304050
  • tab.unfocusedActiveBorderTop#94cdd8ff
  • tab.unfocusedActiveModifiedBorder#94cdd8ff
  • tab.unfocusedInactiveModifiedBorder#53032fc4
  • terminal.background#17212B
  • terminal.border{terminal-borders}
  • terminal.foreground#e8ded4ff
  • terminal.selectionBackground#66d9ef40
  • textLink.activeForeground#86f9ffff
  • textLink.foreground#66d9ef
  • titleBar.activeBackground#060e19ff
  • titleBar.activeForeground#f9f1e6ff
  • titleBar.inactiveBackground#060e19ff
  • titleBar.inactiveForeground#aea9a1ff
  • welcomePage.buttonBackground#304050
  • welcomePage.buttonHoverBackground#405060ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#6e8f6dff
meta.preprocessor, punctuation.definition.preprocessor#c29e7bff
keyword.other.phpdoc#42713bff
punctuation.definition.comment, punctuation.whitespace.comment#86ac87ff
punctuation.section.embedded#6e6e6eff
source.ruby.embedded#a97a7bff
keyword.other.directive#bcbcbcffbold
keyword.other.directive.line-numberunderline
string, string.unquoted#b06e6eff
string.unquoted.heredoc#b5b5b5ff
support.constant.numeric, constant.numeric#71b3b2ff
constant, support.constant#b5b593ffbold
constant.character, constant.other#a97a7bff
variable.other.constant#b5b593ff
keyword, keyword.control, meta.selector.css, entity.other.attribute-name#d7b695ff
variable.other.readwrite.instance#d7b695ff
entity.name.module, support.other.module#d36a0effbold
keyword.operator#c9c9c9ff
keyword.operator.symbol.infix.floating-pointunderline
source.ocaml, keyword.operator.symbol.prefix.floating-pointunderline
storage.type, storage.modifier, support.type#dad688ff
entity.name.class.variant#30657fff
entity.other#b5b5b5ff
entity.other.inherited-class#b17415ff
storage.type.user-defined, meta.property-list#d8be13ff
entity.name.type, entity.name.type.class, entity.other.attribute-name.class.css, support.class, entity.name.class#ca851bff
invalid#d8aecaffbold italic underline
entity.other.attribute-name.html#b5b694ffbold
entity.name.tag#b5b694ff
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#6e6e6eff
support.function.construct#d7b695ff
punctuation.definition.variable#d7b695ff
meta.function-name, entity.name.function#dad876ff
support.function#a59a14ff
meta.brace#64acaa80
punctuation.definition.string.begin, punctuation.definition.string.end#b5b5b580
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.tag.structure.any.html#d7b59494bold
entity.name.tag.yaml#d7b695ffbold
punctuation.definition.entry#b5b5b5ff
keyword.other.DML.sql, keyword.other.data-integrity.sql#989898ffbold
source.sql, constant.other.database-name.sql, constant.other.table-name.sql, keyword.operator.star#7da0cbffbold
source.diff, meta.diff.comment, meta.toc-list.comment.diff#dbdbdbff
meta.diff.header.from-file#a55b5cffbold
meta.diff.header.to-file#4d9371ffbold
meta.diff.range.unified#76adb0ff
markup.inserted.diff#4d9371ff
markup.deleted.diff#a55b5cff
string.regexp#a25933ff
string.regexp.arbitrary-repitition#7e544aff
punctuation.definition.arbitrary-repitition#dbdbdb5e
string.regexp.character-class#a7756aff
punctuation.definition.character-class#dbdbdb5e
markup.raw.inline.markdown#d7b695ff
markup.heading.markdown, punctuation.definition.heading#dbdbdbffbold
markup.list#bcbcbcff
sublimelinter.mark.warning#b8980fff
sublimelinter.gutter-mark#dbdbdbff
sublimelinter.mark.error#a7150aff
doctype#a8aeacff
entity#a8aeacff
hyperlink#417380ff
invisibles#dbdbdbff
level0#122e12ff
level1#11112cff
level10#2e4a4aff
level2#2f2f13ff
level3#2e122eff
level4#122e2eff
level5#492d2dff
level6#2e4a2eff
level7#2c2c48ff
level8#4b4b2fff
level9#492d49ff
markup#b2b2b2ff
match#d7ad58ff
meta#9c9085ff
none#614f54ff
property#6e7e94ff
punctuation#d7b25cff bold
source#bababaff
storage#602e4aff
support#c48bc8ff
text#bababaff
variable#c3ae99ff
wordhighlight#65d712ff

Shiki preview

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

Loading...