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
emphasis—italic
strong—bold
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.caps—bold
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.underline—underline
string.other.link.title.markdown#252B28underline
markup.underline.link#826381—
markup.bold#9F733Cbold
markup.heading#9F733Cbold
markup.italic—italic
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—