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.background#d6cab1
  • activityBar.dropBackground#eee8d5
  • activityBar.foreground#443b1e
  • activityBar.inactiveForeground#a09472
  • activityBarBadge.background#927e46
  • badge.background#a08a4c
  • badge.foreground#fff6e4
  • button.background#af9f74
  • debugExceptionWidget.background#fff4e1
  • debugExceptionWidget.border#d6c9ae
  • debugToolBar.background#ddd6c1
  • diffEditor.border#c0b9a8
  • diffEditor.insertedTextBackground#01c21b18
  • diffEditor.removedTextBackground#fd00001a
  • dropdown.background#f1e2c0
  • dropdown.border#af8f24c9
  • editor.background#f1e2c0
  • editor.findMatchBackground#fbff02
  • editor.findMatchBorder#b6b900
  • editor.findMatchHighlightBackground#b6c08196
  • editor.findRangeHighlightBackground#faf8733a
  • editor.foreground#221111aa
  • editor.hoverHighlightBackground#ffdd8866
  • editor.lineHighlightBackground#00000011
  • editor.rangeHighlightBackground#00000000
  • editor.selectionBackground#00b94d3a
  • editor.selectionHighlightBackground#ffffff11
  • editor.selectionHighlightBorder#999999
  • editor.snippetFinalTabstopHighlightBorder#777777
  • editor.snippetTabstopHighlightBackground#00000000
  • editor.snippetTabstopHighlightBorder#cccccc
  • editor.wordHighlightBackground#fffdf540
  • editor.wordHighlightBorder#bbbbbb
  • editor.wordHighlightStrongBackground#fffdf540
  • editor.wordHighlightStrongBorder#bbbbbb
  • editorBracketMatch.background#43abca71
  • editorBracketMatch.border#00000000
  • editorCursor.foreground#222222
  • editorError.foreground#ff0000aa
  • editorGroup.border#b4ae9e
  • editorGroup.dropBackground#92d6872d
  • editorGroupHeader.tabsBackground#e1d4b6
  • editorGutter.addedBackground#018f147b
  • editorGutter.deletedBackground#cf00008c
  • editorGutter.modifiedBackground#aa8844aa
  • editorHint.foreground#00af17
  • editorHoverWidget.background#f1e2c0
  • editorHoverWidget.border#b9ad95
  • editorIndentGuide.activeBackground#056b275d
  • editorIndentGuide.background#c7c19e69
  • editorInfo.foreground#00aaff
  • editorLineNumber.activeForeground#8e9182
  • editorLineNumber.foreground#bdbbaa
  • editorLink.activeForeground#3390bb
  • editorMarkerNavigation.background#ece2cc
  • editorOverviewRuler.border#a39c8b
  • editorRuler.foreground#c7c19e69
  • editorSuggestWidget.background#f1e2c0
  • editorSuggestWidget.border#d6c9ae
  • editorSuggestWidget.foreground#555555
  • editorSuggestWidget.selectedBackground#f8b23a67
  • editorUnnecessaryCode.border#fc6767
  • editorWarning.foreground#7a7a00
  • editorWhitespace.foreground#aaaaaa
  • editorWidget.background#f1e2c0
  • editorWidget.border#c2b8a6
  • editorWidget.resizeBorder#c2b8a6
  • errorForeground#fc5050
  • extensionButton.prominentBackground#a78a3a
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#c2a24c
  • focusBorder#00aca3
  • foreground#555555
  • gitDecoration.addedResourceForeground#008800
  • gitDecoration.conflictingResourceForeground#ff00ff
  • gitDecoration.deletedResourceForeground#ff0000
  • gitDecoration.ignoredResourceForeground#666666aa
  • gitDecoration.modifiedResourceForeground#8a6500
  • gitDecoration.untrackedResourceForeground#009900
  • input.background#d6cab1
  • input.foreground#333333
  • input.placeholderForeground#586e75aa
  • inputOption.activeBorder#079dc2
  • inputValidation.errorBackground#ffffff
  • inputValidation.errorBorder#fc5050
  • inputValidation.errorForeground#fc5050
  • list.activeSelectionBackground#d4c8ac
  • list.activeSelectionForeground#555555
  • list.dropBackground#92d68762
  • list.focusBackground#d4c8ac
  • list.highlightForeground#b58900
  • list.hoverBackground#d4c8ac
  • list.hoverForeground#111111
  • list.inactiveFocusBackground#f1e2c0
  • list.inactiveSelectionBackground#f1e2c0
  • list.warningForeground#910096
  • listFilterWidget.background#0ac5bcce
  • listFilterWidget.noMatchesOutline#ff0000
  • listFilterWidget.outline#00000000
  • menu.background#f1e2c0
  • menu.foreground#666055
  • menu.selectionBackground#d6cab1
  • menu.selectionForeground#333333
  • menu.separatorBackground#a19781
  • menubar.selectionBackground#d6cab1
  • menubar.selectionBorder#d6cab1
  • menubar.selectionForeground#333333
  • merge.currentHeaderBackground#00aaaa55
  • merge.incomingHeaderBackground#0000aa55
  • notificationCenterHeader.background#e1d4b6
  • notifications.background#f1e2c0
  • panel.background#e4d6b4
  • panel.border#e1d4b6
  • panel.dropBackground#92d68762
  • panelTitle.activeBorder#555555
  • panelTitle.activeForeground#222222
  • panelTitle.inactiveForeground#777777
  • peekView.border#ca9e1b
  • peekViewEditor.background#f7eed7
  • peekViewEditor.matchHighlightBackground#dad7ae
  • peekViewResult.background#ecdebf
  • peekViewResult.fileForeground#333333
  • peekViewResult.lineForeground#333333
  • peekViewResult.matchHighlightBackground#dad7ae
  • peekViewResult.selectionBackground#e7d2a3
  • peekViewResult.selectionForeground#111111
  • peekViewTitle.background#f1e8d1
  • peekViewTitleDescription.foreground#777777
  • peekViewTitleLabel.foreground#111111
  • pickerGroup.border#aaaaaa
  • pickerGroup.foreground#b48a15
  • progressBar.background#b58900
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#bda679cc
  • selection.background#00b94d3a
  • sideBar.background#e1d4b6
  • sideBar.dropBackground#92d68762
  • sideBar.foreground#484848
  • sideBarSectionHeader.background#d6cab1
  • sideBarSectionHeader.foreground#444444
  • sideBarTitle.foreground#586e75
  • statusBar.background#e1d4b6
  • statusBar.debuggingBackground#ffbb44
  • statusBar.foreground#666666
  • statusBar.noFolderBackground#e1d4b6
  • statusBar.noFolderForeground#666666
  • statusBarItem.activeBackground#f1e2c0
  • statusBarItem.hoverBackground#f1e2c0
  • statusBarItem.prominentBackground#fdfd00
  • statusBarItem.prominentHoverBackground#ffffff
  • tab.activeBackground#f1e2c0
  • tab.activeModifiedBorder#00a5a5
  • tab.border#f1e2c0
  • tab.inactiveBackground#d6cab1
  • tab.inactiveForeground#888888
  • terminal.ansiBlack#443826
  • terminal.ansiBlue#004491
  • terminal.ansiBrightBlack#000000
  • terminal.ansiBrightBlue#0099dd
  • terminal.ansiBrightCyan#006666
  • terminal.ansiBrightGreen#009944
  • terminal.ansiBrightMagenta#ff2288ee
  • terminal.ansiBrightRed#ff0000
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ff6600
  • terminal.ansiCyan#008b8b
  • terminal.ansiGreen#6faa00
  • terminal.ansiMagenta#aa00aa
  • terminal.ansiRed#cc1100
  • terminal.ansiWhite#777777
  • terminal.ansiYellow#9b6a00
  • terminal.foreground#333333
  • textLink.activeForeground#00b0b0
  • textLink.foreground#009090
  • titleBar.activeBackground#e1d4b6
  • titleBar.activeForeground#333333
  • titleBar.inactiveBackground#d6cab1
  • titleBar.inactiveForeground#aaaaaa
  • widget.shadow#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
