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.background#353d42
  • activityBar.border#3c3836
  • activityBar.dropBorder#353d42
  • activityBar.foreground#d3c6aa
  • activityBarBadge.background#458588
  • activityBarBadge.foreground#d3c6aa
  • badge.background#d699b6
  • badge.foreground#353d42
  • button.background#45858880
  • button.foreground#d3c6aa
  • button.hoverBackground#45858860
  • debugToolBar.background#353d42
  • diffEditor.insertedTextBackground#dbbc7f30
  • diffEditor.removedTextBackground#dc7b7c30
  • dropdown.background#353d42
  • dropdown.border#3c3836
  • dropdown.foreground#d3c6aa
  • editor.background#2c3338
  • editor.findMatchBackground#83a59870
  • editor.findMatchHighlightBackground#a7c08030
  • editor.findRangeHighlightBackground#83a59870
  • editor.foreground#d3c6aa
  • editor.hoverHighlightBackground#689d6a50
  • editor.lineHighlightBackground#3c383660
  • editor.lineHighlightBorder#3c383600
  • editor.selectionBackground#689d6a40
  • editor.selectionHighlightBackground#a7c08040
  • editorBracketHighlight.foreground1#d699b6
  • editorBracketHighlight.foreground2#d699b6
  • editorBracketHighlight.foreground3#d699b6
  • editorBracketHighlight.foreground4#d699b6
  • editorBracketHighlight.foreground5#d699b6
  • editorBracketHighlight.foreground6#d699b6
  • editorBracketHighlight.unexpectedBracket.foreground#cc241d
  • editorBracketMatch.background#92837480
  • editorBracketMatch.border#353d4200
  • editorCodeLens.foreground#a8998490
  • editorCursor.foreground#d3c6aa
  • editorError.foreground#cc241d
  • editorGroup.border#3c3836
  • editorGroup.dropBackground#3c383660
  • editorGroup.emptyBackground#3c3836
  • editorGroupHeader.noTabsBackground#3c3836
  • editorGroupHeader.tabsBackground#353d42
  • editorGroupHeader.tabsBorder#3c3836
  • editorGutter.addedBackground#dbbc7f
  • editorGutter.background#353d4200
  • editorGutter.deletedBackground#dc7b7c
  • editorGutter.modifiedBackground#83a598
  • editorHoverWidget.background#353d42
  • editorHoverWidget.border#3c3836
  • editorIndentGuide.activeBackground#a8998450
  • editorIndentGuide.background#a8998420
  • editorInfo.foreground#458588
  • editorInlayHint.background#83a598aa
  • editorInlayHint.foreground#353d42
  • editorLineNumber.foreground#665c54
  • editorLink.activeForeground#d3c6aa
  • editorOverviewRuler.addedForeground#83a598
  • editorOverviewRuler.border#353d4200
  • editorOverviewRuler.commonContentForeground#928374
  • editorOverviewRuler.currentContentForeground#458588
  • editorOverviewRuler.deletedForeground#83a598
  • editorOverviewRuler.errorForeground#dc7b7c
  • editorOverviewRuler.findMatchForeground#bdae93
  • editorOverviewRuler.incomingContentForeground#689d6a
  • editorOverviewRuler.infoForeground#d699b6
  • editorOverviewRuler.modifiedForeground#83a598
  • editorOverviewRuler.rangeHighlightForeground#bdae93
  • editorOverviewRuler.selectionHighlightForeground#665c54
  • editorOverviewRuler.warningForeground#d79921
  • editorOverviewRuler.wordHighlightForeground#665c54
  • editorOverviewRuler.wordHighlightStrongForeground#665c54
  • editorRuler.foreground#a8998440
  • editorSuggestWidget.background#353d42
  • editorSuggestWidget.border#3c3836
  • editorSuggestWidget.foreground#d3c6aa
  • editorSuggestWidget.highlightForeground#689d6a
  • editorSuggestWidget.selectedBackground#3c383660
  • editorWarning.foreground#d79921
  • editorWhitespace.foreground#a8998420
  • editorWidget.background#353d42
  • editorWidget.border#3c3836
  • errorForeground#dc7b7c
  • extensionButton.prominentBackground#dbbc7f80
  • extensionButton.prominentHoverBackground#dbbc7f30
  • focusBorder#3c3836
  • foreground#d3c6aa
  • gitDecoration.conflictingResourceForeground#b16286
  • gitDecoration.deletedResourceForeground#e1524b
  • gitDecoration.ignoredResourceForeground#7c6f64
  • gitDecoration.modifiedResourceForeground#c69027
  • gitDecoration.untrackedResourceForeground#357c39
  • input.background#d3c6aa05
  • input.border#3c3836
  • input.foreground#d3c6aa
  • input.placeholderForeground#d3c6aa60
  • inputOption.activeBorder#d3c6aa60
  • inputValidation.errorBackground#cc241d80
  • inputValidation.errorBorder#dc7b7c
  • inputValidation.infoBackground#45858880
  • inputValidation.infoBorder#83a598
  • inputValidation.warningBackground#d7992180
  • inputValidation.warningBorder#a7c080
  • list.activeSelectionBackground#3c383680
  • list.activeSelectionForeground#9db579
  • list.dropBackground#3c3836
  • list.focusBackground#3c3836
  • list.focusForeground#d3c6aa
  • list.highlightForeground#689d6a
  • list.hoverBackground#3c383680
  • list.hoverForeground#d5c4a1
  • list.inactiveSelectionBackground#3c383680
  • list.inactiveSelectionForeground#689d6a
  • merge.border#353d4200
  • merge.currentContentBackground#45858820
  • merge.currentHeaderBackground#45858840
  • merge.incomingContentBackground#689d6a20
  • merge.incomingHeaderBackground#689d6a40
  • notifications.background#353d42
  • notifications.foreground#d3c6aa
  • notificationsErrorIcon.foreground#353d42
  • notificationsInfoIcon.foreground#353d42
  • notificationsWarningIcon.foreground#353d42
  • panel.border#3c3836
  • panelTitle.activeForeground#d3c6aa
  • peekView.border#3c3836
  • peekViewEditor.background#3c383650
  • peekViewEditor.matchHighlightBackground#9db57930
  • peekViewEditorGutter.background#3c383650
  • peekViewResult.background#3c383650
  • peekViewResult.fileForeground#d3c6aa
  • peekViewResult.matchHighlightBackground#9db57930
  • peekViewResult.selectionBackground#9db57930
  • peekViewResult.selectionForeground#9db57930
  • peekViewTitle.background#3c383650
  • peekViewTitleDescription.foreground#bdae93
  • peekViewTitleLabel.foreground#d3c6aa
  • progressBar.background#689d6a
  • scrollbar.shadow#353d42
  • scrollbarSlider.activeBackground#689d6a
  • scrollbarSlider.background#50494599
  • scrollbarSlider.hoverBackground#665c54
  • selection.background#689d6a80
  • sideBar.background#353d42
  • sideBar.border#3c3836
  • sideBar.foreground#d5c4a1
  • sideBarSectionHeader.background#353d4200
  • sideBarSectionHeader.foreground#d3c6aa
  • sideBarTitle.foreground#d3c6aa
  • statusBar.background#353d42
  • statusBar.border#3c3836
  • statusBar.debuggingBackground#a7c080
  • statusBar.debuggingBorder#353d4200
  • statusBar.debuggingForeground#353d42
  • statusBar.foreground#d3c6aa
  • statusBar.noFolderBackground#353d42
  • statusBar.noFolderBorder#353d4200
  • statusBarItem.prominentBackground#689d6a
  • statusBarItem.prominentHoverBackground#689d6a70
  • tab.activeBackground#504945
  • tab.activeBorder#689d6a
  • tab.activeForeground#d3c6aa
  • tab.border#353d4200
  • tab.inactiveBackground#353d42
  • tab.inactiveForeground#a89984
  • tab.unfocusedActiveBorder#353d4200
  • tab.unfocusedActiveForeground#a89984
  • tab.unfocusedInactiveForeground#928374
  • terminal.ansiBlack#3c3836
  • terminal.ansiBlue#458588
  • terminal.ansiBrightBlack#928374
  • terminal.ansiBrightBlue#83a598
  • terminal.ansiBrightCyan#9db579
  • terminal.ansiBrightGreen#dbbc7f
  • terminal.ansiBrightMagenta#d699b6
  • terminal.ansiBrightRed#dc7b7c
  • terminal.ansiBrightWhite#d3c6aa
  • terminal.ansiBrightYellow#a7c080
  • terminal.ansiCyan#689d6a
  • terminal.ansiGreen#98971a
  • terminal.ansiMagenta#b16286
  • terminal.ansiRed#cc241d
  • terminal.ansiWhite#a89984
  • terminal.ansiYellow#d79921
  • terminal.background#353d42
  • terminal.foreground#d3c6aa
  • textLink.activeForeground#458588
  • textLink.foreground#83a598
  • titleBar.activeBackground#353d42
  • titleBar.activeForeground#d3c6aa
  • titleBar.inactiveBackground#353d42
  • widget.shadow#353d4230

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#458588
comment, punctuation.definition.comment#808d84italic
comment.line.documentation, comment.block.documentation#c98081c1italic
constant, support.constant, variable.arguments#d699b6
constant.rgb-value#d3c6aa
entity.name.selector#9db579
entity.other.attribute-name#a7c080
entity.name.tag, punctuation.tag#9db579
invalid, invalid.illegal#cc241d
invalid.deprecated#b16286
keyword.control.export#a7c080
meta.selector#9db579
meta.preprocessor#a7c080
meta.preprocessor.string#dbbc7f
meta.preprocessor.numeric#dbbc7f
meta.header.diff#a7c080
storage#dc7b7c
storage.modifier#a7c080
string#dbbc7f
string.tag#dbbc7f
string.value#dbbc7f
string.regexp#a7c080
string.escape#dc7b7c
string.quasi#9db579
string.entity#dbbc7f
constant.character.escape#bf983d
object#d3c6aa
module.node#83a598
support.type.property-name#689d6a
keyword#dc7b7c
keyword.control#e69875
keyword.control.module#e69875
keyword.control.less#d77f48
keyword.operator#9db579
keyword.operator.new#a7c080
keyword.other.unit#dbbc7f
metatag.php#a7c080
support.function.git-rebase#689d6a
constant.sha.git-rebase#dbbc7f
meta.type.name, meta.return.type, meta.return-type, meta.cast, meta.type.annotation, support.type, storage.type.cs, variable.class#a7c080
variable.this, support.variable#d699b6
entity.name, entity.static, entity.name.class.static.function, entity.name.function#a7c080
entity.name.class, entity.name.type#7fbbb3
storage.type.function, entity.function, entity.name.function.static#569d79bold
entity.name.function.function-call#9db579
support.function.builtin#9db579
entity.name.method, entity.name.method.function-call, entity.name.static.function-call#689d6a
brace#d5c4a1
meta.parameter.type.variable, variable.parameter, variable.name, variable.other, variable, string.constant.other.placeholder#83a598
prototype#d699b6
storage.type.class#dc7b7c
punctuation#a89984
punctuation.quoted#d3c6aa
punctuation.quasi#dc7b7c
*url*, *link*, *uri*underline
meta.function.python, entity.name.function.python#9db579
storage.type.function.python, storage.modifier.declaration, storage.type.class.python#dc7b7c
meta.function-call.generic#83a598
meta.function-call.arguments#d5c4a1
entity.name.function.decorator#a7c080bold
constant.other.capsbold
support.function.builtin.zigbold
keyword.operator.logical#dc7b7c
punctuation.definition.logical-expression#a7c080
string.inperpolated.dollar.shell#a7c080
string.interpolated.dollar.shell, string.interpolated.backtick.shell#9db579
keyword.control.directive#9db579
support.function.C99#a7c080
meta.function.cs, entity.name.function.cs, entity.name.type.namespace.cs#dbbc7f
keyword.other.using.cs, entity.name.variable.field.cs, entity.name.variable.local.cs, variable.other.readwrite.cs#9db579
keyword.other.this.cs, keyword.other.base.cs#d699b6
meta.scope.prerequisites#a7c080
entity.name.function.target#dbbc7fbold
storage.modifier.import.java, storage.modifier.package.java#bdae93
keyword.other.import.java, keyword.other.package.java#9db579
storage.type.java#a7c080
storage.type.annotation#83a598bold
keyword.other.documentation.javadoc#9db579
comment.block.javadoc variable.parameter.java#dbbc7fbold
source.java variable.other.object, source.java variable.other.definition.java#d3c6aa
meta.function-parameters.lisp#a7c080
markup.underlineunderline
string.other.link.title.markdown#928374underline
markup.underline.link#d699b6
markup.bold#a7c080bold
markup.heading#a7c080bold
markup.italicitalic
markup.inserted#dbbc7f
markup.deleted#d65d0e
markup.changed#a7c080
markup.punctuation.quote.beginning#98971a
markup.punctuation.list.beginning#83a598
markup.inline.raw, markup.fenced_code.block#9db579
string.quoted.double.json#83a598
source.json meta.structure.dictionary.json support.type.property-name.json#dbbc7f
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#9db579
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#d699b6
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#dbbc7f
entity.other.attribute-name.css#a7c080
source.css meta.selector#d3c6aa
support.type.property-name.css#a7c080
entity.other.attribute-name.class#dbbc7f
source.css support.function.transform, source.css support.function.timing-function, source.css support.function.misc#dc7b7c
support.property-value, constant.rgb-value, support.property-value.scss, constant.rgb-value.scss#d65d0e
entity.name.tag.css
punctuation.definition.tag#83a598
text.html entity.name.tag, text.html punctuation.tag#9db579bold
source.js variable.language#a7c080
source.ts variable.language#a7c080
source.go storage.type#a7c080
source.go entity.name.import#dbbc7f
source.go keyword.package, source.go keyword.import#9db579
source.go keyword.interface, source.go keyword.struct#83a598
source.go entity.name.type#d3c6aa
source.go entity.name.function#d699b6
keyword.control.cucumber.table#83a598
source.reason string.double, source.reason string.regexp#dbbc7f
source.reason keyword.control.less#9db579
source.reason entity.name.function#83a598
source.reason support.property-value, source.reason entity.name.filename#a7c080
source.powershell variable.other.member.powershell#a7c080
source.powershell support.function.powershell#a7c080
source.powershell support.function.attribute.powershell#bdae93
source.powershell meta.hashtable.assignment.powershell variable.other.readwrite.powershell#a7c080

Shiki preview

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

Loading...

everforest-moist by MrMartian - VS Code Theme