Skip to main content
Coding Theme

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#00000000
  • activityBar.activeBorder#fa9edb
  • activityBar.background#164133
  • activityBar.border#20604a
  • activityBar.foreground#fa9edb
  • activityBar.inactiveForeground#a8f0d8
  • activityBarBadge.background#fabd9e
  • activityBarBadge.foreground#12362a
  • activityBarTop.activeBorder#fa9edb
  • activityBarTop.dropBorder#fa9edb
  • activityBarTop.foreground#fa9edb
  • activityBarTop.inactiveForeground#a8f0d8
  • badge.background#fabd9e
  • badge.foreground#12362a
  • breadcrumb.background#12362a
  • button.background#a8f0d8
  • button.border#a8f0d8
  • button.foreground#12362a
  • button.hoverBackground#a8f0d8f2
  • button.secondaryBackground#12362a
  • button.secondaryForeground#a8f0d8
  • button.secondaryHoverBackground#12362af2
  • button.separator#12362a4d
  • commandCenter.activeBackground#39ac861a
  • commandCenter.activeBorder#20604a
  • commandCenter.background#164133
  • commandCenter.border#20604a
  • commandCenter.foreground#a8f0d8
  • commandCenter.inactiveBorder#20604a
  • commandCenter.inactiveForeground#39ac86
  • debugToolBar.background#12362a
  • diffEditor.border#20604a
  • diffEditor.diagonalFill#d6f5eb1a
  • diffEditor.insertedLineBackground#00339940
  • diffEditor.insertedTextBackground#00339940
  • diffEditor.removedLineBackground#99003340
  • diffEditor.removedTextBackground#99003340
  • diffEditorGutter.insertedLineBackground#00339940
  • diffEditorGutter.removedLineBackground#99003340
  • diffEditorOverview.insertedForeground#86acf9
  • diffEditorOverview.removedForeground#f28c9d
  • disabledForeground#39ac86
  • dropdown.background#12362a
  • dropdown.border#39ac86
  • dropdown.foreground#a8f0d8
  • dropdown.listBackground#12362a
  • editor.background#12362a
  • editor.findMatchBackground#914a0080
  • editor.findMatchHighlightBackground#914a0080
  • editor.findRangeHighlightBackground#5e630080
  • editor.foldBackground#00000000
  • editor.foreground#a8f0d8
  • editor.inactiveSelectionBackground#f57a3d4d
  • editor.lineHighlightBackground#164133
  • editor.rangeHighlightBackground#5e630080
  • editor.selectionBackground#f57a3d4d
  • editor.wordHighlightBackground#0066b280
  • editor.wordHighlightStrongBackground#9f2b9580
  • editorBracketHighlight.foreground1#88b34d
  • editorBracketHighlight.foreground2#c28b70
  • editorBracketHighlight.foreground3#c18baf
  • editorBracketHighlight.foreground4#88b34d
  • editorBracketHighlight.foreground5#c28b70
  • editorBracketHighlight.foreground6#c18baf
  • editorBracketHighlight.unexpectedBracket.foreground#f28c9d
  • editorBracketMatch.background#f57a3d26
  • editorBracketMatch.border#f57a3d80
  • editorCodeLens.foreground#8aa89e
  • editorCursor.foreground#fa9edb
  • editorGroup.border#20604a
  • editorGroup.dropBackground#f57a3d4d
  • editorGroupHeader.border#20604a
  • editorGroupHeader.noTabsBackground#12362a
  • editorGroupHeader.tabsBackground#164133
  • editorGroupHeader.tabsBorder#20604a
  • editorGutter.addedBackground#86acf9
  • editorGutter.deletedBackground#f28c9d
  • editorGutter.modifiedBackground#e18cf2
  • editorHoverWidget.background#12362a
  • editorHoverWidget.border#39ac86
  • editorIndentGuide.activeBackground1#a8f0d880
  • editorIndentGuide.background1#a8f0d81a
  • editorLightBulb.foreground#f9ac86
  • editorLightBulbAutoFix.foreground#f9ac86
  • editorLineNumber.activeForeground#a8f0d8
  • editorLineNumber.foreground#39ac86
  • editorLink.activeForeground#86acf9
  • editorOverviewRuler.border#20604a40
  • editorRuler.foreground#20604a80
  • editorStickyScroll.border#20604a
  • editorSuggestWidget.background#12362a
  • editorSuggestWidget.border#39ac86
  • editorWidget.background#12362a
  • editorWidget.border#39ac86
  • editorWidget.foreground#a8f0d8
  • editorWidget.resizeBorder#12362a
  • errorForeground#f28c9d
  • focusBorder#fa9edb
  • foreground#a8f0d8
  • gitDecoration.conflictingResourceForeground#6ef7f7
  • gitDecoration.deletedResourceForeground#f28c9d
  • gitDecoration.ignoredResourceForeground#a8f0d866
  • gitDecoration.modifiedResourceForeground#86acf9
  • gitDecoration.untrackedResourceForeground#e18cf2
  • icon.foreground#a8f0d8
  • input.background#12362a
  • input.border#39ac86
  • input.placeholderForeground#39ac86
  • inputOption.activeBorder#a8f0d8
  • keybindingLabel.background#00000000
  • keybindingLabel.border#20604a
  • keybindingLabel.bottomBorder#20604a
  • keybindingLabel.foreground#a8f0d8
  • list.activeSelectionBackground#a8f0d8
  • list.activeSelectionForeground#12362a
  • list.activeSelectionIconForeground#12362a
  • list.dropBackground#f57a3d4d
  • list.errorForeground#f28c9d
  • list.focusForeground#a8f0d8
  • list.focusHighlightForeground#12362a
  • list.highlightForeground#fa9edb
  • list.hoverBackground#39ac8626
  • list.inactiveSelectionBackground#12362a
  • list.inactiveSelectionForeground#a8f0d8
  • list.inactiveSelectionIconForeground#a8f0d8
  • list.warningForeground#f09e75
  • menu.background#164133
  • menu.border#20604a
  • menu.foreground#a8f0d8
  • menu.separatorBackground#20604a
  • merge.currentContentBackground#00339940
  • merge.currentHeaderBackground#003399a6
  • merge.incomingContentBackground#99003340
  • merge.incomingHeaderBackground#990033a6
  • notificationCenterHeader.background#164133
  • notificationCenterHeader.foreground#a8f0d8
  • notificationLink.foreground#49ab8b
  • notifications.background#164133
  • notifications.foreground#a8f0d8
  • notificationToast.border#20604a
  • panel.background#12362a
  • panel.border#20604a
  • panelSection.border#20604a
  • panelSectionHeader.border#20604a
  • panelTitle.activeBorder#fa9edb
  • panelTitle.activeForeground#fa9edb
  • panelTitle.inactiveForeground#a8f0d8
  • peekView.border#39ac86
  • peekViewEditor.background#12362a
  • peekViewResult.background#12362a
  • peekViewResult.fileForeground#a8f0d8
  • peekViewResult.lineForeground#a8f0d8
  • peekViewTitle.background#12362a
  • peekViewTitleDescription.foreground#49ab8b
  • peekViewTitleLabel.foreground#a8f0d8
  • pickerGroup.border#20604a
  • progressBar.background#a8f0d8
  • quickInput.background#164133
  • quickInputList.focusBackground#a8f0d8
  • quickInputList.focusForeground#12362a
  • quickInputList.focusIconForeground#12362a
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#a8f0d899
  • scrollbarSlider.background#a8f0d866
  • scrollbarSlider.hoverBackground#a8f0d880
  • settings.checkboxBackground#164133
  • settings.dropdownBackground#164133
  • settings.headerForeground#a5e052
  • settings.modifiedItemIndicator#f9ac86
  • settings.numberInputBackground#164133
  • settings.rowHoverBackground#16413340
  • settings.textInputBackground#164133
  • sideBar.background#164133
  • sideBar.border#20604a
  • sideBar.dropBackground#f57a3d4d
  • sideBarSectionHeader.background#164133
  • sideBarSectionHeader.border#20604a
  • statusBar.background#164133
  • statusBar.border#20604a
  • statusBar.debuggingBackground#164133
  • statusBar.foreground#a8f0d8
  • statusBar.noFolderBackground#164133
  • statusBarItem.activeBackground#39ac8666
  • statusBarItem.hoverBackground#39ac8633
  • statusBarItem.remoteBackground#164133
  • statusBarItem.remoteForeground#a8f0d8
  • statusBarItem.remoteHoverBackground#39ac8633
  • statusBarItem.remoteHoverForeground#a8f0d8
  • tab.activeBackground#12362a
  • tab.activeBorder#20604a
  • tab.activeBorderTop#fa9edb
  • tab.activeForeground#d6f5eb
  • tab.border#20604a
  • tab.inactiveBackground#164133
  • tab.inactiveForeground#a8f0d8
  • tab.unfocusedActiveBorder#20604a
  • tab.unfocusedActiveBorderTop#fa9edb
  • terminal.ansiBlack#295647
  • terminal.ansiBlue#86acf9
  • terminal.ansiBrightBlack#295647
  • terminal.ansiBrightBlue#86acf9
  • terminal.ansiBrightCyan#6ef7f7
  • terminal.ansiBrightGreen#bef76e
  • terminal.ansiBrightMagenta#e18cf2
  • terminal.ansiBrightRed#f28c9d
  • terminal.ansiBrightWhite#ede3de
  • terminal.ansiBrightYellow#f09e75
  • terminal.ansiCyan#6ef7f7
  • terminal.ansiGreen#bef76e
  • terminal.ansiMagenta#e18cf2
  • terminal.ansiRed#f28c9d
  • terminal.ansiWhite#ede3de
  • terminal.ansiYellow#f09e75
  • terminal.background#12362a
  • terminal.foreground#d6f5eb
  • textBlockQuote.background#00000000
  • textBlockQuote.border#d6f5eb
  • textLink.activeForeground#93f20d
  • textLink.foreground#93f20d
  • textPreformat.foreground#f9ac86
  • titleBar.activeBackground#164133
  • titleBar.activeForeground#a8f0d8
  • titleBar.border#20604a
  • titleBar.inactiveBackground#164133
  • titleBar.inactiveForeground#39ac86
  • toolbar.activeBackground#39ac8666
  • toolbar.hoverBackground#39ac8633
  • tree.indentGuidesStroke#a8f0d840
  • widget.border#20604a
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown#d6f5eb
emphasisitalic
strongbold
header#a5e052
comment, punctuation.definition.comment#8aa89e
constant.language#f76ec9
constant.regexp#f7a1da
support.class.component, entity.name.tag#d3f5a3
entity.name.tag.css#d6f5eb
entity.other.attribute-name#f9ac86
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss#f9ac86
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#f57a3d
invalid#f28c9d
markup.underlineunderline
markup.bold#f9ac86bold
markup.heading#a5e052bold
markup.italic#f9ac86italic
markup.strikethroughstrikethrough
markup.inserted#86acf9
markup.deleted#f28c9d
markup.changed#f09e75
punctuation.definition.quote.begin.markdown#49ab8b
punctuation.definition.list.begin.markdown#49ab8b
markup.inline.raw#f9ac86
punctuation.definition.tag#49ab8b
meta.preprocessor, entity.name.function.preprocessor#f9ac86
meta.preprocessor.string#f7a1da
constant.numeric, meta.preprocessor.numeric#fce
meta.structure.dictionary.key.python#a5e052
source.diff#49ab8b
meta.diff.header#ede3de
storage#d6f5eb
source.java storage.type, source.go storage.type#f9ac86
storage.type#a5e052
storage.modifier, keyword.operator.noexcept#a5e052
string, meta.embedded.assembly, constant.other.symbol#f7a1da
string.tag#f7a1da
string.value#f7a1da
string.regexp#f7a1da
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#49ab8b
meta.template.expression, meta.interpolation#d6f5eb
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#d3f5a3
keyword#a5e052
keyword.control#a5e052
keyword.operator.type.annotation#49ab8b
keyword.operator#a5e052
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike#a5e052
keyword.other.unit#f76ec9
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#49ab8b
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#d6f5eb
variable.language#f57a3d
entity.name.function, meta.function-call.generic, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#fdc
support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class#f9ac86
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#f9ac86
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator#a5e052
variable, meta.definition.variable.name, support.variable, entity.name.variable#d6f5eb
meta.object-literal.key#d3f5a3
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#fdc
constant.other.placeholder#a5e052
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#fce
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#fce
keyword.operator.or.regexp, keyword.control.anchor.regexp#49ab8b
keyword.operator.quantifier.regexp#fce
constant.character, constant.other.option#fce
constant.character.escape#fce
entity.name.label#d6f5eb
punctuation, meta.brace#49ab8b
Miasma by Sage Fennel - VS Code Theme