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#e7ffcf10
  • activityBar.activeBorder#afdf7fff
  • activityBar.activeFocusBorder#afdf7fff
  • activityBar.background#0e0e12ff
  • activityBar.border#0d0d0fff
  • activityBar.foreground#8fbf5fff
  • activityBar.inactiveForeground#9dbf7b55
  • activityBarBadge.background#fac0ffb6
  • activityBarBadge.foreground#000000
  • badge.background#fac0ffb6
  • badge.foreground#000000
  • breadcrumb.activeSelectionForeground#8fbf5fa0
  • breadcrumb.background#121216ff
  • breadcrumb.focusForeground#8fbf5f60
  • breadcrumb.foreground#bfbfbfff
  • button.background#7d9f5b55
  • button.foreground#edede9ff
  • button.hoverBackground#9dbf7b55
  • descriptionForeground#edede9ff
  • dropdown.background#17171dff
  • dropdown.border#101014ff
  • dropdown.foreground#b2b2b6ff
  • dropdown.listBackground#17171dff
  • editor.background#121216
  • editor.findMatchBackground#ffcbff1e
  • editor.findMatchHighlightBackground#ffcbff3c
  • editor.findRangeHighlightBackground#9eff8b23
  • editor.foreground#e7ffcf55
  • editor.lineHighlightBackground#c7dfaf20
  • editor.selectionBackground#8fbf5f40
  • editor.selectionHighlightBackground#8fbf5f49
  • editor.selectionHighlightBorder#8fbf5f40
  • editor.wordHighlightStrongBackground#8fbf5f49
  • editor.wordHighlightStrongBorder#8fbf5fa0
  • editorGroup.border#0d0d0fff
  • editorGroupHeader.border#0d0d0fff
  • editorGroupHeader.noTabsBackground#101014ff
  • editorGroupHeader.tabsBackground#101014ff
  • editorGroupHeader.tabsBorder#9dbf7b55
  • editorGutter.background#121216
  • editorGutter.modifiedBackground#8fbf5fff
  • editorHoverWidget.border#a7bf8f55
  • editorIndentGuide.activeBackground#8fbf5f49
  • editorIndentGuide.background#1a1a1eff
  • editorLineNumber.activeForeground#b7cf9fa0
  • editorLineNumber.foreground#a7bf8f30
  • editorOverviewRuler.errorForeground#ff336672
  • editorOverviewRuler.findMatchForeground#8fbf5f40
  • editorOverviewRuler.warningForeground#ffaa4472
  • editorOverviewRuler.wordHighlightForeground#8fbf5f49
  • editorPane.background#0f0f13ff
  • editorSuggestWidget.background#121216
  • editorSuggestWidget.border#a7bf8f55
  • editorSuggestWidget.selectedBackground#222226ff
  • editorUnnecessaryCode.border#12121680
  • editorUnnecessaryCode.opacity#12121680
  • editorWidget.background#16161aff
  • editorWidget.border#8fbf5fff
  • editorWidget.foreground#8fbf5fff
  • errorForeground#8fbf5fff
  • focusBorder#a7bf8f55
  • foreground#e7ffcf55
  • icon.foreground#8fbf5fff
  • input.background#222226ff
  • input.border#121216
  • input.foreground#b7cf9fa0
  • input.placeholderForeground#879f6f30
  • inputOption.activeBackground#87b7573c
  • inputOption.activeBorder#87b7574b
  • list.activeSelectionBackground#8fbf5f2b
  • list.activeSelectionForeground#ffc980ff
  • list.dropBackground#17171dff
  • list.focusBackground#8fbf5f2b
  • list.focusForeground#ffffffe4
  • list.highlightForeground#87b75780
  • list.hoverBackground#6f9f3f2b
  • list.hoverForeground#ffffffe4
  • list.inactiveSelectionBackground#6f9f3f2b
  • list.inactiveSelectionForeground#d9ab6dff
  • listFilterWidget.outline#0d0d0fff
  • menu.background#0e0e12e4
  • menu.border#0e0e12e4
  • menu.foreground#efffd755
  • menu.selectionBackground#8fbf5f39
  • menu.selectionBorder#8fbf5f39
  • menu.selectionForeground#ffffffe4
  • menu.separatorBackground#e7ffcfe4
  • menubar.selectionBackground#8fbf5f39
  • menubar.selectionBorder#8fbf5f39
  • minimap.background#121216
  • minimap.errorHighlight#ff336672
  • minimap.selectionHighlight#8fbf5f40
  • minimap.warningHighlight#ffaa4472
  • notificationCenter.border#121216
  • notificationCenterHeader.background#121216ff
  • notificationCenterHeader.foreground#e7ffcf55
  • notificationLink.foreground#87b757ff
  • notifications.background#121216e4
  • notifications.border#8fbf5fe4
  • notifications.foreground#e7ffcf55
  • notificationsErrorIcon.foreground#ff336672
  • notificationsInfoIcon.foreground#8fbf5fff
  • notificationsWarningIcon.foreground#ffaa4472
  • panel.background#101014ff
  • panel.border#0d0d0fff
  • panelTitle.activeBorder#d7efbf30
  • panelTitle.activeForeground#d7efbf30
  • panelTitle.inactiveForeground#778f5f30
  • pickerGroup.foreground#ffc980ff
  • progressBar.background#121216ff
  • quickInput.foreground#e7ffcf55
  • scrollbar.shadow#020206ff
  • scrollbarSlider.activeBackground#8fbf5f80
  • scrollbarSlider.background#8fbf5f40
  • scrollbarSlider.hoverBackground#8fbf5f40
  • selection.background#8fbf5f40
  • settings.checkboxBackground#222226ff
  • settings.checkboxBorder#121216
  • settings.dropdownBorder#121216
  • settings.dropdownListBorder#121216
  • settings.headerForeground#8fbf5fff
  • settings.modifiedItemIndicator#9dbf7b55
  • settings.numberInputBorder#121216
  • settings.textInputBorder#121216
  • sideBar.background#101014ff
  • sideBar.border#0d0d0fff
  • sideBar.dropBackground#9dbf7b55
  • sideBar.foreground#e7ffcf55
  • sideBarSectionHeader.background#101014ff
  • sideBarSectionHeader.border#18181cff
  • sideBarSectionHeader.foreground#d0e5ba55
  • sideBarTitle.foreground#9dbf7b55
  • statusBar.background#16161aff
  • statusBar.border#0d0d0fff
  • statusBar.debuggingBackground#a7d777ff
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#e7ffcf55
  • statusBar.noFolderBackground#8fbf5f80
  • statusBar.noFolderForeground#ffffff
  • statusBarItem.activeBackground#8fbf5f80
  • statusBarItem.hoverBackground#8fbf5f40
  • statusBarItem.prominentBackground#8fbf5f80
  • statusBarItem.prominentHoverBackground#8fbf5f40
  • statusBarItem.remoteBackground#16161aff
  • statusBarItem.remoteForeground#8fbf5fff
  • tab.activeBackground#121216ff
  • tab.activeBorder#121216ff
  • tab.activeBorderTop#8fbf5fff
  • tab.activeForeground#ffffff
  • tab.activeModifiedBorder#8fbf5fff
  • tab.border#0d0d0fff
  • tab.hoverBackground#8fbf5f10
  • tab.hoverBorder#fac0ffb6
  • tab.hoverForeground#8fbf5fa0
  • tab.inactiveBackground#101014ff
  • tab.inactiveForeground#c4d9b055
  • tab.inactiveModifiedBorder#fac0ffff
  • tab.unfocusedActiveBorder#121216ff
  • tab.unfocusedActiveBorderTop#9cb484ff
  • tab.unfocusedActiveForeground#a2b29155
  • tab.unfocusedActiveModifiedBorder#9cb484ff
  • tab.unfocusedHoverForeground#8fbf5f60
  • tab.unfocusedInactiveBackground#0a0a0eff
  • tab.unfocusedInactiveForeground#7f8c7255
  • tab.unfocusedInactiveModifiedBorder#eacdedff
  • terminal.ansiBlack#3F3F3F
  • terminal.ansiBlue#2F4858
  • terminal.ansiBrightBlack#4F4F4F
  • terminal.ansiBrightBlue#2F4858
  • terminal.ansiBrightCyan#6983aa
  • terminal.ansiBrightGreen#5F7F5F
  • terminal.ansiBrightMagenta#DC8CC3
  • terminal.ansiBrightRed#DCA3A3
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#d9ab6dff
  • terminal.ansiCyan#6983aa
  • terminal.ansiGreen#5F7F5F
  • terminal.ansiMagenta#DC8CC3
  • terminal.ansiRed#DCA3A3
  • terminal.ansiWhite#DCDCCC
  • terminal.ansiYellow#d9ab6dff
  • terminal.background#101014ff
  • terminal.border#0d0d0fff
  • terminal.foreground#575f52
  • terminal.selectionBackground#8fbf5f40
  • terminalCursor.foreground#575f52
  • textBlockQuote.border#8fbf5f80
  • textCodeBlock.background#8fbf5f80
  • textLink.activeForeground#a7d777ff
  • textLink.foreground#87b757ff
  • textSeparator.foreground#8fbf5f80
  • titleBar.activeBackground#0f0f13ff
  • titleBar.activeForeground#ffffaba0
  • titleBar.border#0d0d0fff
  • titleBar.inactiveBackground#17171bff
  • titleBar.inactiveForeground#a2a2a0ff
  • welcomePage.background#121216
  • welcomePage.buttonBackground#7d9f5b55
  • welcomePage.buttonHoverBackground#9dbf7b55
  • window.activeBorder#9dbf7b55
  • window.inactiveBorder#a2a2a0ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#647484ccitalic
