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.activeBorder#4F9268
  • activityBar.background#D1F0DB
  • activityBar.border#303B37
  • activityBar.foreground#202725
  • activityBarBadge.background#2C7A67
  • activityBarBadge.foreground#202725
  • activityBarTop.activeBackground#D1F0DB
  • activityBarTop.activeBorder#4F9268
  • activityBarTop.background#D1F0DB
  • activityBarTop.foreground#202725
  • badge.background#826381
  • badge.foreground#303B37
  • button.background#32754B
  • button.foreground#D1F0DB
  • button.hoverBackground#32754B95
  • debugIcon.breakpointForeground#943F27
  • debugIcon.continueForeground#4F9268
  • debugIcon.pauseForeground#943F27
  • debugIcon.stepIntoForeground#4F9268
  • debugIcon.stepOutForeground#4F9268
  • debugIcon.stepOverForeground#4F9268
  • debugToolBar.background#303B37
  • diffEditor.insertedTextBackground#4F926810
  • diffEditor.removedTextBackground#9F733C20
  • dropdown.background#1E2422
  • dropdown.border#363C38
  • dropdown.foreground#202725
  • editor.background#D1F0DB
  • editor.findMatchBackground#49978470
  • editor.findMatchHighlightBackground#9F733C30
  • editor.findRangeHighlightBackground#49978470
  • editor.foldBackground#2C7A6740
  • editor.foldPlaceholderForeground#82561F90
  • editor.foreground#202725
  • editor.hoverHighlightBackground#32754B50
  • editor.lineHighlightBackground#32754B10
  • editor.lineHighlightBorder#363C3800
  • editor.selectionBackground#32754B20
  • editor.selectionHighlightBackground#798C3B40
  • editorBracketHighlight.foreground1#826381
  • editorBracketHighlight.foreground2#2C7A67
  • editorBracketHighlight.foreground3#32754B
  • editorBracketHighlight.foreground4#5C6F1E
  • editorBracketHighlight.foreground5#858701
  • editorBracketHighlight.foreground6#82561F
  • editorBracketHighlight.unexpectedBracket.foreground#943F27
  • editorBracketMatch.background#7C837E80
  • editorBracketMatch.border#303B3700
  • editorCodeLens.foreground#8E9E9290
  • editorCursor.background#D1F0DB
  • editorCursor.foreground#32754B
  • editorError.foreground#943F27
  • editorGroup.border#363C38
  • editorGroup.dropBackground#363C3860
  • editorGroup.emptyBackground#D1F0DB
  • editorGroupHeader.border#191F1D00
  • editorGroupHeader.noTabsBackground#D1F0DB
  • editorGroupHeader.tabsBackground#D1F0DB
  • editorGroupHeader.tabsBorder#191F1D00
  • editorGutter.addedBackground#5C6F1E
  • editorGutter.background#303B3700
  • editorGutter.deletedBackground#9F733C
  • editorGutter.foldingControlForeground#2C7A67
  • editorGutter.modifiedBackground#2C7A67
  • editorHoverWidget.background#303B37
  • editorHoverWidget.border#363C38
  • editorInfo.foreground#2C7A67
  • editorLineNumber.foreground#464F49
  • editorLink.activeForeground#202725
  • editorOverviewRuler.addedForeground#499784
  • editorOverviewRuler.border#303B3700
  • editorOverviewRuler.commonContentForeground#7C837E
  • editorOverviewRuler.currentContentForeground#2C7A67
  • editorOverviewRuler.deletedForeground#499784
  • editorOverviewRuler.errorForeground#943F27
  • editorOverviewRuler.findMatchForeground#9DB3A4
  • editorOverviewRuler.incomingContentForeground#32754B
  • editorOverviewRuler.infoForeground#826381
  • editorOverviewRuler.modifiedForeground#499784
  • editorOverviewRuler.rangeHighlightForeground#9DB3A4
  • editorOverviewRuler.selectionHighlightForeground#A0B1A5
  • editorOverviewRuler.warningForeground#858701
  • editorOverviewRuler.wordHighlightForeground#A0B1A5
  • editorOverviewRuler.wordHighlightStrongForeground#A0B1A5
  • editorRuler.foreground#8E9E9240
  • editorSuggestWidget.background#303B37
  • editorSuggestWidget.border#363C38
  • editorSuggestWidget.foreground#202725
  • editorSuggestWidget.highlightForeground#4F9268
  • editorSuggestWidget.selectedBackground#363C3860
  • editorWarning.foreground#858701
  • editorWhitespace.foreground#8E9E9220
  • editorWidget.background#D1F0DB
  • editorWidget.border#363C38
  • errorForeground#9F733C
  • errorLens.errorBackground#943F2720
  • errorLens.errorForeground#9F733C
  • errorLens.warningBackground#85870120
  • errorLens.warningForeground#858701
  • extensionButton.prominentBackground#798C3B80
  • extensionButton.prominentHoverBackground#798C3B30
  • focusBorder#363C38
  • foreground#202725
  • gitDecoration.conflictingResourceForeground#826381
  • gitDecoration.deletedResourceForeground#943F27
  • gitDecoration.ignoredResourceForeground#7c6f64
  • gitDecoration.modifiedResourceForeground#858701
  • gitDecoration.renamedResourceForeground#82561F
  • gitDecoration.untrackedResourceForeground#5C6F1E
  • icon.foreground#191F1D
  • input.background#D1F0DB05
  • input.border#363C38
  • input.foreground#202725
  • input.placeholderForeground#D1F0DB60
  • inputOption.activeBorder#D1F0DB60
  • inputValidation.errorBackground#943F27
  • inputValidation.errorBorder#9F733C
  • inputValidation.infoBackground#2C7A6780
  • inputValidation.infoBorder#499784
  • inputValidation.warningBackground#85870180
  • inputValidation.warningBorder#798C3B
  • list.activeSelectionBackground#363C3880
  • list.activeSelectionForeground#4F9268
  • list.dropBackground#363C38
  • list.focusBackground#363C38
  • list.focusForeground#202725
  • list.highlightForeground#32754B
  • list.hoverBackground#363C3880
  • list.hoverForeground#2D3430
  • list.inactiveSelectionBackground#363C3880
  • list.inactiveSelectionForeground#32754B
  • menu.border#363C38
  • menu.selectionBackground#2C7A67
  • menu.separatorBackground#363C38
  • merge.border#303B3700
  • merge.currentContentBackground#2C7A6720
  • merge.currentHeaderBackground#2C7A6740
  • merge.incomingContentBackground#32754B20
  • merge.incomingHeaderBackground#32754B40
  • notebook.cellBorderColor#504945
  • notebook.cellEditorBackground#32302f
  • notebook.focusedCellBorder#8E9E92
  • notebook.focusedEditorBorder#504945
  • panel.border#363C3800
  • panelSectionHeader.border#303B3700
  • panelTitle.activeForeground#202725
  • peekView.border#363C3870
  • peekViewEditor.background#363C3870
  • peekViewEditor.matchHighlightBackground#504945
  • peekViewEditorGutter.background#363C3870
  • peekViewResult.background#363C3870
  • peekViewResult.fileForeground#202725
  • peekViewResult.lineForeground#D1F0DB
  • peekViewResult.matchHighlightBackground#504945
  • peekViewResult.selectionBackground#2C7A6720
  • peekViewResult.selectionForeground#D1F0DB
  • peekViewTitle.background#363C3870
  • peekViewTitleDescription.foreground#9DB3A4
  • peekViewTitleLabel.foreground#202725
  • progressBar.background#32754B
  • sash.hoverBorder#32754B
  • scmGraph.foreground1#32754B
  • scmGraph.foreground2#5C6F1E
  • scmGraph.foreground3#858701
  • scmGraph.historyItemGroupBase#D1F0DB
  • scmGraph.historyItemGroupLocal#2C7A67
  • scmGraph.historyItemGroupRemote#2C7A67
  • scrollbar.shadow#303B37
  • scrollbarSlider.activeBackground#32754B
  • scrollbarSlider.background#50494599
  • scrollbarSlider.hoverBackground#A0B1A5
  • selection.background#32754B80
  • sideBar.background#D1F0DB
  • sideBar.foreground#2D3430
  • sideBarActivityBarTop.border#303B37
  • sideBarSectionHeader.background#D1F0DB
  • sideBarSectionHeader.foreground#3A413D
  • sideBarTitle.foreground#202725
  • statusBar.background#D1F0DB
  • statusBar.border#D1F0DB
  • statusBar.debuggingBackground#9F733C
  • statusBar.debuggingBorder#303B3700
  • statusBar.debuggingForeground#303B37
  • statusBar.foreground#202725
  • statusBar.noFolderBackground#303B37
  • statusBar.noFolderBorder#303B3700
  • statusBarItem.errorBackground#943F27
  • statusBarItem.prominentBackground#2C7A67
  • statusBarItem.warningBackground#858701
  • symbolIcon.arrayForeground#826381
  • symbolIcon.booleanForeground#9F733C
  • symbolIcon.classForeground#9F733C
  • symbolIcon.constantForeground#826381
  • symbolIcon.constructorForeground#826381
  • symbolIcon.enumeratorForeground#499784
  • symbolIcon.enumeratorMemberForeground#499784
  • symbolIcon.eventForeground#499784
  • symbolIcon.fieldForeground#499784
  • symbolIcon.functionForeground#798C3B
  • symbolIcon.interfaceForeground#499784
  • symbolIcon.keyForeground#499784
  • symbolIcon.keywordForeground#826381
  • symbolIcon.methodForeground#4F9268
  • symbolIcon.moduleForeground#499784
  • symbolIcon.nullForeground#8E9E92
  • symbolIcon.numberForeground#9F733C
  • symbolIcon.objectForeground#9F733C
  • symbolIcon.operatorForeground#8E9E92
  • symbolIcon.propertyForeground#499784
  • symbolIcon.referenceForeground#499784
  • symbolIcon.snippetForeground#9F733C
  • symbolIcon.stringForeground#4F9268
  • symbolIcon.structForeground#4F9268
  • symbolIcon.typeParameterForeground#499784
  • symbolIcon.unitForeground#9F733C
  • symbolIcon.variableForeground#9F733C
  • tab.activeBackground#49976420
  • tab.activeBorder#499764
  • tab.activeForeground#252B28
  • tab.border#303B3700
  • tab.inactiveBackground#D1F0DB
  • tab.inactiveForeground#3A413D
  • tab.unfocusedActiveBorder#303B3700
  • tab.unfocusedActiveForeground#8E9E92
  • tab.unfocusedInactiveForeground#7C837E
  • terminal.ansiBlack#363C38
  • terminal.ansiBlue#2C7A67
  • terminal.ansiBrightBlack#7C837E
  • terminal.ansiBrightBlue#499784
  • terminal.ansiBrightCyan#4F9268
  • terminal.ansiBrightGreen#798C3B
  • terminal.ansiBrightMagenta#826381
  • terminal.ansiBrightRed#9F733C
  • terminal.ansiBrightWhite#D1F0DB
  • terminal.ansiBrightYellow#A2A51D
  • terminal.ansiCyan#32754B
  • terminal.ansiGreen#5C6F1E
  • terminal.ansiMagenta#826381
  • terminal.ansiRed#943F27
  • terminal.ansiWhite#8E9E92
  • terminal.ansiYellow#858701
  • terminal.background#303B37
  • terminal.foreground#D1F0DB
  • textLink.activeForeground#2C7A67
  • textLink.foreground#499784
  • titleBar.activeBackground#D1F0DB
  • titleBar.activeForeground#252B28
  • titleBar.border#D1F0DB
  • titleBar.inactiveBackground#D1F0DB
  • titleBar.inactiveForeground#3A413D
  • widget.shadow#191F1D00

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#202725bold
emphasisitalic
strongbold
header#2C7A67bold
comment, punctuation.definition.comment#7C837Eitalic bold
constant, support.constant, variable.arguments#826381bold
constant.rgb-value#202725bold
entity.name.selector#4F9268bold
entity.other.attribute-name#798C3Bbold
entity.name.tag, punctuation.tag#4F9268bold
invalid, invalid.illegal#943F27bold
invalid.deprecated#826381bold
meta.selector#4F9268bold
meta.preprocessor#B15D43bold
meta.preprocessor.string#4F9268bold
meta.preprocessor.numeric#798C3Bbold
meta.header.diff#B15D43bold
storage#B15D43bold
storage.type, storage.modifier#B15D43bold
string#4F9268bold
string.tag#798C3Bbold
string.value#798C3Bbold
string.regexp#B15D43bold
string.escape#943F27
string.quasi#4F9268
string.entity#798C3B
object#202725
module.node#499784
support.type.property-name#32754B
keyword#B15D43
keyword.control#9F733C
keyword.control.module#4F9268
keyword.control.less#858701
keyword.operator#4F9268
keyword.operator.new#826381
keyword.other.unit#798C3B
metatag.php#9F733C
support.function.git-rebase#32754B
constant.sha.git-rebase#798C3B
meta.type.name, meta.return.type, meta.return-type, meta.cast, meta.type.annotation, support.type, storage.type.cs, variable.class#798C3B
variable.this, support.variable#826381
entity.name, entity.static, entity.name.class.static.function, entity.name.function, entity.name.class#499784
entity.name.type#826381
constant.language.boolean#9F733C
entity.function, entity.name.function.static, entity.name.function#4F9268
entity.name.function.function-call, meta.function-call.ts#4F9268
support.function.builtin#9F733C
entity.name.method, entity.name.method.function-call, entity.name.static.function-call#32754B
brace#2D3430
meta.parameter.type.variable, variable.parameter, variable.name, variable.other, variable, string.constant.other.placeholder#499784
prototype#826381
punctuation#2D3430
punctuation.quoted#202725
punctuation.quasi#9F733C
*url*, *link*, *uri*underline
meta.function.python, entity.name.function.python#4F9268
storage.type.function.python, storage.modifier.declaration, storage.type.class.python, storage.type.string.python#9F733C
storage.type.function.async.python#9F733C
meta.function-call.generic#499784
meta.function-call.arguments#2D3430
entity.name.function.decorator#798C3Bbold
constant.other.capsbold
keyword.operator.logical#9F733C
punctuation.definition.logical-expression#9F733C
string.interpolated.dollar.shell, string.interpolated.backtick.shell#4F9268
keyword.control.directive#4F9268
support.function.C99#798C3B
meta.function.cs, entity.name.function.cs, entity.name.type.namespace.cs#798C3B
keyword.other.using.cs, entity.name.variable.field.cs, entity.name.variable.local.cs, variable.other.readwrite.cs#4F9268
keyword.other.this.cs, keyword.other.base.cs#826381
meta.scope.prerequisites#798C3B
entity.name.function.target#798C3Bbold
storage.modifier.import.java, storage.modifier.package.java#252B28
keyword.other.import.java, keyword.other.package.java#4F9268
storage.type.java#798C3B
storage.type.annotation#499784bold
keyword.other.documentation.javadoc#4F9268
comment.block.javadoc variable.parameter.java#798C3Bbold
source.java variable.other.object, source.java variable.other.definition.java#202725
meta.function-parameters.lisp#798C3B
markup.underlineunderline
string.other.link.title.markdown#252B28underline
markup.underline.link#826381
markup.bold#9F733Cbold
markup.heading#9F733Cbold
markup.italicitalic
markup.inserted#798C3B
markup.deleted#82561F
markup.changed#9F733C
markup.punctuation.quote.beginning#5C6F1E
markup.punctuation.list.beginning#499784
markup.inline.raw, markup.fenced_code.block#4F9268
string.quoted.double.json#499784
source.json meta.structure.dictionary.json support.type.property-name.json#798C3B
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#4F9268
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#826381
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#798C3B
entity.other.attribute-name.css#9F733C
source.css meta.selector#202725
support.type.property-name.css#202725
entity.other.attribute-name.class#798C3B
source.css support.function.transform, source.css support.function.timing-function, source.css support.function.misc#9F733C
support.property-value, constant.rgb-value, support.property-value.scss, constant.rgb-value.scss#82561F
entity.name.tag.css
punctuation.definition.tag#499784
text.html entity.name.tag, text.html punctuation.tag#798C3Bbold
entity.other.attribute-name.html#9F733Cbold
punctuation.definition.string.end.html, punctuation.definition.string.begin.html#32754Bbold
source.js variable.language#9F733C
source.ts variable.language#9F733C
meta.function-call.ts#826381
variable.other.object.ts#202725
entity.name.function.ts#798C3B
storage.type.class.jsdoc#943F27
variable.other.jsdoc#32754B
source.go storage.type#798C3B
source.go entity.name.import#798C3B
source.go keyword.package, source.go keyword.import#4F9268
source.go keyword.interface, source.go keyword.struct#499784
source.go entity.name.type#202725
source.go entity.name.function#826381
keyword.control.cucumber.table#499784
source.reason string.double, source.reason string.regexp#798C3B
source.reason keyword.control.less#4F9268
source.reason entity.name.function#499784
source.reason support.property-value, source.reason entity.name.filename#9F733C
source.powershell variable.other.member.powershell#9F733C
source.powershell support.function.powershell#798C3B
source.powershell support.function.attribute.powershell#2D3430
source.powershell meta.hashtable.assignment.powershell variable.other.readwrite.powershell#9F733C
entity.name.tag.svelte#798C3B
entity.other.attribute-name.svelte#9F733C
support.class.component.svelte#B15D43