text, source#8D796B
entity.name#009944
meta.function-call, meta.method-call, meta.function-call entity.name.function, meta.method-call entity.name.function#009B98
entity.other.inherited-class#B96900D7
variable#879900
variable.other.property, variable.other.object.property, support.type.property-name, meta.object-literal.key#879900
variable.language#009944
support.variable, support.class, support.constant, support.function#008888
variable.parameter, entity.name.variable.parameter#6677BB
variable.function#008888
constant#AA00AABB
constant.numeric#F57B00
storage.type, keyword.type, punctuation.definition.annotation#038DBEEE
storage.modifier#008888
support.type#B96900D7
keyword.import, keyword.export, keyword.control.import, keyword.control.export, keyword.other.import, keyword.other.export, keyword.other.using, keyword.control.directive.include#CC1100CC
keyword.control#CC1100CC
keyword.control.conditional, keyword.control.trycatch, keyword.control.try, keyword.control.loop, switch-expression.expr keyword.control.switch#222222
keyword.operator#F57B00
keyword#038DBEEE
string, punctuation.definition.string#A7882D
string.regexp, string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.escape.backslash.regexp#EE4444DD
meta.string-contents.quoted.double punctuation.definition.variable, punctuation.definition.interpolation, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.definition.variable.makefile#EE4444DD
comment, punctuation.definition.comment#999999DD
invalid#FF0000
invalid.deprecated#F00D86CC
punctuation.definition.directive#CC1100CC
source.cs entity.name.variable#839400
entity.name.function.cs#009944
keyword.other.new.cs#CC1100CC
source.c, source.cpp#879900
source.c punctuation, source.cpp punctuation#8D796B
meta.function.c#6677BB
meta.function-call.c#879900
support.type.property-name, support.type.vendored.property-name#879900
meta.property-value, support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media#A7882D
keyword.control.at-rule, keyword.control.at-rule punctuation.definition.keyword#CC1100CC
keyword.control.at-rule.import, keyword.control.at-rule.import punctuation.definition.keyword#CC1100CC
variable.scss, variable.other.less, variable punctuation.definition#EE4444DD
keyword.other.important#CC1100CC
constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color, keyword.other.unit#F57B00
variable.interpolation.scss#8D796B
support.constant.color.w3c-standard-color-name.css, support.constant.color.w3c-extended-color-name#8D796B
constant.other.symbol.hashkey.ruby, keyword.operator.dereference.java, keyword.operator.navigation.groovy, meta.scope.for-loop.shell punctuation.definition.string.begin, meta.scope.for-loop.shell punctuation.definition.string.end, meta.scope.for-loop.shell string, punctuation.separator.list.comma.css, constant.language.empty-list.haskell, punctuation.section.embedded, punctuation.definition.block, punctuation.terminator#8D796B
source.go#879900
source.go punctuation#8D796B
variable.other.assignment.go#839400
support.function.go#009B98
string entity.name.import.go#A7882D
entity.name.tag, punctuation.definition.tag, punctuation.definition.tag source#038DBEEE
support.class.component.js#009B98
meta.attribute.class string, entity.other.attribute-name.class, entity.other.attribute-name.class punctuation.definition.entity#009944
meta.attribute.id string, entity.other.attribute-name.id, entity.other.attribute-name.id punctuation.definition.entity#BB3366EE
entity.other.attribute-name#879900
meta.tag.attributes.js keyword.operator.assignment.js#8D796B
punctuation.definition.entity#AA00AABB
source.java#879900
source.java punctuation#8D796B
variable.other.definition.java#839400
meta.function-call.java, meta.method-call.java#879900
storage.modifier.import#879900
support.module.node, support.type.object.module#CC1100CC
support.variable.property#879900
support.type.property-name.json, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json#879900
string.quoted.double.json, punctuation.definition.string.begin.json, punctuation.definition.string.end.json#A7882D
markup.heading, entity.name.section.markdown#009944
markup.underline.link.#038DBEEE
markup.list.numbered#009B98
markup.list.unnumbered#879900
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown#222222
markup.quote.markdown#008888
meta.separator.markdown#EE4444DD
markup.italic#B96900D7italic
markup.bold#B96900D7bold
markup.bold markup.italic#B96900D7bold italic
punctuation.definition.variable.php#879900
variable.language punctuation.definition.variable.php#009944
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, punctuation.section.embedded.end source.php, punctuation.section.embedded.end source.ruby#6677BB
source.python#879900
source.python punctuation#8D796B
meta.function-call.arguments#879900
meta.function-call.arguments meta.function-call#879900
string.quoted.docstring, string.quoted.docstring punctuation.definition.string#B96900D7
punctuation.definition.variable.shell#879900
token.info-token#316BCD
token.warn-token#CD9731
token.error-token#CD3131
token.debug-token#800080

Shiki preview

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

Loading...

Sepia Theme - Coding Theme