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.activeBorder#4d9375
  • activityBar.background#000
  • activityBar.border#191919
  • activityBar.foreground#dbd7caee
  • activityBar.inactiveForeground#dedcd550
  • activityBarBadge.background#bfbaaa
  • activityBarBadge.foreground#000
  • badge.background#dedcd590
  • badge.foreground#000
  • breadcrumb.activeSelectionForeground#eeeeee15
  • breadcrumb.background#050505
  • breadcrumb.focusForeground#dbd7caee
  • breadcrumb.foreground#959da5
  • breadcrumbPicker.background#000
  • button.background#4d9375
  • button.foreground#000
  • button.hoverBackground#4d9375
  • checkbox.background#050505
  • checkbox.border#2f363d
  • debugToolBar.background#000
  • descriptionForeground#dedcd590
  • diffEditor.insertedTextBackground#4d937522
  • diffEditor.removedTextBackground#ab595922
  • dropdown.background#000
  • dropdown.border#191919
  • dropdown.foreground#dbd7caee
  • dropdown.listBackground#050505
  • editor.background#000
  • editor.findMatchBackground#e6cc7722
  • editor.findMatchHighlightBackground#e6cc7744
  • editor.focusedStackFrameHighlightBackground#b808
  • editor.foldBackground#eeeeee10
  • editor.foreground#dbd7caee
  • editor.inactiveSelectionBackground#eeeeee08
  • editor.lineHighlightBackground#050505
  • editor.selectionBackground#eeeeee15
  • editor.selectionHighlightBackground#eeeeee08
  • editor.stackFrameHighlightBackground#a707
  • editor.wordHighlightBackground#1c6b4805
  • editor.wordHighlightStrongBackground#1c6b4810
  • editorBracketHighlight.foreground1#5eaab5
  • editorBracketHighlight.foreground2#4d9375
  • editorBracketHighlight.foreground3#d4976c
  • editorBracketHighlight.foreground4#d9739f
  • editorBracketHighlight.foreground5#e6cc77
  • editorBracketHighlight.foreground6#6394bf
  • editorBracketMatch.background#4d937520
  • editorError.foreground#cb7676
  • editorGroup.border#191919
  • editorGroupHeader.tabsBackground#000
  • editorGroupHeader.tabsBorder#191919
  • editorGutter.addedBackground#4d9375
  • editorGutter.commentRangeForeground#dedcd550
  • editorGutter.deletedBackground#cb7676
  • editorGutter.foldingControlForeground#dedcd590
  • editorGutter.modifiedBackground#6394bf
  • editorHint.foreground#4d9375
  • editorIndentGuide.activeBackground#ffffff30
  • editorIndentGuide.background#ffffff15
  • editorInfo.foreground#6394bf
  • editorInlayHint.background#00000000
  • editorInlayHint.foreground#666666
  • editorLineNumber.activeForeground#bfbaaa
  • editorLineNumber.foreground#dedcd550
  • editorOverviewRuler.border#111
  • editorStickyScroll.background#050505
  • editorStickyScrollHover.background#050505
  • editorWarning.foreground#d4976c
  • editorWhitespace.foreground#ffffff15
  • editorWidget.background#000
  • errorForeground#cb7676
  • focusBorder#00000000
  • foreground#dbd7caee
  • gitDecoration.addedResourceForeground#4d9375
  • gitDecoration.conflictingResourceForeground#d4976c
  • gitDecoration.deletedResourceForeground#cb7676
  • gitDecoration.ignoredResourceForeground#dedcd550
  • gitDecoration.modifiedResourceForeground#6394bf
  • gitDecoration.submoduleResourceForeground#dedcd590
  • gitDecoration.untrackedResourceForeground#5eaab5
  • input.background#050505
  • input.border#191919
  • input.foreground#dbd7caee
  • input.placeholderForeground#dedcd590
  • inputOption.activeBackground#dedcd550
  • list.activeSelectionBackground#050505
  • list.activeSelectionForeground#dbd7caee
  • list.focusBackground#050505
  • list.hoverBackground#050505
  • list.hoverForeground#dbd7caee
  • list.inactiveFocusBackground#000
  • list.inactiveSelectionBackground#050505
  • list.inactiveSelectionForeground#dbd7caee
  • menu.separatorBackground#191919
  • notificationCenterHeader.background#000
  • notificationCenterHeader.foreground#959da5
  • notifications.background#000
  • notifications.border#191919
  • notifications.foreground#dbd7caee
  • notificationsErrorIcon.foreground#cb7676
  • notificationsInfoIcon.foreground#6394bf
  • notificationsWarningIcon.foreground#d4976c
  • panel.background#000
  • panel.border#191919
  • panelInput.border#2f363d
  • panelTitle.activeBorder#4d9375
  • panelTitle.activeForeground#dbd7caee
  • panelTitle.inactiveForeground#959da5
  • peekViewEditor.background#000
  • peekViewEditor.matchHighlightBackground#ffd33d33
  • peekViewResult.background#000
  • peekViewResult.matchHighlightBackground#ffd33d33
  • pickerGroup.border#444d56
  • pickerGroup.foreground#dbd7caee
  • problemsErrorIcon.foreground#cb7676
  • problemsInfoIcon.foreground#6394bf
  • problemsWarningIcon.foreground#d4976c
  • progressBar.background#4d9375
  • quickInput.background#000
  • quickInput.foreground#dbd7caee
  • scrollbar.shadow#0000
  • scrollbarSlider.activeBackground#dedcd550
  • scrollbarSlider.background#dedcd510
  • scrollbarSlider.hoverBackground#dedcd550
  • settings.headerForeground#dbd7caee
  • settings.modifiedItemIndicator#4d9375
  • sideBar.background#000
  • sideBar.border#191919
  • sideBar.foreground#bfbaaa
  • sideBarSectionHeader.background#000
  • sideBarSectionHeader.border#191919
  • sideBarSectionHeader.foreground#dbd7caee
  • sideBarTitle.foreground#dbd7caee
  • statusBar.background#000
  • statusBar.border#191919
  • statusBar.debuggingBackground#050505
  • statusBar.debuggingForeground#bfbaaa
  • statusBar.foreground#bfbaaa
  • statusBar.noFolderBackground#000
  • statusBarItem.prominentBackground#050505
  • tab.activeBackground#000
  • tab.activeBorder#191919
  • tab.activeBorderTop#dedcd590
  • tab.activeForeground#dbd7caee
  • tab.border#191919
  • tab.hoverBackground#050505
  • tab.inactiveBackground#000
  • tab.inactiveForeground#959da5
  • tab.unfocusedActiveBorder#191919
  • tab.unfocusedActiveBorderTop#191919
  • tab.unfocusedHoverBackground#000
  • terminal.ansiBlack#393a34
  • terminal.ansiBlue#6394bf
  • terminal.ansiBrightBlack#777777
  • terminal.ansiBrightBlue#6394bf
  • terminal.ansiBrightCyan#5eaab5
  • terminal.ansiBrightGreen#4d9375
  • terminal.ansiBrightMagenta#d9739f
  • terminal.ansiBrightRed#cb7676
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#e6cc77
  • terminal.ansiCyan#5eaab5
  • terminal.ansiGreen#4d9375
  • terminal.ansiMagenta#d9739f
  • terminal.ansiRed#cb7676
  • terminal.ansiWhite#dbd7caee
  • terminal.ansiYellow#e6cc77
  • terminal.foreground#dbd7caee
  • terminal.selectionBackground#eeeeee15
  • textBlockQuote.background#000
  • textBlockQuote.border#191919
  • textCodeBlock.background#000
  • textLink.activeForeground#4d9375
  • textLink.foreground#4d9375
  • textPreformat.foreground#d1d5da
  • textSeparator.foreground#586069
  • titleBar.activeBackground#000
  • titleBar.activeForeground#bfbaaa
  • titleBar.border#050505
  • titleBar.inactiveBackground#000
  • titleBar.inactiveForeground#959da5
  • tree.indentGuidesStroke#2f363d
  • welcomePage.buttonBackground#2f363d
  • welcomePage.buttonHoverBackground#444d56

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#bbb7d4
delimiter.bracket, delimiter, invalid.illegal.character-not-allowed-here.html, keyword.operator.rest, keyword.operator.spread, keyword.operator.type.annotation, keyword.operator.relational.ts, meta.brace, meta.tag.block.any.html, meta.tag.inline.any.html, meta.tag.structure.input.void.html, meta.type.annotation, storage.type.function.arrow, keyword.operator.type, meta.objectliteral.ts, keyword.operator.comparison, punctuation#89ddff
constant, entity.name.constant, variable.language, meta.definition.variable#c99076
variable.language.this#fff
variable.parameter.function#dbd7caee
entity.name.tag, tag.html#e879f9
meta.function, meta.definition.method, support.function.magic, support.function.constructor#a6accd
meta.function-call, meta.method-call#22d3ee
support.function#22a6ee
keyword, storage.type.class.jsdoc, punctuation.definition.block.tag, support.function.construct#e879f9
storage, storage.type, support.type.builtin#e879f9
constant.language, constant.language.null#fff
storage.modifier.package, storage.modifier.import, storage.type.java#dbd7caee
string, string punctuation.section.embedded source, attribute.value#bef264
punctuation.definition.string, punctuation.support.type.property-name#bef264
support#a6accd
property, meta.property-name, meta.object-literal.key, entity.name.tag.yaml, attribute.name#a6accd
entity.other.attribute-name, invalid.deprecated.entity.other.attribute-name.html#fff
variable, identifier#fff
support.type.primitive, entity.name.type#a6accd
namespace#db889a
keyword.operator, meta.var.expr.ts#9299a6
invalid.broken#fdaeb7italic
invalid.deprecated#fdaeb7italic
invalid.illegal#fdaeb7italic
invalid.unimplemented#fdaeb7italic
carriage-return#24292eitalic underline
message.error#fdaeb7
string variable#bef264
source.regexp, string.regexp#c4704f
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#bef264
string.regexp constant.character.escape#e6cc77
support.constant#c99076
constant.numeric, number#f78c6c
keyword.other.unit#e879f9
constant.language.boolean#e879f9
meta.module-reference#4d9375
punctuation.definition.list.begin.markdown#d4976c
punctuation.definition.variable#fff
punctuation.definition, punctuation.section, punctuation.terminator.expression, keyword.operator.class, punctuation.separator.inheritance#89ddff
markup.heading, markup.heading entity.name#4d9375bold
markup.quote#fff
markup.italic#dbd7caeeitalic
markup.bold#dbd7caeebold
markup.raw#4d9375
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#fdaeb7
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#85e89d
markup.changed, punctuation.definition.changed#ffab70
markup.ignored, markup.untracked#2f363d
meta.diff.range#b392f0bold
meta.diff.header#79b8ff
meta.separator#79b8ffbold
meta.output#79b8ff
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#d1d5da
brackethighlighter.unmatched#fdaeb7
constant.other.reference.link, string.other.link, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#bef264
markup.underline.link.markdown#dedcd590underline
type.identifier#fff
support.class, support.other.namespace#fff
entity.other.attribute-name.html.vue#a6accd
invalid.illegal.unrecognized-tag.htmlnormal

Shiki preview

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

Loading...

Leaf Theme by Leaf PHP - VS Code Theme