Skip to main content
CodingTheme

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.activeBackground#daf0ee
  • activityBar.activeBorder#6b9080
  • activityBar.background#daf0ee
  • activityBar.foreground#6b9080
  • activityBar.inactiveForeground#3b413c
  • activityBarBadge.background#6b9080
  • activityBarBadge.foreground#eaf4f4
  • badge.background#eaf4f4
  • badge.foreground#6b9080
  • button.background#daf0ee
  • button.foreground#3b413c
  • button.hoverBackground#cce3de
  • checkbox.border#6b9080
  • debugIcon.breakpointForeground#6b9080
  • debugToolBar.background#eaf4f4
  • dropdown.background#eaf4f4
  • dropdown.border#3b413c
  • dropdown.foreground#3b413c
  • dropdown.listBackground#eaf4f4
  • editor.background#f6fff8
  • editor.foreground#3b413c
  • editor.selectionBackground#daf0ee
  • editorCursor.background#6b9080
  • editorCursor.foreground#6b9080
  • editorGroup.dropBackground#daf0ee
  • editorGroupHeader.tabsBackground#daf0ee
  • editorGutter.background#f6fff8
  • editorLineNumber.foreground#3b413c
  • editorWidget.background#eaf4f4
  • editorWidget.foreground#3b413c
  • focusBorder#cce3de
  • gitDecoration.ignoredResourceForeground#a4c3b2
  • gitDecoration.untrackedResourceForeground#3a506b
  • input.background#daf0ee
  • input.border#daf0ee
  • input.foreground#3b413c
  • inputOption.activeBackground#daf0ee
  • inputOption.activeBorder#daf0ee
  • inputOption.activeForeground#6b9080
  • list.activeSelectionBackground#cce3de
  • list.activeSelectionForeground#3b413c
  • list.errorForeground#ff686b
  • list.focusForeground#3b413c
  • list.hoverBackground#cce3de
  • list.hoverForeground#3b413c
  • list.inactiveSelectionForeground#3b413c
  • menu.background#daf0ee
  • menu.foreground#3b413c
  • menu.selectionBackground#eaf4f4
  • menu.selectionForeground#6b9080
  • menubar.selectionBackground#daf0ee
  • panel.background#daf0ee
  • panel.border#daf0ee
  • panelTitle.activeBorder#6b9080
  • panelTitle.activeForeground#3b413c
  • scrollbar.shadow#daf0ee
  • scrollbarSlider.activeBackground#6b9080
  • scrollbarSlider.background#daf0ee
  • scrollbarSlider.hoverBackground#6b9080
  • sideBar.background#eaf4f4
  • sideBar.border#6b9080
  • sideBar.foreground#3b413c
  • sideBarSectionHeader.background#daf0ee
  • sideBarSectionHeader.foreground#3b413c
  • sideBarTitle.foreground#6b9080
  • statusBar.background#cce3de
  • statusBar.debuggingBackground#6b9080
  • statusBar.debuggingForeground#eaf4f4
  • statusBar.foreground#3b413c
  • statusBar.noFolderBackground#cce3de
  • statusBar.noFolderForeground#3b413c
  • tab.activeBackground#eaf4f4
  • tab.activeForeground#3b413c
  • tab.border#daf0ee
  • tab.hoverBackground#daf0ee
  • tab.hoverForeground#6b9080
  • tab.inactiveBackground#daf0ee
  • tab.inactiveForeground#3b413c
  • tab.unfocusedActiveBackground#daf0ee
  • terminal.ansiBlue#3fa7d6
  • terminal.ansiBrightBlue#3fa7d6
  • terminal.ansiBrightYellow#ee6352
  • terminal.ansiYellow#ee6352
  • terminal.foreground#3b413c
  • terminal.selectionBackground#6b9080
  • terminalCursor.foreground#6b9080
  • textLink.activeForeground#6b9080
  • textLink.foreground#3b413c
  • titleBar.activeBackground#eaf4f4
  • titleBar.activeForeground#3b413c
  • titleBar.inactiveBackground#daf0ee
  • titleBar.inactiveForeground#3b413c
  • welcomePage.background#eaf4f4
  • welcomePage.buttonBackground#daf0ee
  • welcomePage.buttonHoverBackground#cce3de

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#AAAAAAitalic
comment.block.preprocessor#AAAAAA
comment.documentation, comment.block.documentation#3d4939
invalid.illegal#aa2323
keyword.operator#777777
keyword, storage#0b132b
storage.type, support.type#3a506b
constant.language, support.constant, variable.language#ee6352
variable, support.variable#3a506b
entity.name.function, support.function#ed6a5ebold
entity.name.type, entity.other.inherited-class, support.class#3a506bbold
entity.name.exception#660000
entity.name.sectionbold
constant.numeric, constant.character, constant#ee6352
string#448C27
constant.character.escape#777777
string.regexp#0b132b
constant.other.symbol#ee6352
punctuation#777777
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#AAAAAA
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#8d99ae
entity.name.tag#0b132b
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#8d99aeitalic
constant.character.entity, punctuation.definition.entity#ee6352
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#3a506b
meta.property-name, support.type.property-name#ee6352
meta.property-value, meta.property-value constant.other, support.constant.property-value#448C27
keyword.other.importantbold
markup.changed#000000
markup.deleted#000000
markup.italicitalic
markup.error#660000
markup.inserted#000000
meta.link#0b132b
markup.output, markup.raw#777777
markup.prompt#777777
markup.heading#ed6a5e
markup.boldbold
markup.traceback#660000
markup.underlineunderline
markup.quote#3a506b
markup.list#0b132b
markup.bold, markup.italic#448C27
markup.inline.raw#ee6352
meta.diff.range, meta.diff.index, meta.separator#434343
meta.diff.header.from-file#434343
meta.diff.header.to-file#434343

Shiki preview

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

Loading...

MintLight Theme by Daniel Lvovsky - VS Code Theme