punctuation.definition.comment, punctuation.whitespace.comment#647484CCitalic
string, string.unquoted#5F7F5F
string.unquoted.heredoc#d6e6d6
keyword.other.phpdoc, storage.type.class.jsdoc, comment.block.documentantion.ts#9DB190italic
punctuation.section.embedded#d69494
source.ruby.embedded#9DB190
meta.preprocessor, punctuation.definition.preprocessor#e8be92
keyword.other.directive#dedede
keyword.other.directive.line-numberunderline
support.constant.numeric, constant.numeric#f89466
constant, support.constant#F47520
constant.character, constant.other#9DB190
variable.other.constant#5F7F5F
keyword, keyword.control, meta.selector.css, entity.other.attribute-name#f38181
variable.other.readwrite.instance#fed8af
entity.name.module, support.other.module#ff8000
keyword.operator#f38181
keyword.operator.symbol.infix.floating-pointunderline
source.ocaml, keyword.operator.symbol.prefix.floating-pointunderline
storage.type, storage.modifier, support.type#a278b5
entity.name.class.variant#7496da
entity.other#d6d6d6
entity.other.inherited-class#d7661b
storage.type.user-defined, meta.property-list#be442b
entity.name.type, entity.name.type.class, entity.other.attribute-name.class.css, support.class, entity.name.class#535791italic
invalid#ddffccitalic underline
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#5fa1a1
support.function.construct#daba2f
punctuation.definition.variable#d89c7a
meta.function-name, entity.name.function#9DB190
support.function#b47c7c
meta.brace#a278b5
punctuation.definition.string.begin, punctuation.definition.string.end#b47c7c
entity.name.tag.yaml#fed8af
punctuation.definition.entry#d6d6d6
keyword.other.DML.sql, keyword.other.data-integrity.sql#b7b7b7
source.sql, constant.other.database-name.sql, constant.other.table-name.sql, keyword.operator.star#95c9f3
source.diff, meta.diff.comment, meta.toc-list.comment.diff#ffffff
meta.diff.header.from-file#c9ca71
meta.diff.header.to-file#a878d8
meta.diff.range.unified#8c8ed3
markup.inserted.diff#a476d1
markup.deleted.diff#c9ca71
string.regexp#c79a41
string.regexp.arbitrary-repitition#9e945f
punctuation.definition.arbitrary-repitition#ffffff
string.regexp.character-class#cbbf81
punctuation.definition.character-class#ffffff
markup.raw.inline.markdown#fed8af
markup.heading.markdown, punctuation.definition.heading#ffffff
markup.list#dedede
sublimelinter.mark.warning#dd2900
sublimelinter.gutter-mark#ffffff
sublimelinter.mark.error#dbc43d
meta.doctype, meta.tag.sgml-declaration.doctype, meta.tag.sgml.doctype#ffe02d
entity#A278B5
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.tag.structure.any.html#B47C7C
entity.other.attribute-name.html#9DB190
entity.name.tag#A278B5
meta.tag#9DB190
meta.tag.inline source, text.html.php.source#9DB190
meta.tag.other, entity.name.tag.style, entity.name.tag.script, meta.tag.block.script, source.js.embedded punctuation.definition.tag.html, source.css.embedded punctuation.definition.tag.html#9872A2
entity.other.attribute-name, meta.tag punctuation.definition.string#9DB190
meta.tag string -source -punctuation, text source text meta.tag string -punctuation#B47C7C
punctuation.section.embedded -(source string source punctuation.section.embedded), meta.brace.erb.html#9DB190
meta.toc-list.id#9AA83A
string.quoted.double.html, punctuation.definition.string.begin.html, punctuation.definition.string.end.html#5F7F5F
punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end#B47C7C
meta.selector.css entity.other.attribute-name.id#9872A2
support.type.property-name.css#676867
hyperlink#5464a0
invisibles#ffffff
level0#452345
level1#234545
level10#414163
level2#452323
level3#234523
level4#232345
level5#636341
level6#634163
level7#416363
level8#634141
level9#416341
markup#d3d3d3
match#ff9966
meta#9DB190
none#757c66
property#87a2b5
punctuation#F38181
source#5F7F5F
storage#5b7d41
support#a5efab
text#5F7F5F
variable#5F7F5F
wordhighlight#ff1198
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6

Shiki preview

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

Loading...

Dank Themes by _inkSea - VS Code Theme