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#f2e5bc
  • activityBar.border#ebdbb2
  • activityBar.foreground#3c3836
  • activityBarBadge.background#458588
  • activityBarBadge.foreground#ebdbb2
  • badge.background#8f3f71
  • badge.foreground#f2e5bc
  • button.background#45858880
  • button.foreground#3c3836
  • button.hoverBackground#45858860
  • debugToolBar.background#f2e5bc
  • diffEditor.insertedTextBackground#79740e30
  • diffEditor.removedTextBackground#9d000630
  • dropdown.background#f2e5bc
  • dropdown.border#ebdbb2
  • dropdown.foreground#3c3836
  • editor.background#f2e5bc
  • editor.findMatchBackground#07667870
  • editor.findMatchHighlightBackground#af3a0330
  • editor.findRangeHighlightBackground#07667870
  • editor.foreground#3c3836
  • editor.hoverHighlightBackground#689d6a50
  • editor.lineHighlightBackground#ebdbb260
  • editor.lineHighlightBorder#ebdbb200
  • editor.selectionBackground#689d6a40
  • editor.selectionHighlightBackground#b5761440
  • editorBracketHighlight.foreground1#b16286
  • editorBracketHighlight.foreground2#458588
  • editorBracketHighlight.foreground3#689d6a
  • editorBracketHighlight.foreground4#98971a
  • editorBracketHighlight.foreground5#d79921
  • editorBracketHighlight.foreground6#d65d0e
  • editorBracketHighlight.unexpectedBracket.foreground#cc241d
  • editorBracketMatch.background#92837480
  • editorBracketMatch.border#f2e5bc00
  • editorCodeLens.foreground#7c6f6490
  • editorCursor.foreground#3c3836
  • editorError.foreground#cc241d
  • editorGroup.border#ebdbb2
  • editorGroup.dropBackground#ebdbb260
  • editorGroupHeader.noTabsBackground#ebdbb2
  • editorGroupHeader.tabsBackground#f2e5bc
  • editorGroupHeader.tabsBorder#ebdbb2
  • editorGutter.addedBackground#79740e
  • editorGutter.background#f2e5bc00
  • editorGutter.deletedBackground#9d0006
  • editorGutter.modifiedBackground#076678
  • editorHoverWidget.background#f2e5bc
  • editorHoverWidget.border#ebdbb2
  • editorInfo.foreground#458588
  • editorLineNumber.foreground#bdae93
  • editorLink.activeForeground#3c3836
  • editorOverviewRuler.addedForeground#076678
  • editorOverviewRuler.border#f2e5bc00
  • editorOverviewRuler.commonContentForeground#928374
  • editorOverviewRuler.currentContentForeground#458588
  • editorOverviewRuler.deletedForeground#076678
  • editorOverviewRuler.errorForeground#9d0006
  • editorOverviewRuler.findMatchForeground#665c54bf
  • editorOverviewRuler.incomingContentForeground#689d6a
  • editorOverviewRuler.infoForeground#8f3f71
  • editorOverviewRuler.modifiedForeground#076678
  • editorOverviewRuler.rangeHighlightForeground#665c54bf
  • editorOverviewRuler.selectionHighlightForeground#bdae93bf
  • editorOverviewRuler.warningForeground#d79921
  • editorOverviewRuler.wordHighlightForeground#bdae93bf
  • editorOverviewRuler.wordHighlightStrongForeground#bdae93bf
  • editorRuler.foreground#7c6f6440
  • editorSuggestWidget.background#f2e5bc
  • editorSuggestWidget.border#ebdbb2
  • editorSuggestWidget.foreground#3c3836
  • editorSuggestWidget.highlightForeground#689d6a
  • editorSuggestWidget.selectedBackground#ebdbb260
  • editorWarning.foreground#d79921
  • editorWhitespace.foreground#7c6f6420
  • editorWidget.background#f2e5bc
  • editorWidget.border#ebdbb2
  • errorForeground#9d0006
  • extensionButton.prominentBackground#79740e80
  • extensionButton.prominentHoverBackground#79740e30
  • focusBorder#ebdbb2
  • foreground#3c3836
  • gitDecoration.conflictingResourceForeground#b16286
  • gitDecoration.deletedResourceForeground#cc241d
  • gitDecoration.ignoredResourceForeground#a89984
  • gitDecoration.modifiedResourceForeground#d79921
  • gitDecoration.untrackedResourceForeground#98971a
  • input.background#3c383605
  • input.border#ebdbb2
  • input.foreground#3c3836
  • input.placeholderForeground#3c383660
  • inputOption.activeBorder#3c383660
  • inputValidation.errorBackground#cc241d80
  • inputValidation.errorBorder#9d0006
  • inputValidation.infoBackground#45858880
  • inputValidation.infoBorder#076678
  • inputValidation.warningBackground#d7992180
  • inputValidation.warningBorder#b57614
  • list.activeSelectionBackground#ebdbb280
  • list.activeSelectionForeground#af3a03
  • list.dropBackground#ebdbb2
  • list.focusBackground#ebdbb2
  • list.focusForeground#3c3836
  • list.highlightForeground#689d6a
  • list.hoverBackground#ebdbb280
  • list.hoverForeground#504945
  • list.inactiveSelectionBackground#ebdbb280
  • list.inactiveSelectionForeground#d65d0e
  • menu.border#ebdbb2
  • menu.separatorBackground#ebdbb2
  • merge.border#f2e5bc00
  • merge.currentContentBackground#45858820
  • merge.currentHeaderBackground#45858840
  • merge.incomingContentBackground#689d6a20
  • merge.incomingHeaderBackground#689d6a40
  • notebook.cellBorderColor#a89984
  • notebook.cellEditorBackground#ebdbb2
  • notebook.focusedCellBorder#665c54
  • notebook.focusedEditorBorder#a89984
  • panel.border#ebdbb2
  • panelTitle.activeForeground#3c3836
  • peekView.border#ebdbb2
  • peekViewEditor.background#ebdbb250
  • peekViewEditorGutter.background#ebdbb250
  • peekViewResult.background#ebdbb250
  • peekViewResult.fileForeground#3c3836
  • peekViewResult.matchHighlightBackground#427b5830
  • peekViewResult.selectionBackground#427b5830
  • peekViewResult.selectionForeground#427b5830
  • peekViewTitle.background#ebdbb250
  • peekViewTitleDescription.foreground#665c54
  • peekViewTitleLabel.foreground#3c3836
  • progressBar.background#689d6a
  • scrollbar.shadow#f2e5bc
  • scrollbarSlider.activeBackground#689d6a
  • scrollbarSlider.background#d5c4a199
  • scrollbarSlider.hoverBackground#bdae93
  • selection.background#689d6a80
  • sideBar.background#f2e5bc
  • sideBar.border#ebdbb2
  • sideBar.foreground#504945
  • sideBarSectionHeader.background#f2e5bc00
  • sideBarSectionHeader.foreground#3c3836
  • sideBarTitle.foreground#3c3836
  • statusBar.background#f2e5bc
  • statusBar.border#ebdbb2
  • statusBar.debuggingBackground#af3a03
  • statusBar.debuggingBorder#f2e5bc00
  • statusBar.debuggingForeground#f2e5bc
  • statusBar.foreground#3c3836
  • statusBar.noFolderBackground#f2e5bc
  • statusBar.noFolderBorder#f2e5bc00
  • tab.activeBackground#d5c4a1
  • tab.activeBorder#d65d0e
  • tab.activeForeground#3c3836
  • tab.border#f2e5bc00
  • tab.inactiveBackground#f2e5bc
  • tab.inactiveForeground#7c6f64
  • tab.unfocusedActiveBorder#f2e5bc00
  • tab.unfocusedActiveForeground#7c6f64
  • tab.unfocusedInactiveForeground#928374
  • terminal.ansiBlack#ebdbb2
  • terminal.ansiBlue#458588
  • terminal.ansiBrightBlack#928374
  • terminal.ansiBrightBlue#076678
  • terminal.ansiBrightCyan#427b58
  • terminal.ansiBrightGreen#79740e
  • terminal.ansiBrightMagenta#8f3f71
  • terminal.ansiBrightRed#9d0006
  • terminal.ansiBrightWhite#3c3836
  • terminal.ansiBrightYellow#b57614
  • terminal.ansiCyan#689d6a
  • terminal.ansiGreen#98971a
  • terminal.ansiMagenta#b16286
  • terminal.ansiRed#cc241d
  • terminal.ansiWhite#7c6f64
  • terminal.ansiYellow#d79921
  • terminal.background#f2e5bc
  • terminal.foreground#3c3836
  • textLink.activeForeground#458588
  • textLink.foreground#076678
  • titleBar.activeBackground#f2e5bc
  • titleBar.activeForeground#3c3836
  • titleBar.inactiveBackground#f2e5bc
  • widget.shadow#f2e5bc30

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#3c3836
emphasisitalic
strongbold
header#458588
comment, punctuation.definition.comment#928374italic
constant, support.constant, variable.arguments#8f3f71
constant.rgb-value#3c3836
entity.name.selector#427b58
entity.other.attribute-name#b57614
entity.name.tag, punctuation.tag#427b58
invalid, invalid.illegal#cc241d
invalid.deprecated#b16286
meta.selector#427b58
meta.preprocessor#af3a03
meta.preprocessor.string#79740e
meta.preprocessor.numeric#79740e
meta.header.diff#af3a03
storage#9d0006
storage.modifier#af3a03
string#79740e
string.tag#79740e
string.value#79740e
string.regexp#af3a03
string.escape#9d0006
string.quasi#427b58
string.entity#79740e
object#3c3836
module.node#076678
support.type.property-name#689d6a
keyword#9d0006
keyword.control#9d0006
keyword.control.module#427b58
keyword.control.less#d79921
keyword.operator#427b58
keyword.operator.new#af3a03
keyword.other.unit#79740e
metatag.php#af3a03
support.function.git-rebase#689d6a
constant.sha.git-rebase#79740e
meta.type.name, meta.return.type, meta.return-type, meta.cast, meta.type.annotation, support.type, storage.type.cs, variable.class#b57614
variable.this, support.variable#8f3f71
entity.name, entity.static, entity.name.class.static.function, entity.name.function, entity.name.class, entity.name.type#b57614
storage.type.function, entity.function, entity.name.function.static#427b58
entity.name.function.function-call#427b58
support.function.builtin#af3a03
entity.name.method, entity.name.method.function-call, entity.name.static.function-call#689d6a
brace#504945
meta.parameter.type.variable, variable.parameter, variable.name, variable.other, variable, string.constant.other.placeholder#076678
prototype#8f3f71
storage.type.class#9d0006
punctuation#7c6f64
punctuation.quoted#3c3836
punctuation.quasi#9d0006
*url*, *link*, *uri*underline
meta.function.python, entity.name.function.python#427b58
storage.type.function.python, storage.modifier.declaration, storage.type.class.python#9d0006
storage.type.function.async.python#9d0006
meta.function-call.generic#076678
meta.function-call.arguments#504945
entity.name.function.decorator#b57614bold
constant.other.capsbold
keyword.operator.logical#9d0006
punctuation.definition.logical-expression#af3a03
string.interpolated.dollar.shell, string.interpolated.backtick.shell#427b58
keyword.control.directive#427b58
support.function.C99#b57614
meta.function.cs, entity.name.function.cs, entity.name.type.namespace.cs#79740e
keyword.other.using.cs, entity.name.variable.field.cs, entity.name.variable.local.cs, variable.other.readwrite.cs#427b58
keyword.other.this.cs, keyword.other.base.cs#8f3f71
meta.scope.prerequisites#b57614
entity.name.function.target#79740ebold
storage.modifier.import.java, storage.modifier.package.java#665c54
keyword.other.import.java, keyword.other.package.java#427b58
storage.type.java#b57614
storage.type.annotation#076678bold
keyword.other.documentation.javadoc#427b58
comment.block.javadoc variable.parameter.java#79740ebold
source.java variable.other.object, source.java variable.other.definition.java#3c3836
meta.function-parameters.lisp#b57614
markup.underlineunderline
string.other.link.title.markdown#928374underline
markup.underline.link#8f3f71
markup.bold#af3a03bold
markup.heading#af3a03bold
markup.italicitalic
markup.inserted#79740e
markup.deleted#d65d0e
markup.changed#af3a03
markup.punctuation.quote.beginning#98971a
markup.punctuation.list.beginning#076678
markup.inline.raw, markup.fenced_code.block#427b58
string.quoted.double.json#076678
source.json meta.structure.dictionary.json support.type.property-name.json#79740e
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#427b58
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#8f3f71
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#79740e
entity.other.attribute-name.css#af3a03
source.css meta.selector#3c3836
support.type.property-name.css#af3a03
entity.other.attribute-name.class#79740e
source.css support.function.transform, source.css support.function.timing-function, source.css support.function.misc#9d0006
support.property-value, constant.rgb-value, support.property-value.scss, constant.rgb-value.scss#d65d0e
entity.name.tag.css
punctuation.definition.tag#076678
text.html entity.name.tag, text.html punctuation.tag#427b58bold
source.js variable.language#af3a03
source.ts variable.language#af3a03
source.go storage.type#b57614
source.go entity.name.import#79740e
source.go keyword.package, source.go keyword.import#427b58
source.go keyword.interface, source.go keyword.struct#076678
source.go entity.name.type#3c3836
source.go entity.name.function#8f3f71
keyword.control.cucumber.table#076678
source.reason string.double, source.reason string.regexp#79740e
source.reason keyword.control.less#427b58
source.reason entity.name.function#076678
source.reason support.property-value, source.reason entity.name.filename#af3a03
source.powershell variable.other.member.powershell#af3a03
source.powershell support.function.powershell#b57614
source.powershell support.function.attribute.powershell#665c54
source.powershell meta.hashtable.assignment.powershell variable.other.readwrite.powershell#af3a03

Shiki preview

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

Loading...